How to set up Google Analytics through Google Tag Manager and the Data Layer

Step by step guide to how to implement Google Analytics and make the implementation easier for your front-end dev team; and create more tracking transparency to allow you to better monitor and data-manage your specific tagging instructions.
Tip 1, Your Attention Span: We tried to make this “guide” super easy, and bit fun. However, because Google Tag Manager and its Data Layer are bit abstract (there are containers, tags, macros or rules to understand) and Google Analytics in itself can be tough to master (you have to understand) sessions and page views/events/dimensions/or measures, some part of this ‘guide’ may just hard to get through. If you need clarification, just call us or leave a comment :-)

Tip 2, Asynchronous and Universal Google Analytics: You can implement the below code side by side with the existing Asynchronous Google Analytics. Since you most likely have Asynchronous Google Analytics running on your website right now, leave it “as is”, and perfect your Web Analytics implementation in Universal Google Analytics, using GTM and DL. GTM: Google Tag Manager; DL: Data Layer (that comes with Google Tag Manager).

What is the role of Google Tag Manager in communicating what is happening on your website, and his is that information sent to Google Analytics? GTM ‘sits’ between yourwebsite.com code, and, Google servers:

yourwebsite.com  >  google.com/tagmanager  >  google.com/analytics

  • Without Google Tag Manager, you would implement Google Analytics code in the java script of your website.
  • With Google Tag Manager, you are implementing first the Google Tag Manager code, and then in the Google Tag Manager interface (google.com/tagmanager) you are configuring what calls (or hits, per Google’s nomenclature) are sent to Google Analytics.

Tip3, Cross device tracking: We are focusing on Universal Google Analytics, and, later on User ID, because that implementation, when done through Google Tag Manager, allows you to take full advantage of the Open Measurement Protocol (released by Google in Summer of 2013), AND, this implementation will make it much easier for you to e.g. store and analyze cross device activity in systems such as BigQuery.

Here is how you may may want to go through the below content: either go to each ‘step’, or skip ‘steps’ depending on how familiar you are with the concepts below. We are breaking the steps down for you so that you philosophically understand how the Google Analytics/Google Tag Manager implementation works:

Step 1 – Implement Google Tag Manager – BASIC CODE

Step 2 – Implement Google Tag Manager – DATA LAYER

Step 3 – Implement Google Tag Manager – USER ID

Step 4 – Implement Google Tag Manager – NO JAVA SCRIPT

Step 5 – Implement Google Tag Manager – DYNAMIC EVENTS

Full Google Tag Manager snippet (Step 1 – Step 5) before we get into each step

I want to give you “answer first”, or, the context. You see, the above steps are loosely aligned with the below FULL version of the Google Tag Manager code that you ultimately will want to have implemented on your website:

(note that elements such as UID or even the Data Layer itself as technically not part of the Google Tag Manager code – however here, for the sake of context, we are naming ALL of the below code “Google Tag Manager”)


<!-- 1 GTM - Data Layer -->
<script type="text/javascript">// <![CDATA[
dataLayer = [];
// ]]></script>

<!-- 2 – UID script -->
if (auth.user.isSignedIn()) { // Replace it with your real auth logic
var userData = {
'visitorID': auth.user.getId() // Set User Id with non-PII value};
dataLayer.push(userData);}

<!-- 3 GTM - no javascript container -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- 4 GTM - javascript-enabled container -->
<script type="text/javascript">// <![CDATA[
(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-XXXXXX');
// ]]></script>

<!-- 5 GTM – Event and Dynamic Data Layer Variables -->
// none right now

<!-- End Google Tag Manager -->

The above code includes:

1. The Data Layer object – CUSTOMIZE WITH INSTRUCTIONS. All the logical commands will be generated and then communicated out to Google Tag Manager (GTM), such as page views, events, custom dimensions, revenue, etc.
2. Sign in code for cross-device userid
3. The GTM, the no javascript piece
4. The GTM, the javascript piece
5. The GTM code for OnClicks

Now that we gave you the context, we will start with the BASIC implementation of Google Tag Manager for Google Analytics:

Step 1 – Implement Google Tag Manager – BASIC CODE

The most basic Google Tag Manager code that you need to implement (to track Google Analytics through), is included below:

<!-- 3 GTM - no javascript container -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- 4 GTM - javascript-enabled container -->
<script type="text/javascript">// <![CDATA[
(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-XXXXXX');
// ]]></script>

How do you generate this “basic” GTM code? First get a CONTAINER, then create a TAG:

a) Google Tag Manager CONTAINER

Log into google.com/tagmanager, specify you want to create a Website CONTAINER:

The above Container code is what you need to copy/paste and ask your front-end dev to put on every page on your website.

b) Universal Google Analytics TAG

Then, create the Universal Google Analytics TAG, by clicking on “Google Analytics” (marked as 2 above in red),  just above the Add Tags Later button. When you click on “Google Analytics”, you will see the below page:

What do you need to write in to complete in the above page?

  • Tag Name: you may want to call it just “Universal Google Analytics”
  • Tag Type: select Universal Google Analytics from the drop-down
  • Tracking ID: this is the UA-xxxx-xx Account number (get it from google.com/analytics)
  • Track Type: since we are focusing on a basic implementation, just leave it as “page view”

What’s next? Well, you are sort of “done”!

You have:

a) the basic Google Tag Manager CONTAINER – ask your dev team to put that code on every page on your website

b) the basic Google Analytics tracking TAG connected to that CONTAINER

This means that every time that the Google Tag Manager CONTAINER is shown in your website’s code on your website, the “basic” Google Analytics code will fire from within the TAG that you configured in step b) TAG above
Tip 4, basic Google Tag Manager for Universal Google Analytics vs. basic Universal Google Analytics (no GTM): When your front-end dev puts the a) GTM CONTAINER on your website, and you have set up the b) Universal Google Analytics TAG per above, you effectively have the MOST BASIC implementation version of Universal Google Analytics on your website. What do we mean by that?

When you implement Universal Google Analytics, you have to copy – at the very minimum – the below code on your website.

//UNIVERSAL – GOOGLE ANALYTICS

<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', 'yourwebsite.com');
ga('send', 'pageview');

</script>

The a) CONTAINER and b) TAG implementation that we walked you through above mimics the implementation of Universal Google Analytics that you are seeing above this sentence.

Why are we bringing this up? If you just need to track Visits, Unique Visitors, Bounce Rates, Time on site, top Entry Pages, etc etc etc (all the metrics that the above tracking code WILL track) – you do NOT need to  implement Universal Google Analytics using Google Tag Manager and Data Layer – using Google Tag Manager will be an ‘overkill’. Instead, you may want to implement Google Analytics with just the above code that you can obtain from google.com/analytics.

However, if you care about accurate revenue tracking, if you are going to customize your page merchandising taxonomy, have many events or dimensions, or if you want to track tags cross-device, we do recommend you implement Universal Google Analytics through Google Tag Manager and its Data Layer. Read on to see why.

What’s next?

Step 2 – Implement Google Tag Manager – DATA LAYER

Step 3 – Implement Google Tag Manager – USER ID

Step 4 – Implement Google Tag Manager – NO JAVA SCRIPT

Step 5 – Implement Google Tag Manager – DYNAMIC EVENTS

Posted under Google Analytics, Google Tag Manager by Greg Sobiech on 14th October, 2013

1 Comment
Send to a friend

1 comment + Add a comment

Mauricio Paim
December 16, 2013 at 12:06 pm

Hi Greg. What a nice post and easy way to teach people how to implement GTM.

I have been migrating to GTM lately and I am quite happy with how things works.

However, when it comes to more advanced implementations, such as using data layers for tracking transactions, I am still struggling to get it right.

When will you be posting Step 2 ‘ Data Layer’?

Thanks for your efforts :)

Have your say

Thanks for your contribution.

You can use Gravatar to upload an avatar that will appear next to your comment.

Please be polite and respectful to others.

<