A/B Testing with Google Optimize and Google Tag-Manger
Introduction
In this post, we’ll explain how you can A/B test with your slider to optimise your conversion rate.
We’re building on top of Google Tag Manager and will be using Google Optimize to set up and evaluate the A/B testing.
You will also need a Google Analytics account because Google Optimize requires that.
You can read about integrating the tag manager and Google Analytics in our article Integrating Google Tag Manager and Analytics.
Preconditions
- Google Tag Manager Account
- Google Analytics Account
- Google Optimize Account
- 2 web pages + embedded slider
Create first A/B test
We will set up a redirect test for our A/B test. That is, we’ll take as the target page for our A/B test a blank page with nothing else embedded except the Google Tag Manager and Google Optimize code.
Then we will make sure that 50% of the time a user is directed to the A variant (https://slidevision.io/demo) and the other 50% to the B variant (https://slidevision.io/demo-b).
Click “Start Now”
Now we give our test a name “A/B Test Demo-Slider” and select the entry page (editor page) where our script for redirection will be located.
We also specify that we want to create a “redirect test”.
Click Create.
Configure A/B test variants
In the following view, click on “Add variant” and configure the A variant.
https://slidevision.io/demo is the URL to the A variant
Now click on Add Variant again and configure the B variant.
https://slidevision.io/demo-b is the URL to the B variant
The last step is to set up the distribution. Our entry page (editor page) should get 0 percent of the test traffic because it redirects to the A and B variants.
Accordingly, we set the distribution to Custom Percentages.
Link Google Optimize with Google Analytics
In order for us to set the goals for our A/B test in a later step, Google Optimize needs to be linked to Google Analytics.
To do this, click on “Link with Analytics”.
In the following dialogue, select the Analytics property you want to link (the same one used for your website) and confirm with “Link”.
After this step, you will be shown different instructions on how to connect.
The following dialogue shows you the code to include (note the “GTM-XXXX” variable) and links to articles that describe the different types in detail.
We focus on the tag manager in this article.
Connect Google Optimize to the tag manager
Since we are using the Google Tag Manager as described in the introductory text, we will describe the connection in this step.
Log in to the tag manager and create a new tag.
Choose the predefined Google Optimize tag as your tag type. Choose your Optimize container ID (from the snippet in the previous step).
Choose as Analytics settings your Google Analytics ID (as described in the article mentioned in the introduction text, we have saved the Analytics settings in the variable “{{Google Analytics settings}}”).
Select “Once per page” for Tag triggering options. Give your tag a name and click Save.
We explicitly don’t create a trigger here, we tackle the triggering of the Optimize tag in the next step.
Now open the existing Google Analytics tag and check that the options for tag triggering is set to “Once per page”.
Now click on the Tag order section.
Now set for Trigger a tag before the Google Analytics – Universal Analytics is triggered the previously created Google Optimize tag.
This step is necessary because Google Optimize previously redirects to the A or B variant and we don’t want to count the page view of the entry page (editor page).
Create entry page (editor page)
Now we create the script that implements the redirect. In order to achieve the highest performance and to initiate the redirection as quickly as possible, we put the code in a simple html file that you have to upload to your server.
The code is simply the snippet you use to embed the tag manager into your page.
The code looks like this (be sure to replace “GTM-XXXXXX” with your tag manager ID):
<!DOCTYPE html><html>
<head>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l! ='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXX');
</script>
</head>
<body></body></html>
Setting test goals
A professionally sound A/B test includes hypotheses in addition to significant and quantitative data. We need to measure these hypotheses, so we set the targets.
Besides bounces and dwell time, the most important metric in performance marketing is conversion.
Set a specific target page for this, e.g. /confirmation-page/. You can set this in the form-submission feature (“load hidden frame”).
Start test and evaluate
Now you can start the test =)
And after a while, evaluate the results.
(7 Bewertungen, Ø 4.57 von 5)
Loading...