We recently decided at Cyber-Duck to start using Google Tag Manager (GTM) to give our Marketing team more flexibility over the various tracking codes implemented on our clients' sites. It allows them to deploy new tracking codes without having to go through the "deployment queue" of our dev team who is running weekly releases.
We have been through a few video tutorials and many blog posts for many configuration tips, but have not found a single resource covering all the standard implementation all websites would need. The purpose of this post is to share our implementation as a "template" anyone can re-use in order to give them a comprehensive tracking environment.
Disclaimer: I will not provide a guide to users & permissions management nor integration to native apps, this guide will only cover the "Web pages" implementation.
Initial Configuration
We will assume that you already have configured the following:
- a website running on its own domain name, i.e. example.com;
- a free Google Analytics account upgraded to 'Universal Analytics' and configured for your domain;
- a free Google Tag Manager account;
- the ability for one of your developer to configure a few snippets of Javascript within your site's page templates.
The first step is to create a new Container. A container can be seen as a placeholder for all your tracking codes. Google recommends configuring one container per domain, and include the code on every single page of your website (directly after the opening tag). It should look like this:
<html><head>[...]</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PMJP6N" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<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='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-******');</script>
<!-- End Google Tag Manager -->
Don't forget to replace the GTM-****** with your actual code provided under the menu GTM > Admin > Install GTM.
Do not worry about performance of the site... It is usually recommended to include the script tags towards the footer of the page to avoid slowing down the loading of the other assets, but Google runs it asynchronously, which mean it will not affect your site's load speed.
Once this is done and deployed to your live site, you can start adding tracking tags into GTM.
The GTM implementation consists of 3 types of elements:
- Tags: These are the equivalent of pasting
<script>tags into a page template, but it will not be loaded by default; - Rules: The rules define what event or state the site must be in to trigger the load and execute the tags;
- Macros: They are like shortcuts to access variables.
These elements are configured inside a container. The container is then versioned (saved as a new version) and need to be published for the code to be activated on your live site.
Installing the basic tags
Google Analytics
The most straight-forward tags to include by default is the Google Analytics tag.
You can start this by pressing NEW > Tag with the following entries:
Tag Name:Google AnalyticsTag Type:Google Analytics > Universal AnalyticsTracking ID:Paste your UA-xxxxxxxx-x code found in Google AnalyticsEnable Display Advertising Features:Checked
This is to ensure all is covered, even if not used right nowTrack Type:Page View
You then need to create a rule to trigger this code to be loaded. This needs to appear on all pages so you can use a pre-defined rule in GTM. Click on the top right corner Firing Rules > Add and select All pages then Save to close that lightbox.
Press Save again to confirm the tag entry, this will take you back to your dashboard. Don't forget to Publish the container to activate the code on the live site. Google also offers an excellent testing / debug tool to ensure the right tags load at the right time, you can read more about it on Google Support section directly.
The steps above concludes the configuration the default GA tracking code... It is the exact equivalent of pasting the following code provided by GA itself in your pages templates:
<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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxxx-x', 'auto');
ga('send', 'pageview');
</script>
Note: this code should be removed from your site if it was already installed for tracking, as it will now be loaded by the GTM container.
To be continued...