an a/b testers guide to google optimize implementation · implementation of google optimize...
TRANSCRIPT
An A/B testers guide to Google Optimize implementation
WHITE PAPER
Implementation of Google Optimize
Prerequisites
DataLayer best practices
Code snippet placement best practises
Anti-flicker Snippet Timeout
Which method to choose?
Preferred method - Using the Optimize snippet
Step 1 – Get the Optimize snippet
Step 2 – Add the anti-flicker snippet
Step 3 – Put it all together and add the code to your web pages
Placement order
Example #1 - Preferred method
Alternate method – via Google Tag Manager
Step 1 – Configure the Optimize Tag in Tag Manager
Step 2 – Add the anti-flicker snippet
Step 3 – Put it all together and add the code to your web pages
Placement order
Example #2 - Alternate method: GTM
Method 3 - Using modified Analytics.js tag
Step 2 – Add the anti-flicker snippet
Step 3 – Put it all together and add the code to your web pages
Placement order
Example #3 - Analytics.js method
Method 4 - Using modified GTAG
Step 1 – Modify the global site tag
Step 2 – Add the anti-flicker snippet
Step 3 – Put it all together and add the code to your web pages
Placement order
Example #4 - Gtag method
Removing an Optimize installation
Using GTM
Using analytics.js for both Optimize and Analytics
Using analytics.js for Optimize and GTM for Analytics
Using gtag.js for both Optimize and Analytics
Using gtag.js for Optimize and GTM for Analytics
Next step
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
1
Implementation of Google Optimize Optimize allows you to A/B test variants of web pages and see how they perform against a goal that you specify. It monitors the performance of your experiment, and tells you which variant is best. Google’s recommendation is to add the so called anti-flicker snippet to your website. This makes the website invisible while the active experiment loads. We at Conversionista strongly encourage that you add this to your website to avoid any form of flickering (also sometimes called FOOC flash of original content). We will cover how you implement the anti-flicker snippet further down in the white paper. More general information on the anti-flicker snippet is to be found at Google’s official support section.
Prerequisites In order to continue this guide you will need an account for the following tools:
● Google Analytics ● Google Tag Manager ● Google Optimize
Also have your Analytics tracking ID and your Optimize container ID at hand. They should look like this:
● Analytics tracking (property) ID: UA-XXXXXXXX-X ● Tag manager container ID: GTM-YYYYYY ● Optimize container ID: GTM-ZZZZZZ
If you have trouble finding any of the IDs, click the links above to see the official documentation for each tool.
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
2
DataLayer best practices When working with the page template, always use this method to check and interact with the dataLayer. This helps you to avoid a horrible mistake. The official GTM documentation suggests that the dataLayer should be declared before the GTM snippet is initialized. Like this:
<script> dataLayer = [{
'variable' : 'value' }];
</script> <!-- GTM Container Snippet -->
This is not the best practice. Having one declaration works fine but when there are several declarations on the page, the last assignment completely overwrites the current datalayer. Or in other words, every time you make this declaration you replace the old dataLayer with a new empty one.
<script> dataLayer = [{
'variable' : 'value' }];
</script> <!-- Some other code... -->
<script> dataLayer = [{
'anotherVariable' : 'anotherValue' }];
</script> <!-- GTM Container Snippet -->
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
3
NOTE To avoid this you should always use the push() method to interact with the dataLayer.
window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'var' : 'val' });
The first line checks if the global variable has been declared or not, if it has not the first line assigns a new empty array to it. This ensures that the following push() on line 2 always will work.
1. In the beginning of the page template always check whether the dataLayer has been defined or not or initialize it as a new Array if necessary
2. Always use the push() method when interacting with the dataLayer
For more in-depth information on this specific topic, please read this blog post by Simo Ahava. Also, please read the official Tag Manager documentation on how to avoid other common pitfalls.
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
4
Code snippet placement best practises Generally the code placement order should be as follows:
1. Any JavaScript (e.g. jQuery) that you wish to use in Optimize experiments. We recommend that you keep these to a minimum.
2. Initialization of any variables needed for targeting (data layer, JavaScript, cookies, etc). 3. Anti-flicker snippet. 4. Optimize snippet 5. Tag Manager container snippet. 6. Other JavaScript, trackers, and ad tags.
The code examples further down in this guide follow these general recommendations (by 1
Google) on how to add code to your website.
1. The anti-flicker snippet should be placed immediately before the Optimize snippet (after the <meta charset> declarations).
2. If using gtag or analytics.js tags (method 3 and 4 below), move your Google Analytics tracking code up to the <head>, if it's not already there. It should immediately follow the anti-flicker snippet, if possible.
3. The following should come before the Optimize snippet: ○ <meta charset> ○ Data layer initialization. ○ Setting cookies. ○ Any scripts that you may want to use or that declare JavaScript variables that
you wish to use in Optimize experiments. For example, jQuery and JavaScript used to target an Optimize variant.
○ Anti-flicker snippet
4. The following should come after the Optimize snippet: ○ Other trackers, analytics tags, ad tags and/or tags deployed by a
tag-management system. ○ Other scripts that you won’t target Optimize experiments against.
1 https://support.google.com/optimize/answer/9692472
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
5
Anti-flicker Snippet Timeout The Optimize anti-flicker snippet supports the loading of your Optimize container asynchronously while hiding the page until the container is ready, ensuring that users don't see the initial page content prior to it being modified by an experiment. More in-depth information on the anti-flicker snippet is found here. The timeout default value is set to 4000 milliseconds, which might be too high since many users expect a website to load under two seconds and up to 40% of the users will abandon a page if it loads over 3 seconds . 2
Check your Google Analytics what your average page load time is. If you have trouble interpreting the results, please refer to the official documentation. If your website’s Avg. Document Interactive Time or Avg. Document Content Loaded Time is way over 2 seconds you have a site speed problem on your website. To change the default amount, update the number passed at the end of the snippet. From a usability perspective 2000 ms is a good start. If you know that you’ve worked on your website performance you can go lower than that.
<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),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeou
t=c;
})(window,document.documentElement,'async-hide','dataLayer', 2000, {'GTM-XXXXXX':true});</script>
2 Based on the feedback of over 1000 online shoppers that were surveyed by Forrester Consulting https://www.hobo-web.co.uk/your-website-design-should-load-in-4-seconds/
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
6
Which method to choose? There are two main installation methods for implementing Google Optimize:
1. Using the Optimize snippet (optimize.js) - Preferred 2. Through Google Tag Manager, GTM
The above methods are recommended for all new implementations. There are also two additional implementation methods if you deploy Google Analytics using the global site tag (gtag.js) or using Universal Analytics (analytics.js):
3. Using the analytics.js library 4. Using the global site tag, gtag.js
To remove previous Optimize installations before using the new recommended method, go to Removing an Optimize installation.
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
7
Preferred method - Using the Optimize snippet To run Optimize experiments, you have to add the Optimize snippet to your page. By using this method, you add the optimize.js snippet directly on your page. The optimize.js snippet is a line of code that loads the specified Optimize container. When you deploy the Analytics tag through GTM, it is still recommended that you install the Optimize snippet directly on the page (as opposed to deploying Optimize through a tag in GTM). You do not have to modify your Analytics tags in GTM. Also you don’t need any Optimize tag in GTM.
Step 1 – Get the Optimize snippet First, get the Optimize snippet code. It can be found under Settings in your Google Optimize container. Example:
<script src="https://www.googleoptimize.com/optimize.js?id=GTM-XXXXXX"></script>
Where GTM-XXXXXX is your Google Optimize container ID.
If you want to load Optimize asynchronously, add async to the snippet. Example:
<script async src="https://www.googleoptimize.com/optimize.js?id=GTM-XXXXXX"></script>
Loading the script asynchronously means that it loads in parallel with other site content, instead of loading sequentially before content placed below it on the page. While the asynchronous snippet has the least impact on the rendering speed of your page, it has a greater risk of causing page flicker. If deciding to use the asynchronous script, the anti-flicker snippet should always be used.
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
8
Step 2 – Add the anti-flicker snippet While this is optional, it significantly reduces the risk of page flicker and helps provide a better user experience especially to users on slow connections. Experiment variants will be shown only when the Optimize container loads within a certain period of time (under two seconds in this example). Google has designed this snippet to be as performant as possible.
Note: If you are using Activation events who don't fire changes on the first load you don't need the anti-flicker snippet.
<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),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer', 2000, {'GTM-XXXXXX':true});</script>
Where GTM-XXXXXX is your Google Optimize container ID.
Step 3 – Put it all together and add the code to your web pages Final step is to add it to your web pages. Down below is an example where everything is put together according to the latest recommendations by Google.
Placement order This placement order follows the tagging best practices discussed in Code snippet placement best practises above.
1. Meta charset (UTF-8) 2. (jQuery and/or other JavaScript dependencies) – Optional 3. (dataLayer) – Optional 4. Google Optimize Anti-flicker Snippet 5. Optimize snippet 6. Google Tag Manager (js) 7. Google Tag Manager (iframe)
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
9
Example #1 - Preferred method
<!DOCTYPE html>
<html> <head>
<!-- (REQUIRED) Meta charset (UTF-8) encoding -->
<meta charset="utf-8">
<!-- (OPTIONAL) Move jQuery or any other JavaScript
that you wish to use in the Optimize Experiments here -->
<!-- (OPTIONAL) dataLayer declaration -->
<script type="text/javascript"> window.dataLayer = window.dataLayer || []; window.dataLayer.push({
'someVariable' : 'someValue' });
</script>
<!-- (RECOMMENDED) Google Optimize anti-flicker snippet w. Optimize Container ID -->
<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),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer', 2000, {'GTM-XXXXXX':true});</script>
<!-- (REQUIRED) Optimize snippet -->
<script src="https://www.googleoptimize.com/optimize.js?id=GTM-XXXXXX"></script>
<!-- (REQUIRED) Google Tag Manager w. GTM Container ID -->
<script type="text/javascript"> (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= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-YYYYYY');
</script> <!-- ... Other <meta> tags goes here ... -->
<!-- ... & rest of your <head> content goes here ... -->
</head> <body>
<!-- (REQUIRED) Google Tag Manager (noscript) w. GTM Container ID ... -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YYYYYY" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- ... Rest of your web page ... -->
</body> </html>
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
10
Alternate method – via Google Tag Manager When Optimize is served via Google Tag Manager, the GTM container must be loaded before the Optimize container. The result is that Optimize experiments only execute after both the GTM and Optimize containers are loaded.
Step 1 – Configure the Optimize Tag in Tag Manager Once you have the container IDs mentioned under prerequisites, follow the Tag Setup Guide for Optimize in Google Tag Manager:
1. Click Tags → New. 2. Change the default name of "Untitled Tag" to a descriptive title, such as "Optimize -
www.example.com"
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
11
3. Click Tag Configuration → Google Optimize. 4. Enter your Google Analytics Tracking ID and your Optimize container ID (a.k.a.
the Optimize snippet ID, available in the Optimize Container setup panel.) 5. Click More settings, and configure the Fields to Set and Advanced Configuration
with the same values as your Google Analytics tags. 6. Click Save, and proceed to save the tag without triggers.
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
12
7. Open any Google Analytics Page View tags that are being triggered on load of pages where you want the Google Optimize tag to be fired.
8. Click to edit the Tag Configuration, and open Advanced Settings → Tag Sequencing.
9. Check the box to fire a tag before this tag fires, and select your Google Optimize tag as a “Setup Tag”.
10. Click to Save your Google Analytics Page View tag, and repeat on any other Google Analytics Page View tags as relevant. The goal is to fire Optimize on every page where you want to be able to run an experiment.
The above procedure makes sure that Optimize fires before any Page View tags, thus minimizing potential flickering or delay.
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
13
Step 2 – Add the anti-flicker snippet While this is optional, it significantly reduces the risk of page flicker and helps provide a better user experience especially to users on slow connections. Experiment variants will be shown only when the Optimize container loads within a certain period of time (under two seconds in this example). Google has designed this snippet to be as performant as possible.
<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),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer', 2000, {'GTM-XXXXXX':true});</script>
Where GTM-XXXXXX is your Google Tag Manager container ID.
Step 3 – Put it all together and add the code to your web pages Final step is to add it to your web pages. Down below is an example where everything is put together according to the latest recommendations by Google.
Placement order This placement order follows the tagging best practices discussed in code snippet placement best practises above.
1. Meta charset (UTF-8) 2. (jQuery and/or other JavaScript dependencies) – Optional 3. (dataLayer) – Optional 4. Google Optimize Anti-flicker Snippet 5. Google Tag Manager (js) 6. Google Tag Manager (iframe)
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
14
Example #2 - Alternate method: GTM
<!DOCTYPE html>
<html> <head>
<!-- (REQUIRED) Meta charset (UTF-8) encoding -->
<meta charset="utf-8">
<!-- (OPTIONAL) Move jQuery or any other JavaScript
that you wish to use in the Optimize Experiments here -->
<!-- 2. (OPTIONAL) dataLayer declaration -->
<script type="text/javascript"> window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'someVariable' : 'someValue' });
</script>
<!-- (RECOMMENDED) Google Optimize anti-flicker snippet w. Google Tag Manager ID -->
<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),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer', 2000, {'GTM-XXXXXX':true});</script>
<!-- (REQUIRED) Google Tag Manager w. GTM Container ID -->
<script type="text/javascript"> (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= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-YYYYYY'); /* Optimize & Google Analytics are triggered through GTM */
</script>
<!-- ... Other <meta> tags goes here ... -->
<!-- ... & rest of your <head> content goes here ... -->
</head> <body>
<!-- (REQUIRED) Google Tag Manager (noscript) w. GTM Container ID ... -->
<noscript> <iframe src="//www.googletagmanager.com/ns.html?id=GTM-YYYYYY" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript> <!-- ... Rest of your web page ... -->
</body> </html>
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
15
Method 3 - Using modified Analytics.js tag If you implement Google Analytics by using the analytics.js tag directly on your page, you can add a line of code to your Analytics tag that loads the specified Optimize container. Step 1 – Modify the Analytics tracking code First, modify the Google Analytics tracking code. Example:
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-ZZZZZZZZ-Z', 'auto'); ga('require', 'GTM-XXXXXX');
ga('send', 'pageview'); </script>
Where UA-ZZZZZZZZ-Z is your Google Analytics property ID and where GTM-XXXXXX is your Google Optimize container ID.
If you have implemented Google Analytics through GTM, but still want to add Optimize with a modified Analytics.js tag, both tags need to have the same custom Analytics settings. If your Analytic tag in GTM has custom Analytics settings, you must add the same customizations to the Analytics tracking code, e.g. if you want to add cross domain tracking. You can find custom Analytics settings under “Fields to Set” in your Analytics tag in GTM.
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
16
The custom Analytics settings that must have the same values in GTM and the modified Analytics tracking code are these ones : 3
'clientId' 'sampleRate' 'siteSpeedSampleRate' 'alwaysSendReferrer' 'allowAnchor' 'allowLinker' 'cookieName' 'cookieDomain' 'cookieExpires' 'cookiePath' 'legacyCookieDomain' 'legacyHistoryImport' 'storeGac' For example, if the tag in GTM looks like the screenshot above, then allowLinker and cookieDomain has to be added to the Analytics tracking code as well:
ga('create', 'UA-ZZZZZZZZ-Z', 'auto', {allowLinker: true});
Note that cookieDomain could just be added as ‘auto’ as in the example above. The other settings should be added between curly brackets as allowLinker in the example above.
If you have several settings, you can list them within the curly brackets, separated by commas.
ga('create', 'UA-ZZZZZZZZ-Z', { allowLinker: true, cookieDomain: 'auto', sampleRate: 5, allowAnchor: false
});
All the configurable field names can be found here.
3 https://support.google.com/optimize/answer/7359264?hl=en
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
17
Step 2 – Add the anti-flicker snippet While this is optional, it significantly reduces the risk of page flicker and helps provide a better user experience especially to users on slow connections. Experiment variants will be shown only when the Optimize container loads within a certain period of time (under two seconds in this example). Google have designed this snippet to be as performant as possible.
<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),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer', 2000, {'GTM-XXXXXX':true});</script>
Step 3 – Put it all together and add the code to your web pages Final step is to add it to your web pages. Down below is an example where everything is put together according to the latest recommendations by Google.
Placement order This placement order follows the tagging best practices discussed in Code snippet placement best practises above.
8. Meta charset (UTF-8) 9. (jQuery and/or other JavaScript dependencies) – Optional 10. (dataLayer) – Optional 11. Google Optimize Anti-flicker Snippet 12. Google Analytics tracking code with Optimize 13. Google Tag Manager (js) 14. Google Tag Manager (iframe)
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
18
Example #3 - Analytics.js method
<!DOCTYPE html>
<html> <head>
<!-- (REQUIRED) Meta charset (UTF-8) encoding -->
<meta charset="utf-8">
<!-- (OPTIONAL) Move jQuery or any other JavaScript
that you wish to use in the Optimize Experiments here -->
<!-- (OPTIONAL) dataLayer declaration -->
<script type="text/javascript"> window.dataLayer = window.dataLayer || []; window.dataLayer.push({
'someVariable' : 'someValue' });
</script>
<!-- (REQUIRED) Google Optimize anti-flicker snippet w. Optimize Container ID -->
<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),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer', 2000, {'GTM-XXXXXX':true});</script>
<!-- (REQUIRED) Google Analytics + Optimize snippet -->
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-ZZZZZZZZ-Z', 'auto'); ga('require', 'GTM-XXXXXX'); ga('send', 'pageview');
</script>
<!-- (REQUIRED) Google Tag Manager w. GTM Container ID -->
<script type="text/javascript"> (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= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-YYYYYY');
</script> <!-- ... Other <meta> tags goes here ... -->
<!-- ... & rest of your <head> content goes here ... -->
</head> <body>
<!-- (REQUIRED) Google Tag Manager (noscript) w. GTM Container ID ... -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YYYYYY" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- ... Rest of your web page ... -->
</body> </html>
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
19
Method 4 - Using modified GTAG If you implement Google Analytics by using the gtag.js snippet, you can add a line of code to the gtag that loads the specified Optimize container.
Step 1 – Modify the global site tag You can find the gtag by navigating to Admin > Property column > Tracking Info > Tracking Code or modifying the tag below.
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-ZZZZZZZZ-Z"></script> <script>
window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date());
gtag('config', 'UA-ZZZZZZZZ-Z', { 'optimize_id': 'GTM-XXXXXX'}); </script>
Add your Optimize Container ID to the gtag snippet and make sure you also have the right Google Analytics tracking ID. In the snippet above, change UA-ZZZZZZZZ-Z to the ID of the Google Analytics property and GTM-XXXXXX to your Optimize Container ID (can be found in Optimize under Container > Container setup > Install Optimize).
Step 2 – Add the anti-flicker snippet While this is optional, it significantly reduces the risk of page flicker and helps provide a better user experience especially to users on slow connections. Experiment variants will be shown only when the Optimize container loads within a certain period of time (under two seconds in this example). Google have designed this snippet to be as performant as possible.
<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),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer', 2000, {'GTM-XXXXXX':true});</script>
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
20
Step 3 – Put it all together and add the code to your web pages The final step is to add the code to your web pages. Down below is an example where everything is put together according to the latest recommendations by Google. If you do not have the global site tag installed already, paste the code on every page where you want to be able to run Optimize, following the placement order in the list below. If the global site tag is already installed, just add your Optimize Container ID to the tag as in the example in step 1, and make sure the tag and the anti-flicker snippet is placed according to the placement order below. Only use one gtag per page. To use multiple gtag commands on one page, add 'send_page_view': false to all of the commands except one.
Placement order This placement order follows the tagging best practices discussed in Code snippet placement best practises above.
1. Meta charset (UTF-8) 2. (jQuery and/or other JavaScript dependencies) – Optional 3. (dataLayer) – Optional 4. Google Optimize Anti-flicker Snippet 5. Global Site Tag with Optimize ID 6. Google Tag Manager (js) 7. Google Tag Manager (iframe)
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
21
Example #4 - Gtag method
<!DOCTYPE html>
<html> <head>
<!-- (REQUIRED) Meta charset (UTF-8) encoding -->
<meta charset="utf-8">
<!-- (OPTIONAL) Move jQuery or any other JavaScript
that you wish to use in the Optimize Experiments here -->
<!-- (OPTIONAL) dataLayer declaration -->
<script type="text/javascript"> window.dataLayer = window.dataLayer || []; window.dataLayer.push({
'someVariable' : 'someValue' });
</script>
<!-- (RECOMMENDED) Google Optimize anti-flicker snippet w. Optimize Container ID -->
<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),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer', 2000, {'GTM-XXXXXX':true});</script>
<!-- (REQUIRED) Global site tag + Optimize ID -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-ZZZZZZZZ-Z"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date());
gtag('config', 'UA-ZZZZZZZZ-Z', { 'optimize_id': 'GTM-XXXXXX'});
</script>
<!-- (REQUIRED) Google Tag Manager w. GTM Container ID -->
<script type="text/javascript"> (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= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-YYYYYY');
</script>
<!-- ... Other <meta> tags goes here ... -->
<!-- ... & rest of your <head> content goes here ... -->
</head> <body>
<!-- (REQUIRED) Google Tag Manager (noscript) w. GTM Container ID ... -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YYYYYY" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- ... Rest of your web page ... -->
</body> </html>
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
22
Removing an Optimize installation How to remove an old Optimize installation depends on how it was implemented.
1. Using GTM 2. Using analytics.js for both Optimize and Analytics 3. Using analytics.js for Optimize and GTM for Analytics 4. Using gtag.js for both Optimize and Analytics 5. Using gtag.js for Optimize and GTM for Analytics
Using GTM 1. Find your Google Analytics Pageview Tag for the Analytics property linked to your
Optimize container. 2. Click on the tag to configure and go to Advanced Settings > Tag Sequencing. 3. Unclick “Fire a tag before Google Analytics Universal Analytics fires” for Setup Tag Google
Optimize.
4. Find you Google Optimize Tag in GTM and delete it 5. Publish changes 6. Change ID in your anti-flicker code (if adding Optimize again through other method)
<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),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer', 2000, {'GTM-XXXXXX':true});</script>
Where GTM-XXXXXX should now be your Optimize container ID instead of your Google Tag Manager container ID.
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
23
Using analytics.js for both Optimize and Analytics If Google Analytics is implemented through the Analytics.js snippet (hardcoded on the page), remove this line from the snippet:
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-ZZZZZZZZ-Z', 'auto'); ga('require', 'GTM-XXXXXX');
ga('send', 'pageview'); </script>
Using analytics.js for Optimize and GTM for Analytics If Google Analytics is implemented through GTM, remove the whole analytics.js snippet from the code in head. The snippet looks like this:
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-ZZZZZZZZ-Z', 'auto'); ga('require', 'GTM-XXXXXX'); ga('send', 'pageview');
</script>
See Method 3 - Using modified Analytics.js tag
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
24
Using gtag.js for both Optimize and Analytics If both Google Optimize and Google Analytics is implemented through the gtag (hardcoded on the page), remove this line from the snippet:
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-ZZZZZZZZ-Z"></script> <script>
window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date());
gtag('config', 'UA-ZZZZZZZZ-Z', { 'optimize_id': 'GTM-XXXXXX'}); </script>
(see Method 4 - Using modified GTAG)
Using gtag.js for Optimize and GTM for Analytics If Optimize is implemented through the gtag, but Google Analytics is implemented through GTM, remove the whole gtag.js snippet from the code in head. The snippet looks like this:
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-ZZZZZZZZ-Z"></script> <script>
window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date());
gtag('config', 'UA-ZZZZZZZZ-Z', { 'optimize_id': 'GTM-XXXXXX'}); </script>
(see Method 4 - Using modified GTAG)
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
25
Next step When you have everything in place, go ahead and create your first experiments. If you don’t know where to start, check our blog post 3 things to start AB-testing. Also, go ahead and read our white paper on how to add custom objectives in Google Optimize.
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
26
”We have come to Earth to save humans from bad conversion rates and websites that suck”
We are Scandinavia’s largest team of crazily passionate
optimizers who eat-live-dream conversion optimization.
We analyze your visitors' behaviour, develop
improvement hypotheses and proves the effect through
online experiments (AB-tests).
With over 500 optimization projects in the back, we have
the experience necessary to deliver results time after
time.
We’re certified too!
Get in touch with us &
get one step closer to increased conversion rates
+46 8 33 32 26
Revised Thur May 14 2020 08:11:20 GMT+0200 (CEST)
Conversionista AB Regeringsgatan 30 SE-111 53 Stockholm
https://conversionista.se/ +46 8 33 32 26 Org. No.: 556845-0075
27