Setting Up Google Optimize on WordPress

March 20, 2019

Google Optimize is a powerful tool to help you make data-informed decisions about your website. By adding some Javascript to a page, you can use the Optimize WYSIWYG to create variants of that page, and the behavior of the visitors who saw each variant will get separately tracked in Google Analytics.

Getting Google Optimize set up on your website has quite a few gotchas, even more so on WordPress. I’ve built a free plugin to make it easier to resolve the WordPress-related issues, but keep reading to learn what those problems are and how to troubleshoot them.

You can download the “Google Optimize Snippet” plugin here!

If you’re looking for a tutorial on getting started with Google Optimize experments, the article you’re reading now is probably NOT for you. What this IS about the complexities of how to get Google Optimize’s code up and running on a WordPress website. Here’s an article that goes over the basics of Google Optimize, but after you read that one you’ll probably need to come back here to get things working right on WordPress.

Which pages to put the Optimize codeblock on

Google Optimize gets implemented by adding a block of code into the HEAD of pages on your website, much like Google Tag Manager (aka GTM).

Unlike GTM, the only page you need to or should add the Optimize code to is the page that you’re using Optimize to make a variant of.

For example, imagine you’ve used Optimize to make two variants of a page — the original, with a blue “buy now” button, and a variant with a red “buy now” button. Once the original or the variant has been seen by your visitor, that visitor’s further behavior will be tracked separately by Google Analytics as they click around to other pages on your site, even if the Optimize code isn’t on those other pages; those other pages just need to be using the same Google Analytics property as the original/variant.

Adding the Optimize codeblock will add to the load/render time. Not much, but this is the case with ANYTHING you add to a page. So you should only add Optimize to pages that contain content you’re using Optimize to make a variant of.

How Google Optimize and Google Tag Manager interact

TL:DR; Keep GTM on your pages, but don’t use it to install Google Optimize.

More detail: Google Optimize works similarly to Google Tag Manager — you put a block of Javascript in the HEAD of your webpage, that calls further Google-hosted Javascript that you’ve managed via their interface, and that does stuff in the web browser when a visitor views that webpage.

While you CAN use GTM to install and manage Google Optimize, and it’s even the simplest way to get it onto a page, it is not the best way to do so. Google themselves recommend against it.

Google Optimize’s Javascript rewrites content on your webpage after the page has loaded — that’s what those ‘experiments’ are — and the visitor viewing your page will sometimes see a flicker or even the change happening, particularly if they’re on a slower connection or device.

Google provides a fix for this, the so-called “page-hiding snippet”. It hides the content on the page until the Google Optimize code has loaded and made whatever changes were desired. Usually this will be an imperceptible delay on a reasonable device and connection, but if there’s a hiccup somewhere the delay could be up to 4 seconds (at which time the “page-hiding snippet” will quit hiding the content no matter what).

To work at its best the page-hiding snippet needs to be as absolutely high up in the HEAD of your HTML as you can manage, so that it’ll be the first code to execute in the browser. The Optimize codeblock should be placed right after that, so it loads and runs ASAP and the page-hiding snippet can get the signal to stop hiding the page.

The GTM code, on the other hand, should ideally be as “low” in the HEAD of your HTML as you can manage in order to make sure that everything else happening on the page has already run. Therefore deploying the page-hiding snippet and Optimize codeblock via GTM doesn’t work so well.

See “Optimize direct and Google Tag Manager” from Google for more details about their recommendations.

Google Optimize and WordPress

WordPress works as a system of templates, and by default every page on your WordPress site uses the same “header.php” template for the HEAD section. The Google Optimize codeblock and page-hiding snippet need to be near the top of the HEAD section. And it’s bad for performance to have that code on every page. How do you square that circle?

One approach is if you wanted to put the Optimize codeblock onto a post with the post_id of 35, you could edit your theme’s “header.php” and add custom code something like

if ($post_id = 35) {echo $optimize_code;}

That can get very difficult to manage even if you’re an experienced programmer.

Alternately, you could use my free, lightweight WordPress plugin called “Google Optimize Snippet” that provides an admin for placing the snippets into the HEAD of any specific pages on your site.

Once you’ve installed and enabled the plugin, you visit the “Google Optimize Settings” page in the admin and enter your Google Analytics property ID and Optimize container ID. After that:

  • a checkbox will appear in the edit view of any page or post (or custom post type) to enable the Google Optimize codeblock on that page.
  • For things that don’t have an “edit” screen, such as your home page or archive/category pages, you enable the codeblock on the “Google Optimize Settings” page.
  • The “Google Optimize Settings page is also where you could enable the code “site-wide” for experiments to things like navigation changes.

Note that setting up a site-wide experiment with Optimize is tricky, on the Optimize end, even after you’ve got the Optimize codeblock on all of your pages.

Troubleshooting Google Optimize

The main problem people run into when configuring Google Optimize on any website is during the ‘run diagnostics’ step in the Optimize console, where it loads up your page and tests that the code is working. What can be really frustrating are ‘analytics configuration mismatch’ errors — I kept getting frustrated with “allowLinker doesn’t match”, for instance.

These errors can be particularly likely to happen if you have your Google Analytics tracker installed via GTM (and you really SHOULD have your GA tracker installed via GTM). You will have associated your Google Optimize container with a GA property, and that fires a tag with that tracker when it loads, but if certain optional fields for that tracker don’t match the same fields you set in GTM for that tracker, you’ll need to correct that.

If you’ve manually inserted your Google Optimize code into your theme’s header.php template, you’ll need to go into that file and manually edit the optional fields in that tracker code. For instance, if you have an “allowLinker” mismatch — it’ll look something like

ga('create', 'UA-xxxSomeGAPropertyIDxxx',{"allowLinker":true,"cookieDomain":"auto"});
ga('require', 'GTM-xxxSomeContainerIDxxx');

(xxxSomeGAPropertyIDxxx and xxxSomeContainerIDxxx will instead be YOUR property ID and container ID of course)

You’ll then need to go into GTM, find your tracker there, look under ‘fields to set’, and correct any mismatch either in your tracker code or in GTM.

My plugin, on the other hand, allows you to do the same thing but without editing your header.php template. You go into the “Google Optimize Settings” page, scroll to the section labeled “Google Analytics Custom Fields” that has a list of the fields that must be set the same in GTM and in the Optimize tracker on the page. You’ll change the value on the settings page, run your diagnostic again, and you should be up and running.

See “Installation Diagnostics” from Google for more details about the “Analytics configuration mismatch” error.

In conclusion…

  • Only install the Google Optimize codeblock on the page(s) you’re running experiments on.
  • Don’t use Google Tag Manager to install and manage Optimize, but do use GTM to manage your tags.
  • My free “Google Optimize Snippet” plugin makes getting Optimize onto your WordPress website much easier than editing your theme files. You can download the “Google Optimize Snippet” plugin here!

Digital at The WNET Group is not responsible for your or any third party’s use of code from this tutorial. All the information on this website is published in good faith “as is” and for general information purposes only; WNET and IEG make no representation or warranty regarding reliability, accuracy, or completeness of the content on this website, and any use you make of this code is strictly at your own risk.