Last active
November 29, 2019 11:24
-
-
Save simondahla/3299703295771ba69a8761892a6e01b2 to your computer and use it in GitHub Desktop.
Updated Instructions for Implementing Google Optimize. Where `GTM-XXXXXX` is the Optimize Container ID & where `GTM-YYYYYY` is the Google Tag Manager Container ID and where `UA-ZZZZZZZZ-Z` is the Google Analytics Property ID. Based on the latest documentation at https://support.google.com/360suite/optimize/answer/7359264
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <!-- 0. UTF-8 encoding --> | |
| <meta charset="utf-8"> | |
| <!-- 1. (OPTIONAL) Move jQuery here. --> | |
| <!-- 2. (OPTIONAL) Datalayer --> | |
| <script type="text/javascript"> | |
| window.dataLayer = window.dataLayer || []; | |
| window.dataLayer.push({ | |
| 'someVariable' : 'someValue' | |
| }); | |
| </script> | |
| <!-- 3. Google Optimize page hiding 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.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; | |
| (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c); | |
| })(window,document.documentElement,'async-hide','dataLayer', 2000,{'GTM-XXXXXX':true}); | |
| </script> | |
| <!-- 4. 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'); | |
| /* No pageview is sent here, it's done through GTM */ | |
| </script> | |
| <!-- 5. 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> | |
| <!-- 6. 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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <!-- 0. UTF-8 encoding --> | |
| <meta charset="utf-8"> | |
| <!-- 1. (OPTIONAL) Move jQuery here. --> | |
| <!-- 2. (OPTIONAL) Datalayer --> | |
| <script type="text/javascript"> | |
| window.dataLayer = window.dataLayer || []; | |
| window.dataLayer.push({ | |
| 'someVariable' : 'someValue' | |
| }); | |
| </script> | |
| <!-- 3. Google Optimize page hiding 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.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; | |
| (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c); | |
| })(window,document.documentElement,'async-hide','dataLayer', 2000,{'GTM-XXXXXX':true}); | |
| </script> | |
| <!-- 4. 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 & GA is triggered through GTM */ | |
| </script> | |
| <!-- ... Other <meta> tags goes here ... --> | |
| <!-- ... & rest of your <head> content goes here ... --> | |
| </head> | |
| <body> | |
| <!-- 5. 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Whats the reason for setting the timeout to
2000instead of4000, as the docs/examples tend to have?