How To Set Up Google Optimize On A WordPress Website

Nivo Digital

26 February 2018

Share This Post

Difficulty: Medium
Time: 25 Minutes

In 2017 Google released an awesome new tool out of Beta so it can be used by anyone who wants to run multivariant and A/B tests on their websites.

As a PPC expert I am always saying to business owners “yeah I can send a ton of people to your website using a paid tool like AdWords, but whether they take the desired action whilst visiting is a different challenge in itself”.

As internet users become savvier and websites become faster, improved connections are made between the question (search query) and answer (website content) and the website winners are those who answer those questions more effectively than others.

Having a contact form on nearly every PPC landing page has fast become the norm, however, what is the perfect length, what language should be used above the form to encourage the visitor to fill it out? Does the visitor prefer to connect via chat bar, form, phone or email? These are all questions every website owner should be asking themselves because if they don’t provide the perfect experience to visitors they are sure to be burning big £££ poundage.

So what’s the solution for collecting data based on testing different versions of a landing page? Google Optimize provides the marketer with a fairly simple to use interface so they can make changes to their website page without actually touching any code. Nice huh?

The setting up process for Google Optimize can be a bit of a pain so I’ve tried to break it down into simple bite-size chunks here. Let’s get started…

Let’s assume you already have the following

– Google Analytics
– Google Tag Manager (optional)

Step 1: Create a Google Optimize Account

Head on over to the sign-up page for Google Optimize and sign up for free, making sure you’re logged into the same Google account you used for Analytics and Tag Manager.

The first couple of screens will take you through your personalisation settings, untick boxes as you want. Then the next screen should look like the below, now we can get started setting everything up.

STEP 2: Create an Experiment

First off, click on the big blue button “CREATE EXPERIMENT’ and then give it a name. For this example, I have called “Change Form Call To Action” because this is what I want to test.

Then copy and paste in the URL of the page on the website you want to test. I’ve chosen

Next, you will see a notification on the right, telling you to connect your account to your Google Analytics account. Click on the text and then the big blue button “LINK PROPERTY”

Select the Analytics property from the drop-down box and save. A pop up should then appear asking if you want to add the Google Optimize Snippet to your website? You will want to do this now, so select “GET SNIPPET”.

The following will then appear. If you are NOT using Google Tag Manager to implement your Google Analytics code on your website then you can follow this next step.

If you are using Google Tag Manager skip to Step 3

Copy the ga(‘require’, ‘GTM XXXXXX’); code and either

a. Send this code and the screenshot of where it needs to be implemented to your web developer and ask them to implement. In addition, send them the code to reduce page flicker below.

b. Head over to your WordPress website and navigate to Appearance > Editor and then on the RHS find the file “header.php” click on this and will open that file, there you will see your Analytics code, like in the above image. Paste in your ga(‘require’, ‘GTM XXXXXX’) and save.

You may find that your developers have restricted access to this part of your WordPress CMS, in which case you can either ask them to un-restrict or ask them to do it for you (a).

Warning! Only attempt the above step if you are confident in editing WordPress code. 

Once you have completed the above click the “NEXT” button which will take you to a page “Minimize Page Flickering” – JUMP TO STEP 4 BELOW.

Step 3: Implement Google Optimize using Google Tag Manager

Open your Google Tag Manager account and create a new Tag. Call this something like ‘Optimize’

Then configure this page with the following settings

  • Paste in your Google Optimize tracking code
  • Select Google Analytics (or add in your tracking code here)
  • Click on Advanced Settings and select, Once per page
    • Tag Sequencing “Fire Tag Before Optimize”
    • Select Google Analytics

This is basically adding your Google Optimize

Once you’ve completed the above step, you will need to select the Trigger, select “All Pages”. If you are planning on just running an experiment on one page then you will need to create a Trigger for that individual page.

All you need to do now is publish this container.

Step 4: Reduce page flickering when using Google Optimize

You will need to copy and paste the page flickering code (as highlighted when setting up your Google Optimize account) above your Google Analytics code on your website.

If you use Google Tag Manager use this code:

<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};

Copy the code that applies to your header.php right above the start of the Google Analytics / Tag Manager Code. This will improve user experience by stop any possible page flickering when Google Optimize has been deployed.

It should look something like this if you are using Google Tag Manager…

Step 5: Test to see if Google Optimize is working!

If you have Google Assistant installed in your Chrome browser then you can check to see if you have successfully installed your Google Optimize is working properly.

Looking good? Let’s create a simple experiment so you can see it working

Step 6: Complete the Experiment Set Up

Earlier in your Google Optimize account, we started setting up an experiment. Head back over there and we can now finish setting up the test.

  1. Provide a description and hypothesis
  2. Create Variant

Once you’ve completed these steps we need to now edit the variant.

Before you proceed it is advised to add the Google Optimize Chrome Extension to your browser. This extension is a tool for previewing your Optimize experiment pages.

Click on the new “Variant 1” version of your webpage

Step 7: Edit your webpage using Google Optimize

You will be taken to the page on your website which you have chosen to create a variant of the original.

Remember we chose an A/B test so for more accurate results we only want to change one element of this page. If you want to change more elements then go back and in the right-hand column select “Multivariant”.

Here I am just going to change the “LET’S TALK PPC” to “SEE WHAT’S NEXT…”

Highlight the text or element you want to edit and click on the “EDIT ELEMENT” button in the toolbar on the right. You can then type over the original text. Once you’re done editing in the top right of your screen, click SAVE and then DONE.

You will be taken back to your Google Optimize interface where you will have 2 more simple steps to complete.

  1. Assign an objective to your experiment. Here I have selected Pageviews.
  2. Save and then Start Experiment

Click on the START button and then click on the screen icons and view in the different devices.

Step 7: View Your Google Optimize Results

Because you have connected your Google Analytics account with your Optimize, you can see the experiment from within your Analytics interface.

To view navigate to Behaviour > Experiements

Step 8: Connect Optimize with AdWords

If you want to run some super fast experiments using Google AdWords traffic only, you can now connect these 2 accounts together.

To do this head over to your AdWords account and click on the Settings cog thing and then Google Analytics. You can then simply turn on the linking.

You can then see the results of any experiement segmented by channel or campaign type within the Analytics interface.

Final Thoughts

Whilst setting up Google Optimize may seem a little painful, once completed your website has probably one of the effective tools for which it can continually develop and improve your visitor experience and essentially conversions.

I would recommend starting with simple A/B tests and then Multivariant tests. You can change almost any element on any page on your website from images to forms to the layout and text and the best thing you don’t need to touch any code!

If you would like Google Optimize set up for your business and run experiments so you get more conversions, get in touch with me today!