Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@denji

denji/with-analytics.js.html

Forked from simondahla/with-analytics.js.html
Created August 26, 2018 03:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save denji/48347e1e9d9914daf3a8c806500c4d89 to your computer and use it in GitHub Desktop.
Save denji/48347e1e9d9914daf3a8c806500c4d89 to your computer and use it in GitHub Desktop.
Download ZIP
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
Raw
with-analytics.js.html
<!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>
Raw
without-analytics.js.html
<!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