How to Implement Google Analytics Events in Google Tag Manager

Google Tag Manager is designed to minimize your dependency on web developers when you want to add marketing and analytics codes (or “tags”) to your website. This video discusses the basics of both Google Tag Manager and Google Analytics event tracking, and how you can integrate the two.

Video Section & Time Markers

  • (00:22) Event Basics
  • (01:43) Manually Coding Events in Google Analytics
  • (02:53) Google Tag Manager Container with Google Analytics Tag
  • (06:17) Auto Event Tracking
  • (09:13) Using the Data Layer for Dynamic Parameters and Non-Click Actions
  • (12:30) Virtual Pageviews in Google Tag Manager
  • (13:28) Social Tracking in Google Tag Manager

Video Transcription

[music]

Eric Fetman: Hi! I’m Eric Fetman, Analytics Trainer and Coach at E Norm, with a guest video for KISSmetrics.

Google Tag Manager is designed to minimize our dependency on web developers for adding marketing and analytics code to our websites. This tutorial video is going to focus specifically on implementing Google Analytics Events in Google Tag Manager since this can be a little tricky the first time around.

Let’s start off with some event basics. Why do we need event tracking in Google Analytics? When you install Google Analytics, either with the regular tracking code or as tag within Google Tag Manager, by default data is captured only when a page loads and the URL changes or the URL is refreshed as in this case.

We’ve navigated to another page, the page has loaded, the page has changed, and data has been sent back to the Google Analytics servers. However there are many types of user interaction that don’t force a new URL to appear, that don’t force the page to reload and therefore by default don’t send data back to Google Analytics.

What types of user actions don’t generate trackable page views? Links to other websites, links to PDF documents, mail to links, or tell links on smartphones, flash or e jacks types of interactions, video and even completion of individual form fields. None of these interactions cause a page load on your site and therefore none to them can generate Google Analytics for you.

So these are all good candidates for events or possibly virtual page views, which we will also talk about. Let’s start off by looking at manually coded events so we can get a sense of what we no longer have to do when we track events through Google Tag Manager.

Let’s look at the mail to link as an example. When we click this link, it’s going to open the mail client but it is not going to force additional page views so no Google Analytics data will be recorded. So here my email client has opened up but this action has not been tracked in Google Analytics.

Here’s how a mail to link looks before any event tracking is added. And here’s the link with event tracking added. The code for event tracking itself is very simple but here’s the potential problem.

What if you don’t directly control changes to page content? What if every change that you want to make is subject to an approval or a release cycle that could take weeks or even months. And what if, at some point, you want to change the action parameter of the event from email to mail to and you have to go through the same hassle again.
This is where Google Tag Manager comes in. Our first step in Google Tag Manager will be to create a container.

Once you’ve created your account at googletagmanager.com, you need to create a container. A container is a code that will allow you to place tags on to your website, remove tags and modify tags.

We’re going to go ahead and click new container. We’re going to call out container “mysite.com” for use on web pages and we’re going to click save. On the next screen, you see the actual container code that you need to place after the opening body tag on all pages of your site.

Make sure that you work with your development and IT team when placing the Google Tag Manager code and make sure you confer with your marketing and the rest of your analytics team before you remove any analytics or marketing tags. And make sure to deploy the Google Tag Manager container code in a test environment before including it in a production environment.

Once you have the container included on all pages of your website, you can start to deploy tags through the Google Tag Manager interface. Google Tag Manager provides a variety of templates for adding tags to the container. There are templates for Google services such as Analytics and AdWords.

There are templates for non Google services such as AdRoll Remarketing or Click Tale heatmapping. If there is a tag that you want to add that there is not an existing template for within the Google Tag Manager, there is a free form html field that will allow you to add those types of tags as well.

Let’s start by adding a regular Google Analytics tag to our container. We’re going to go ahead and click “Create a new tag”. Tag name…let’s call this, “Google Analytics page tracker”.

Select tag type, we’re going to choose Google Analytics Universal. Tracking ID… we’re going to go to the tracking code page for our Google Analytics property and we are going to copy the tracking ID from that page. And that is what we’re going to paste into our tag to tell Google Tag Manager that this is the property and website that we’re tracking in Google Analytics.

Add rule to fire tag, we’re going to select all pages, we will go ahead and click save and we’re done. In order to see any of our tags in action, we’re going to preview or publish the container. We’re already operating in a test environment so we’re going to go ahead and publish. Click create version, click publish.

Let’s go back to our mail to page. Two things have changed on this page. One, we have removed that Google Analytics tracking code and two, we have added the Google Analytics container.

And since this container now contains the Google Analytics tag, when we view this page it should show up as a page view within Google Analytics. We’re going to go ahead and refresh this page, check our Google Analytics and there is the page view. And we should see the active page. There we go.

Now we’re tracking the page view of the mail to page but we still do not have an event track for a mail to link. Now we look at auto or automatic event tracking within Google Tag Manager that will allow us to track our event without actually changing the code on the page.

To configure auto event tracking, we’re actually going to create two separate tags. The first tag will just generally listen for link clicks on the page. The second tag will be our actual Google Analytics event tag, which will use the link click as a trigger.

We’re back in our mysite.com container. We’re going to go ahead and click “Create a new tag.” For tag name, let’s just say, “Link click listener”. For select tag type, we’re going to go down to event listener and we’re going to select link click listener.

Keep in mind that event listener in this case does not refer specifically to Google Analytics events. This is just a general click event that can actually be used for anything. Select all pages for our rule fire tag and we’re going to click save.

Now we have our link click listener tag and we’re going to use this tag as trigger for our actual Google Analytics event tag. We’re going to go ahead and click “Create a new tag” again. And we’re going to call this tag, “Google Analytics Event Mail to Click”.

Select tag type, you’re going to select Google Analytics Universal again. You could use the regular Google Analytics tags for these examples as well but we are using universal. And we are going to paste in the same tracking ID that we used for a regular page view tag within Google Tag Manager.

But this time, instead of page view track type, we’re going to use the event track type. For category, let’s say, “Link”. For action, let’s say, “Mail to”. And for label, we’re going to use a built in macro that’s going to dynamically populate the element URL, which in this case will be the destination of our mail to link.

Now, the new rule that we are going to create to fire our Google Analytics event will be a little bit trickier. Let’s call the rule, “Mail to Click”. The rule has two conditions. The first condition is event equals GTM, then click. The link click listener that we defined in a separate tag is actually serving as a trigger for this tag.

But we also need to add another condition. Element URL contains mail to. Go ahead and save. And now we have the two tags that we need to track mail to link clicks as Google Analytics events. So let’s make sure that our event tracking is working correctly. We’ll go ahead and click mail to link. The mail client opens up. Go over to Google Analytics and in our real time events report, we see that our event is tracking correctly. And we see that our event action is mail to. And our event label is the dynamically populated element URL.

What if you want to track a user action other than a click as a Google Analytics event? This is going to require a little bit of manual coding on your web page to tie in to Google Tag Manager. Let’s say on your website, visitors can hover over pictures to display a larger pop up. You may want to track these hover actions as events in Google Analytics.

However, in Google Tag Manger, there is no option for creating a hover event listener the same way we created a link click listener in the previous exercise. So we are going to need to manually code but we need to remember that we no longer have the Google Analytics tracking code on the page directly. We have the Google Tag Manager container.

We can’t use the regular coding either for Google Analytics classic or Google Analytics Universal that we would normally use for event tracking. Instead, we’re going to use the data layer object to communicate with Google Tag manager. All we need to push into the data layer is an event.

Now, again, this event is not the Google Analytics event. This is going to serve as the trigger for the Google Analytics event tag in Google Tag Manager the same way that GTM link click served as the trigger.

But we are also going to push another piece of data into the data layer. We can distinguish between hovers over the different images by dynamically passing the image source to the data layer for use as the label parameter for the Google Analytics event tag.

Back in Google Tag Manager, we’re creating a Google Analytics event tag for our photo hover action. We have set the tag type as universal, we have our tracking ID. Track type, we have set as event. Category and action, we have static values of photo and hover.

Label, we are going to pull the event label value into the data layer by creating a new macro. We’re going to click the little macro icon, new macro, macro name, let’s call it, “Event Label.” Macro type; data layer variable.
Name; Event label. This is the variable name that we use in our codes so this is what we’re going to need to specify here. Data layer version, you want to change this to version one. Version two has to do with dot notation, which we are not using. Go ahead and click Save.

For our rule to fire the tag, create new rule. Rule name; Photo hover. Event equals photo hover. Again, this event is the macro that we’re using to read the event value in the data layer. Click Save. There we have our Google Analytics event tag for photo hover action.

Now, let’s test our events. Mouse over living room, mouse over dining room, mouse over bedroom. Now, let’s check our events on the Google Analytics real time report. There are our three events coming in. That category is photo, let’s scroll down then action is hover and there are our three image sources written to the data layer by code in our web page and read from the data layer by the macro in the Google Analytics event tag within Google Tag Manager.

Earlier on we looked at several types of user interaction that don’t cause the page reload and that we might want to track either events or virtual page views. So now we’re looking at virtual page views through Google Tag Manager. Let’s say we want to track all PDF clicks as virtual page views. When we’re setting up our virtual page view tag, we are going to take advantage of the href value or the element URL as both the rule and as the value we’re passing in for our virtual page view.

Tag for our virtual page view, track type is page view but we’re going to override page URL by specifying a value for a document path in this case element URL. Rule; Event equals GTM link click. And element URL end with “.pdf”
Let’s test this out. Click the E book link. PDF opens real time content report. There is our virtual page view, active page: E book PDF.

Social tracking is a special form of event tracking in both Google Analytics and Google Tag Manager. Let’s look at a “Follow us on Twitter” link. The html from the link would look something like this. So here we’re setting up our tag track type is social.

Social Network, we’re specifying as twitter social action follow. Now we could use a more generic social tag and manually code the parameters through the data layer. But if we start to use the data layer too much, it somewhat defeats the purpose of having the Google Tag Manager in place.

Finally the rule, event GTM link click element URL equals twitter URL. This action will appear in the social plug ins report.

Eric: Thanks for watching this tutorial. Hope you found it useful. If you have any questions or comments, please tweet them to @enorinc or post them below.

[music]

About the Author: Eric Fettman is Analytics Trainer & Coach at E-Nor. He is also the developer of googleanalyticstest.com, a free resource for Google Analytics training and GA Individual Qualification preparation, and he regularly provides GA pointers at gatipoftheday.com.

  1. Great post, very helpful information. I was left wondering why the macro {{element url}} wasn’t available in my options. I discovered this article after some research; https://support.google.com/tagmanager/answer/2644341?hl=en

    but was unsure of the proper way to set up the macro so it populates in my dropdown within GTM. Any advice?

    • Solved my own problem… further digging uncovered this article on the same topic that describes how you have to create the new macros yourself. Instructions are about 2/3 down the page. http://www.whymeasurethat.com/2014/01/22/google-tag-manager-auto-event-tracking/

      • Hi Eric and Ron

        I am actually the blogger who write the article in Why Measure That, I think the problem is if you’ve registered your GTM account long time ago (like me, I registered it since last year when it first releases), those {{element}} related macros may not be there.

        I verified that since lately I created another account for my client, and at that time I can see those macros available.

        Hope it helps!

        Eric, enjoyed reading the KISSmetrics blog a lot, keep blogging!

        Raymond

  2. Ron, glad the post was helpful.

    You should not have to set up the {{element url}} macro yourself; it’s predefined.

    Where is it not displaying for you? In the conditions drop-down when you’re setting up a rule?

    Eric

    • That’s correct Eric. I created the link click listener tag, and then the GA event tag – but when trying to setup the rule to fire it – none of the new element macros are there. I had to define them all as per the other link I provided.

  3. I was searching for the same for a client’s website. Google Analytics is becoming more confusing, I love the Real Time Visitors feature though.

    • Yes, the Real Time reports can be very useful for verifying correct implementation of events, virtual pageviews, and even the regular tracking code on specific pages.

  4. really great post..
    Google Analytics solves some major problems of mine..
    and really thnkful to U as well Mr. Eric Fettman for writing this bolg .

  5. Google Analytic is one of the major tool for SEO and it helped me a lot to track my blog traffic. I really appreciate the tips you have shared in this blog. I will try these tips, hope it will work well for me.

  6. google helps alot to finds the static of my website
    http://www.goforexmarket.com

  7. The information you choose to track depends on what curiosities you want to quell. Being in touch with keyword searches can help a site with text-heavy content to boost search rankings, while knowing which products convert best can inspire ecommerce sites to increase visibility of these items.

  8. Doesn`t work for me ( if i put in element url contains mailto (i also have it on my website) universal analytics doesn`t show any events happening. if i only keep gtm.linkClick without mailto, then it shows the event BUT label is “null”

    So far your article is the best step-by-step solution for GTM.
    Thank You very much, You`ve cleared lots of things for me, I was doubt about

  9. this.src also returns (not set)

  10. This is something new to me. Definitely will try.

    Thanks,
    Pravin

  11. Hi,

    We have this Javascript in our galleries that count per click:

    // <![CDATA[
    var flag = true;
    $(document).ready(function(){
    if(true && $(document).width() 980 && true){
    $('#image-slide-97-25849').click();
    }else{
    var contentId = $('a.contentHref',$(this)).attr('href');
    $('#image-slide-97-25849').smartContentSlider('select', contentId);
    viewCountAnalytics('#image-slide-97-25849');
    }
    });
    $('.image-holder', '#gallery-thumb-contents-popup-97-25849').live('click', function(){
    var contentId = $('a.contentHref',$(this)).attr('href');
    $('#image-slide-popup-97-25849').smartContentSlider('select', contentId);
    var newCaption = $('.image-caption', contentId).html();
    $('#image-slide-popup-97-25849').parent().siblings('.captions').html(newCaption);
    viewCountAnalytics('#image-slide-popup-97-25849');
    });
    $('.nav-prev').unbind('click'); $('.nav-prev').live('click', function(){ if($(this).hasClass('nav-main')){
    if($(window).width() > 980 && true && !$(this).siblings('div.image-view-port').hasClass('image-view-popup')){
    $('#image-slide-97-25849').click();
    }else{
    $(this).siblings('div.image-view-port').smartContentSlider('previous');
    if($(this).siblings('div.image-view-port').hasClass('image-view-popup')){
    showCaption($(this).siblings('div.image-view-port'));
    }
    viewCountAnalytics($(this).siblings('div.image-view-port'));
    }
    }else{
    var leftPosition = $('.image-reel', $(this).parent('.thumb-image-container')).css('margin-left');
    leftPosition = Number(leftPosition.substr(0, leftPosition.length-2));
    if($(window).width() > 980 && true && !$(this).siblings('div.image-view-port').hasClass('thumb-image-view-popup')){
    $('#image-slide-97-25849').click();
    }else{
    if(leftPosition 980 && true && !$(this).siblings('div.image-view-port').hasClass('image-view-popup')){
    $('#image-slide-97-25849').click();
    }else{
    $(this).siblings('div.image-view-port').smartContentSlider('next');
    if($(this).siblings('div.image-view-port').hasClass('image-view-popup')){
    showCaption($(this).siblings('div.image-view-port'));
    }
    viewCountAnalytics($(this).siblings('div.image-view-port'));
    }
    }else{
    var reelWidth = Number($('.image-holder', '#thumb-image-slide-97-25849').size()-1)*$('.image-holder', '#thumb-image-slide-97-25849').width();
    var maxMargin = reelWidth - $(this).siblings('div.image-view-port').width()
    var reelPosition = $('.image-reel', $(this).siblings('div.image-view-port')).css('margin-left');
    reelPosition = Math.abs(reelPosition.substr(0, reelPosition.length-2));
    if( reelPosition 980 && true && !$(this).siblings('div.image-view-port').hasClass('thumb-image-view-popup')){
    $('#image-slide-97-25849').click();
    }else{
    $(this).siblings('#thumb-image-slide-97-25849').smartContentSlider('next');
    $(this).siblings('#thumb-image-slide-popup-97-25849').smartContentSlider('next');
    }
    }
    } });
    $('#gallery-97-25849').unbind('click');
    $('#image-slide-97-25849').bind('click', function(){
    if($(window).width() > 980){
    if (flag){
    flag = false;
    renderPopup();
    }
    $('image-slide-97-25849').smartContentSlider('autoSlide', false);
    $('#gallery-97-25849').siblings('.popup-block').show();
    $('#image-slide-popup-97-25849').smartContentSlider('autoSlide', false);
    showCaption('#image-slide-popup-97-25849');
    viewCountAnalytics('#image-slide-popup-97-25849');
    }
    });
    $('.gallery-overlay').live('click',function(){
    $('.main-image-slide').smartContentSlider('autoSlide', false);
    $('#image-slide-popup-97-25849').smartContentSlider('autoSlide', false);
    $('.popup-block').hide();
    }); }
    );
    function renderPopup(){
    $.ajax({
    url: location.href,
    type: 'GET',
    data: 'popup=1',
    async: false,
    success: function(data){ $('#gallery-97-25849').after(''+$('.popup-block', data).html()+'');
    $(".popup-block .thumb-image-container .gallery-thumb-contents .image-holder").attr("style","width:auto !important;display:block;");
    var navigation = $('.wf-breadcrumbCustomed').first().clone();
    $('.gallery-title').before(navigation);
    $('.image-view-port', '.popup-block').each(function(){
    if($('.image-holder', $(this)).attr('id') != undefined){
    $(this).smartContentSlider({
    scrollable: 'true'
    })
    }
    if($(this).hasClass('main-image-slide')){
    $(this).smartContentSlider('autoSlide', false);
    }
    });
    },
    error: function(){
    alert("Failed to load images")
    }
    }) }
    function loadGallery(){
    $.ajax({
    url: location.href,
    type: 'GET',
    data: 'loadGallery=1',
    async: false,
    success: function(data){ $('#image-slide-97-25849').html($('#image-slide-97-25849', data).html()); },
    error: function(){
    alert("Failed to load images")
    }
    }) }
    function showCaption(slider){
    var index = $(slider).smartContentSlider('selectedIndex');
    var newCaption = $('.image-reel .image-holder:nth-child('+(index+1)+') .image-caption', slider).html();
    $("#captiondisplay-97").html(newCaption); }
    function viewCountAnalytics(slider){
    var index = $(slider).smartContentSlider('selectedIndex');
    var title = $('.image-reel .image-holder:nth-child('+(index+1)+') .imageTitle', slider).html();
    _gaq.push(['_trackEvent', 'Pictures', 'View', title]);
    }
    // ]]>

    However when we upgrade to Universal Analytic the code is not working. Can you check what I need to change? Is it the last line:

    _gaq.push(['_trackEvent', 'Pictures', 'View', title]);

    Appreciate your help.

    Thanks,
    Rene

  12. Hey Eric,

    Brilliant video, the most succinct video of GTM I could find yet!

    I do have one question. I was hoping you would get to abandoned/incomplete forms, as you outlined this is one key advantage of event tracking at the start of the video.

    I have found the below article for form abandonment for regular event tracking, I was hoping you could help me implement it with GTM. Your video made everything crystal clear, so hoping you can help me again!

    Thanks Eric,

    Best regards,

    Jake

    http://www.lunametrics.com/blog/2012/11/13/track-form-abandonment-google-analytics/#sr=g&m=o&cp=or&ct=-tmc&st=iuuq%3B%2G%2Gxxx&ts=1392724468

  13. Nice way to implement Google analytics :)

  14. Best video on GTM and GA integration I’ve ever seen, thank you! I’m an app marketer with no IT team and we often outsource our development work. I needed to understand how GTM and GA work together in order to coordinate with our developers, I spent 6 hours today pouring through GTM Google support documentation and couldn’t find anything. Thank you SO MUCH for this video!

  15. Great article and tutorial. Very useful.

  16. Fantastic video. Can’t wait for more.

  17. Hello,

    I am running with a telecom site & it has app registered on App store & iphone store.
    I have download link to download app from my website, can you please help how I can track the same using GTM

    Thnx in advance
    Manoj

  18. When you are using

    Are you adding to the data layer or referencing something in the data layer? You mentioned constant use of the data layer defeats the purpose of GTM so i’m assuming youhad to have a developer add something to the datalayer?

    Also within GA the event action comes in as the URL. How would i make it come in as bedroom instead?

    Thanks!

    • Part of my comment was deleted, I am referring to the img src images jpg and the datalayer.push custom code

  19. Thank Eric,

    I’m just getting started with event tracking. Looking to track failed form events. Where someone starts a form but does not complete it. This helps.

    Greg
    All Call Technologies

  20. This is awesome however can you give an example for video clicks wtihin the specific page? I wanted to track video clicks on my page since the videos were embedded I am having hard time to figure out how to track those video clicks. thanks

  21. Hirthanu Mylsamy Jun 30, 2014 at 11:04 pm

    I have created tags for analytics code, remarketing code, evemnt code in Google Tag Manager. My doubt is, while implementing tag manger snippet on the all webpages, Whether I need to remove other snippets like analytics code, remarketing code, which are already existing. Some one answer me

    • Hirthanu, what specifically seems to be the problem?

      • I have added Google Tag manager snippet on all web pages. My doubt is, Whether I have to remove existing analytics tracking code, re-marketing code from web pages?

  22. @Neil I have the same question as Hirthanu!! After publishing GTM, whether GA code should be removed or not? Kindly reply as I am unable to find its perfect answer from anywhere. Hope here I will get.

    Thanks!

  23. Hi, very good explanation. Thank You!

42 comments

Please use your real name and a corresponding social media profile when commenting. Otherwise, your comment may be deleted.

← Previous ArticleNext Article →