Using Custom Fields to get Google Content Experiments to work in WordPress

I was pretty excited to see that Google’s Website Optimizer was being integrated into Google Analytics as Google Content Experiments and waited with baited breath to see how well the integration would go.

After a couple of weeks, I finally saw Google Content Experiments in my analytics platform, and though it doesn’t appear to be as robust as Website Optimizer is, the word on the street is that Google will continue to roll out improvements/features that will allow Google Content Experiments to surpass its predecessor’s functionality.

The lack of some of that functionality left me severely disappointed when I attempted to run my first experiment.

Apparently Google thinks (or knows…they have the data) that the web is mostly comprised of static HTML pages, because if you attempted to create an A/B experiment, you quickly found out that in order for the test to work at all, you need to place some Javascript in the head of your original page.

That would be fine if you did indeed have a static page, but what about dynamically created pages, or those controlled by a CMS…like WordPress?

That was the issue I ran into with my “testing” test. I had a WordPress site that I manage that I’ve wanted to integrate some testing on for some time. I was all geared up and ready to go–I knew what I wanted to test, created my testing page, and was ready to pull the trigger. The Google Content Experiments setup Wizard then told me I needed to place the testing script on the original page, just after the opening head tag.

Google Content Experiments

This is a real problem with WordPess sites because all pages and posts use the shared header.php file, which contains the head tag.

I was beginning to think that I wouldn’t be able to pull off any testing on this site without possibly reworking the design of the WordPress theme or getting all fancy with the coding. But then I remembered every WordPress developers favorite little friend: Custom Fields.

Custom fields are, in my opinion, one of the things that really gives WordPress the ability to compete with bigger, non-blogging, CMSs. They are simple to implement and even simpler to use but can do some pretty heavy lifting when it comes to dynamically rendered content.

Now let me show you how I used Custom Fields to insert the testing script into the head tag of my original page.

The first step, is to create a Custom Field in the WordPress backend on the page I want to add the testing script to. This is where Custom Fields in WordPress are so easy; I can just create the field on the page I’m working on. Once it is created, it becomes available for every other piece of content automatically.
If you aren’t able to see the Custom Fields input area, click the tab in the top-right corner of the screen titled: “Screen Options” and make sure that Custom Fields is checked. The Custom Fields input area will appear below your content input area and possibly below any other plugins’ input area.

Click the “enter new” link and name the field something that will be easily recognizable in the future–I used “ga_experiment_code”. Then simply paste your testing script into the value field and click the “Add Custom Field” button. You’re all done on this end and your custom field is now available for all your pages.

The next step is to add a little php code to the header.php file to output the contents of the Custom Field:

$gaExperimentCode = get_post_meta($post->ID, ‘ga_experiment_code’, true);
if($gaExperimentCode != ”){
echo $gaExperimentCode;
}

I placed this code immediately after the opening head tag.

In the first line of the code, we create a variable named: $gaExperimentCode and use a WordPress function to set its value.

$gaExperimentCode = get_post_meta($post->ID, 'ga_experiment_code', true);

The function, get_post_meta() takes three parameters: the post ID, the name of the meta field (a.k.a. our custom field) and whether to return a single item or an array.

Use the post object to retrieve the current post(page)’s ID ($post->ID), pass in the name of the custom field we created in the first step, and use the boolean value “true” for the third parameter because we only want the value of our custom field returned.

Now we check to see if the variable, $gaExperimentCode, contains any data and if there is, we want to output it.

if($gaExperimentCode != ''){
echo $gaExperimentCode;
}

There are some “cleaner” ways to write this if statement–like just checking to see if the variable I’ve declared exists, and if it does, then output its contents. But we want to make sure there is actually content to output–that’s why we are checking for an empty variable.

That’s all there is to it–easy, peezy, mac and cheesy!

You should now be able to run Google Content Experiments on your WordPress site to your heart’s content!

About Michael D. Wailes

Born and raised in Northern Colorado.