Have you got a landing page you think could perform better with just a few changes? You could make the changes, wait, and hope that your hypothesis is correct. Or you could run an A/B test, showing your new page to one half of your visitors and the original page to the rest of your visitors to see which one performs best. A/B tests and similar experiments provide genuine insights into user behaviour – removing the need to rely on assumptions or second guess visitors’ preferences. They give you quality data on what people actually do in response to your tests that you can use to increase conversions, reduce bounce rates, or improve customer satisfaction.

To date we've avoided building A/B testing into Contensis. We find that many organisations using Contensis already have a preferred optimisation platform. On top of that, any optimisation tool is only as good as the analytics platform you use it with – and there are so many great analytics platforms out there already we don’t see any need to reinvent the wheel.

Instead, we suggest that organisations not already using an optimisation platform find one that fits their needs and integrate it with Contensis. As most organisations already use Google Analytics to track and analyse visitor behaviour, we usually recommend Google’s own optimisation platform, Optimize.

Optimize allows you to quickly make variations of your pages with small changes to designs and content using an easy-use visual editor and then test these on your audience. You can run A/B, multivariate, or redirect tests and personalise web pages based on a user's location, behaviour, and even which of your Google Ads they click. Optimize is totally integrated with your Google Analytics account, and best of all, Google offer a free version that lets you run up to five tests at any one time.

In this article we’re going to look at how to install Optimize on your Contensis website by placing a tracking script in your master template. This is the quickest and most common way to get started with Optimize. It will allow you to run client-side tests that use JavaScript to show visitors the different page variations you create.

However, if you want to run more sophisticated experiments with dynamic content – swapping out components or entries from your Contensis CMS – you will need to set up Optimize to run server-side tests.

Before you start:

Before you start you’ll need:

  • Access to the Google Analytics account for your website
  • Google Chrome installed on your machine
  • The Optimize extension for Chrome

Step 1: Set up an Optimize account

Once you’ve got everything ready, you need to set up an Optimize account. Go to marketingplatform.google.com/about/optimize/ and click Start for free

You may be prompted to enter a name for your Optimize account. If you are, it’s best to name your account after your organisation, for example ‘Zengenti’. You should only set up one account per website or organisation – so make sure none of your colleagues has created one already! 

You'll also need to accept Google's terms and conditions – including their GDPR-related terms. If you don't understand the implications of this, it's best to check with whoever in your organisation is responsible for data protection.    

Step 2: Rename your container

Once you've created an account, you'll be taken to the Container set-up screen. A container holds all of the Optimize configurations for an Analytics property and its associated website. An Optimize account should have at least one container, and you should set up one container for each website you want to run experiences on.

Optimize will automatically name your container after the container ID which will look something like GTM-XXXXXXX. For the sake of clarity, I recommend renaming your container to give it the same name as the website – I've named mine after our movie demo site, Scene.

Press the kebab menu next to Container information to change the container name. 

 

Once you create your container you will see a screen asking you to create your first Experience. However, we're going to install Optimize on our website first.

Step 3: Add the Optimize snippet to your site

 Installing Optimize on your site involves adding a code snippet in the head of every page. There are two ways to do this.  

Option 1: Google Tag Manager

The first method is to use Google Tag Manager. If you already have Tag Manager set up on your site, this is by far the easiest way.

If you don’t, and you want an easy way for users to add marketing tags to your site without development knowledge, check out Google's advice on setting up and installing Tag Manager.

Once you have Tag Manager set up on your site, simply follow Google’s instructions on installing Optimize with Tag Manager.

Option 2: Google Analytics

If you don’t have Tag Manager, you can add the Optimize snippet into the Google Analytics tracking code on your site. To do this you’ll need the ability to make changes to the HTML in your Contensis master template. Google also recommends that you use the latest global site tag (gtag.js) tracking code on your site rather than the older analytics.js script.

To add Optimize using the Global Site Tag you need to amend the tag to link your Optimize container and Analytics account.

Copy the code above and replace both instances of the GA_TRACKING_ID with your Google Analytics tracking code ID. 

To find the tracking ID:

  1. Sign in to your Analytics account.
  2. Click Admin.
  3. Select an account from the menu in the ACCOUNT column.
  4. Select a property from the menu in the PROPERTY column.
  5. Under PROPERTY, press Tracking Info and then Tracking Code. Your tracking ID is the 11 character string displayed at the top of the page. It will look like UA-XXXXXXXX-X.

Now replace OPT_CONTAINER_ID with your Optimize container ID. You can find the container ID on the accounts page in Optimize – it’s the 10 character string beginning with GTM.

Now paste the amended code into the top of the head of your master template in Contensis, replacing the existing global site tag code.

Google recommend putting the tag at the very top of the head except in specific circumstances. See their advice for a list of items that should appear above the global site tag.

Step 4: Install the anti-flicker snippet

Unlike when you use Optimize server-side, client-side experiences use JavaScript to change the DOM and show variations to your visitors. In some cases your original page may load before Optimize updates the DOM, causing what’s known as ‘page flicker’ as it briefly shows visitors both versions of your page.

You can avoid this by deploying Google’s optional anti-flicker snippet:

This will load your Optimize container asynchronously while hiding the page until the container is ready – ensuring that visitors don't see the initial page content prior to it being modified by an experience.

If you are using the Global Site Tag, replace GTM-XXXXXX with your Optimize container ID and add the code to your master page template directly above the global site tag.

Or, if you are using Tag Manager, replace GTM-XXXXXX with your Tag Manager container ID instead and add the code directly above the Tag Manager tag in your master page template.

By default, the anti-flicker snippet is set to timeout after 4000 milliseconds. In the event that Optimize takes too long to load, this will stop the container loading and show the initial page content so that visitors aren't left staring at a blank screen.

Because ad blocking browser plugins can stop Optimize from loading, any visitors using an ad blocker may have to wait 4 seconds for the anti-flicker snippet to timeout before they see any content, impacting their user experience. To avoid this, change the number 4000 at the end of the snippet to 1000 to make Optimize timeout after 1 second.  

Step 5: Create an experience 

Now it's time to create your first experience. If you closed the dialog window that appeared before, go back into the Accounts screen and click on the container you created earlier. Press the button inviting you to create your first experience. 

You should usually give your experiences descriptive names to make them easier to manage. But as we're only going to be using this experience to verify everything is set up correctly, give it the name 'Test'. Enter the URL of the page you want to use for your test. I'd suggest using a preview or other non-public page for testing. 

You'll see that there are four kinds of experience you can create with Optimize:

  • A/B tests let you test two or more different versions of a page. They are great for testing minor changes to a page.  
  • Multivariate tests allow you to determine the winning combination of several different elements.   
  • Redirect tests compare two separate pages with different URLs. This is useful when you want to test a redesigned page hosted on a subdomain.    
  • Personalisations allow you create experiences targeted at a specific audience. Unlike the other kinds of experiences, personalisations can run forever with no end criteria.  

For the purposes of this walkthrough we'll set up a simple A/B test. Select A/B Test and press Create

Step 6: Create a variant

You're now ready to create a variant of your page that will let you test your hypothesis. Think of this as the 'B' part of the A/B test. 

Press ADD VARIANT to create a new variant and give it a name. I'm only creating one variant, so I'm just going to call mine 'Variant 1'. However, if you have more than one variant you should consider giving them descriptive names to make them easier to identify from the dashboard.   

Once you create your variant you'll have the option to make changes to it using the visual editor and add targeting rules that determine which visitors will see your test. 

To make changes to your variant, press the EDIT button. This will open the visual editor where you can make changes to your page by editing HTML, changing the CSS, or adding Javascript.  

I'm using the homepage of our Scene demo site to create my experience. This is what the page looks like normally: 

The homepage of our Scene demo website.

I want to see how the page performs if I change the top half of the page. By editing the text, changing the HTML, and updating the CSS I'm going to centre the subtitle, add a darker gradient so that the text stands out more, and reduce the number of film cards to three. 

The Google Optimize visual editor.

Check out's Google's documentation to learn more about the tools available in the visual editor. If you're not a developer you may need help from a colleague with front-end development experience to make more advanced changes. Once you've made your changes, press Save to return to the dashboard. 

 

From here you can alter the weighting of your experience, adjusting the proportion of your users that see the original page versus the variant, and change your targeting rules to reach a specific segment of your audience. Simply press ADD RULE to set a new targeting rule.   

You can also check that your experiment looks as it should using Preview. This is how my page looks in preview mode:  

An Optimize experiment running on the Scene homepage.

Once you're happy with your variant, how your experience is weighted, and who you're targeting, the next step is to set up Google Analytics to work with your container. 

Step 7: Link Optimize with your Google Analytics account

Before we can start our experience we need to link our Google Analytics account to our Optimize container. This will provide the data that will determine which of our variants is successful.  

Press the button in the Experience dashboard that says LINK TO ANALYTICSIf you have access to the Google Analytics account for your organisation, you should see a list of all properties that you have permission to view. 

If your Analytics account only tracks one website, there will only be one option here. However, if your organisation monitors several websites from one Analytics account, then they will all appear. Make sure you choose the Analytics property that matches the website you want to test.

Now choose one or more views from that Analytics property. Select at least one view that has few or no filters. This is important because Optimize will use the goals and metrics in that view to determine the success of your tests, and it needs as much data as possible to do that. If you’re not sure which views to choose, ask the person who manages your Analytics account.

Once you’ve selected the appropriate views, press DONE

Step 8: Set objectives for your experience 

Now you have Analytics linked you can set one or more objectives to determine the winning variant. Optimize uses the data from your Analytics view to measure the performance of your variants against the objectives you set. There are three types of objective:

  • System objectives are the most frequently used objectives. These are available by selecting Choose from list when you press the ADD EXPERIMENT OBJECTIVE BUTTON. Different options will be available depending on how your Google Analytics view is configured.  
  • Google Analytics goals are available if they are set up in your linked Analytics view and you have at least Read & Analyze permission for that view. These will appear in the same list as system objectives. 
  • Custom objectives can be set up directly in Optimize if neither system objectives or Google Analytics goals meet your needs. 

You should set objectives that match the problem you are trying to solve. For instance, if you are trying to improve the conversion rate on your product page, you should select Transactions as your objective type. Google's objectives overview has more information about the types of objective available. 

To set an objective press the ADD EXPERIMENT OBJECTIVE button. You can then choose which type of objective you'd like to choose. As I'm using a test environment with a very simple Analytics view, I can only set custom objectives choose from a limited set of system objectives:

Depending on how your Analytics view is set up, you will probably have far more options here. I'm just going to select Page Views for now.  

Final steps  

You're nearly ready to start running real experiences. First it's a good idea to run a couple of checks to make sure everything is working correctly. Start by testing your installation using the Installation diagnostics tool in the Optimize dashboard.  

The Google Optimize experience information panel

As long as everything is set up correctly, you should see a message like this:

Google Optimize installation diagnostics

It's also worth verifiying that your global site or Tag Manager tags are set up properly using Google Tag Assistant.  

If everything is okay press the Start button in the top-right corner of the dashboard to make your experience live. 

That's it – now you’re ready to start running experiences in Optimize. If you want to explore some of the more advanced tagging techniques available, such as using multiple containers, check out Google's guide to installing Optimize

Subscribe to our stories 

Ryan Bromley

About the Author

Ryan is the marketing content coordinator here at Zengenti. He looks after our marketing content, oversees campaigns, and helps teach courses in writing for the web.

More stories from Zengenti