If you’re a data driven badass, like us here at MOJO, then you’re going to want data to backup the user experience (UX) of your website. You can take control of your website and conversion rate with Google Optimize, here’s a step-by-step guide to get it running on your site.
Why Use Google Optimize on Your Site?
Google Optimize gives you the power to test, analyze and ultimately improve your website. You can A/B test elements of your website so you can analyze your user’s interactions within your site, and ultimately improve your website piece by piece.
Here’s an example of how you might use Google Optimize for your WordPress website:
Let’s say you have a hypothesis that a bigger, more prominent button attracts more conversions than a smaller button. You can use optimize to A/B test the size and color of the Buy Now Button on your WooCommerce pages. Once you have the data on which converts better, you can make a change, or cross that off your list.
How to Deploy Optimize
Step 1: Create An Optimize Account
First, to create a Google Optimize account, follow this link and click get started.
Next, enter your account name and container name.
Your account name should be your businesses name, and your container name should be the name of your website.
Step 2: Link Google Analytics
Now you need to link your analytics account to your optimize account. (If you don’t have analytics set up yet, go here and get that ready!) You can do this within your container by clicking Link Property in the right hand information panel.
Step 3: Add The Main Optimize Snippet
Now create a new tag and name it Google Optimize tag. Configure your tag and choose the Google Optimize predefined tag.
Add Your Google Analytics tracking ID and your Google Optimize ID, which should be in the form GTM-XXXXXXX. You can find your Optimize id in your Optimize Accounts Dashboard. Configure your analytics ID the same as your Google Analytics tag’s settings. And save your tag without defining any triggers.
Keep in mind that there are several ways to implement Google Optimize. If you prefer to do it a different way, you can also check out Google’s support pages.
The optimize tag needs to load before your Google Analytics tag. To configure your tags this way, navigate to your analytics tag in GTM.
Click into your Analytics tag configuration and open Advanced Settings. Check the box to fire a tag before this tag fires (as shown above), and select your Google Optimize tag.
Step 4: Add The Page-Hiding Snippet
The page hiding snippet minimizes the risk of page flicker users will see if they are running on slow connections, so it’s definitely something you want to add in to improve user experience.
Deploying the page hiding snippet involves editing your header.php file in WordPress (don’t worry—it’s just a small tweak).
You can find the page-hiding snippet here, and it looks just like this:
You’ll need to update the GTM ID in the snippet to your Google Tag Manager container ID, NOT your optimize ID.
The page hiding tag needs to be placed in the <head> section of your WordPress theme’s header.php file above the Optimize snippet. The priority is set this way because the page hiding snippet needs to load before your Optimize tag to ensure users don’t see their screen flicker as the A/B test loads.
To place the page hiding snippet in your theme’s header.php file navigate to your WordPress dashboard. Under Appearance click into the Editor. Find your Theme Header(header.php) and open the file to edit its contents.
Click proceed, find your opening <head> tag and paste the page hiding snippet directly after the <head> and click update file.
WAY TO GO! You’re ready to define your first A/B test with Google Optimize!
Now, forge ahead and learn as much as you can from the best resources about navigating the Google Optimize user interface and setting up your first Google Optimize test.