Update Jan 2013: Google Tag Manager Tutorial with Event Tracking

GTM - Publish your container

Update Jan 2013: Google Tag Manager Tutorial with Event Tracking

*Recently Tom commented and asked a question which led me to look closer and notice there was an error here.

The error was in step #6,7, and 8 (Making your event rule.) I said make it fire when ‘event’ is not nothing or (.*).

Yet apparently, the GTM sends an event also. So it creates unnecessary event loads.

We want to change it so that the rule tells it to fire WHEN the event contains (your eventname). I called mine GAevent. So now it will only fire this rule when it sees there is an onclick event with the name of ‘GAevent’. Make sense?

 

How exactly do you add special event tracking into Google Tag Manager??? This has been very difficult to find on the internet. Look no further. I have screenshots for you!!!

  1. You should have already created a google analytics account for your website and have the UA-XXXXX-XX code in hand.
  2. You should have already created your Google Tag Manager (GTM) account and logged in.
  3. In Google Tag Manager, create the account for this particular domain. You need to get to a page where you see…
    Google Tag Manager Code

    Google Tag Manager Code

  4. Create a Tag in GTM for the Google Analytics UA Code.

    GTM Tag – Create an Analytics Tag

  5. Add a ruleso that this GA Tag fires on all of your page loads that have the container script.

    GTM Rule – Create rule to fire the Tag on ALL Pages

  6. Modify all of your pages and add the container script that you got from GTM. Make sure you put this BETWEEN your body tags <body>here</body>.

    <!– Google Tag Manager –><noscript><iframe src=”//www.googletagmanager.com/ns.html?id=GTM-XXX”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-XXXX’);</script>

    <!– End Google Tag Manager →>

 

Okay, until we were just adding analytics tracking with GTM. This next part is where you add event tracking for different types of special links. This is not necessary for every link. You only need to add this script on links where you want to track them as events. For example, maybe you want to track outbound clicks, maybe you want to track clicks on an ‘apply now’ button, or maybe you want to track clicks of video plays. This can all now show up as events in your analytics to be shared with the appropriate departments or interested parties.

  1. In your html change your links from

    <a href=”yourlinkhere”></a>

    to

    <a href=”http://yourlinkhere” onclick=”dataLayer.push({‘event’: ‘GAevent’, ‘eventCategory’: ‘outbound_clicks’,  ‘eventAction’: ‘click’, ‘eventLabel’: ‘safety_info_link’})”>Safety Information</a>

    A bit complex huh. Not really, you’ll get it. Notice the data types above. We have ‘GAevents’ in the category of ‘outbound_clicks‘ with the action of ‘click‘ which are labeled with ‘safety_info_link‘. You might choose to call these something else, such as a category of video-plays with a label like ‘how to make grits’.

    The way it works is that there is the Data Layer Variable after the push. Then a colon, which is followed by your value. You can change the value to whatever you want inside of your html links.

    In the next step, we will create a macro to grab the Data Layer Variable
    Value and send it to GTM.

  2. Now go to GTM. You need to add a Macro which will pass the value of your data variables from your webpage to  Google Tag Manager. From the sample above, the value for all events will be passed as ‘GAevents’.
    GTM Macro - Grab the value of your events variable.

    GTM Macro – Grab the value of your events variable.

    *Update: Recently Paul commented below that this didn’t work for him. I think the key is that the image above should have ‘GAevent’ listed in the Data Layer Variable Name field. Otherwise it is looking for ‘event’. Thanks Paul.

  3. Create a Macro which grabs the value for your eventCategory. From the example above, all clicks will be passed as ‘outbound_clicks’.
  4. GTM Macro: Grab the value of your event category

  5. Create a macro which grabs the value of your eventAction. This will be passed along as ‘clicks’ in our example link.

    GTM Macro – Create a macro to call the event action type

  6. Finally, create a macro which calls the value for ‘eventLabel’.

    GTM Macro – Create the eventLabel

  7. Fires when event contains 'GAevent'

    Fires when event contains ‘GAevent’

    Now you are going to need a rule for when to apply the use of these macros. So create a rule that basically looks to see when there is an event. Here is how I did it…

  8. Now that the groundwork is done, you are ready to create an analytics tag to track events for these event macros. I know it’s complicated right? Create a Tag. Choose Google Analytics. Choose Event as the type. Now set the parameters below by choosing the correct macro. For category, choose 2eventCategory. For action, choose 3eventAction. For Label, choose 4eventLabel.
    When EVENT matches 'GAevent'

    When EVENT matches ‘GAevent’

  9. IMPORTANT!Make sure you have a rule that fires this tag when the event has a value.
    Fires when event contains 'GAevent'

    Fires when event contains ‘GAevent’

  10. Publish your working version of the tag manager container.

    Sidenote: Google said they worked a whole lot on making this intuitive. They probably did, but even so, I keep getting confused. Several times already, I have gotten mixed up in what rules and macros are working in which version. I would have some suggestions for improvements to make it more understandable. Even so, it’s an awesome product.

    GTM – Publish your container

  11. Let me call your attention to the above image. Notice this ‘preview & debug’ link. You should use that. I am also using the Google Tag Assistant, as well as the GA Debuggerchrome add-ons. But even so, this little built-in GTM debugger has served an incredible role. I wanted to know that my EVENT TAGS had fired. I didn’t know how to see that information and VOILA. The GTM preview/debug frame told me. See the image below.This shows the normal analytics code fired on the page load. The EVENT TAG did not fire.
Events correctly fired on page Load.

Events correctly fired on page Load.

This shows the normal analytics code fired after clicking one of the special links that I’m tracking. The EVENT TAG fired this time.

Event fired when clicking the links

Event fired when clicking the links

 

28 Comments
  • Name *Giu
    Posted at 10:36h, 29 December Reply

    Great post man!
    I’m also confused about the official documentation on this subject

    Did you figure out how to implement CustomVar with this method ?

    • Neil Moree
      Posted at 13:00h, 29 December Reply

      I haven’t tried customVar yet. But there is the field for ‘value’ when creating the event tag. I just didn’t need it. I could imagine using it if I needed to pass a price along with an event. For example, if my category was t-shirts, my action was ‘purchase’, my label was ‘crewneck’, I could set my value to 14.95. That would be quite handy. It is also possible to complete the value field from user-submitted data! So imagine there is a text-box that asks a question. We could set it up to pass the answer of the question into the event data layer.

  • yuval
    Posted at 09:22h, 10 January Reply

    Hi,
    Thanks for the great post.

    I’m trying to monitor a click2call on a mobile website.

    I followed the steps in your post but the event keeps firing upon the page load.
    this is the click 2 call code on my page:

    and I have another code for the click2call from the footer (only the eventLabel is changed).

    I would appreciate any help.
    Thanks,
    Yuval

    • Neil Moree
      Posted at 12:59h, 10 January Reply

      I think I would have to take a look at your site or see more of your code to help you. Do you have the Google Tag Assistant installed and are you analyzing it on a browser with a user agent of mobile?

  • Neil Moree
    Posted at 18:55h, 16 January Reply

    [...] Create a Google Tag Manager account. See here for questions. 2. Create your Google Analytics account for your error pages only. 3. Create a container in GTM. [...]

  • tom
    Posted at 22:31h, 21 January Reply

    Do you need to add a rule to prevent the first GA tag (the one fires on all pages) to fire? – while the 2nd GA tag (Event as the type) is firing on the page(where you tracking the event)?

    • Neil Moree
      Posted at 15:59h, 25 January Reply

      I see what you mean. In my tag assistant, I see that it says ‘fired on Tag Manager Load, Page Load’. Does that mean that I am firing an event on the page load. Seems that way doesn’t it! What do you think? Why would it fire the event when the page loads? Thanks for pointing that out. Did you have another way to fire off the event?

    • Neil Moree
      Posted at 16:54h, 25 January Reply

      Hey Tom,
      Thanks to you, I saw the error of my ways. I’m planning to correct these instructions ASAP. thanks,

  • Jack
    Posted at 06:57h, 05 February Reply

    Thanks for the advice, I’m commenting so that I can stay in touch with future comments to this thread

  • JMor
    Posted at 21:21h, 14 February Reply

    Will this technique work when your GA script is in a custom HTML tag and not in the GA template?

    • Neil Moree
      Posted at 00:44h, 15 February Reply

      I’m not sure what you mean. So you want to put a custom ga html code in for general tagging. And then a special tag in for events using the automated method? HMMM, try it out!

      • JMor
        Posted at 00:47h, 15 February Reply

        I did it but it hasn’t seemed to work. The event is firing so the rule is working and the macros are set up as you described but it isn’t coming through to my GA account.

        Thanks anyway.

  • Chris
    Posted at 23:21h, 22 March Reply

    Comment You saved my life. Thanks!

    • Neil Moree
      Posted at 23:30h, 22 March Reply

      Great! Glad it worked out!!!

  • Paul
    Posted at 01:09h, 27 March Reply

    This was super helpful, thanks for posting this. I followed your instructions to the letter, but could only get it to work when I configured Step 8 slightly differently than you had it.

    Your example code shows {{1event}} contains GAevent, but I could not get this to work. Instead, I used {{event}} contains GAevent and it works as I had hoped.

    Could I have misconfigured something? Do you think this configuration cause me any problems down the road? This is my first time experimenting with GTM.

    Thanks again for the great post!
    -Paul

    • Neil Moree
      Posted at 12:21h, 27 March Reply

      Thanks for visiting. The best test here is to use the Google Tag Assistant. (https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk?hl=en). If you install it an see that your page is firing at the right intervals then GREAT!

      In regards to {{1event}}. I think the problem lies with step #2. I think it would’ve been better for me to fill that “Data Layer Variable Name” with ‘GAevent’. I’ll try to fix that. Then I think it would’ve worked. Instead you put ‘event’, which must be the default.

      Hey I’m glad it worked! It’s pretty useful once you get it going and know how to add onclick events in your links. Enjoy!
      Neil

  • Paul
    Posted at 21:34h, 27 March Reply

    Thanks for the response, Neil. You’re right, Data Layer Variable Name is a required field. I had noticed that and used ‘GAevent’, but still needed to use {{event}}.

    Cheers!
    -Paul

  • Ben Atherton
    Posted at 16:21h, 03 April Reply

    Many thans for this tutorial, I am having a couple of problems getting this to work correctly despite following it to the letter.

    One thing that I believe may be an issue is that this tutorial does not show the macro default value field or what to set this as, can anyone clarify how this field should be set please?

    Thanks
    Ben

  • Steve B. Baker
    Posted at 00:34h, 28 June Reply

    does anyone know of a formula or other method of tracking how many times those hyperlinks have been clicked on?

    • Neil Moree
      Posted at 01:04h, 28 June Reply

      Hi Steve,
      the whole point of this is to send tracking and events via tag manager. If you want to know how many times someone clicks something, it will come through in the section for content – events. (IF you have it set up correctly!)
      This article was written 7 months ago now. I’ve been using Tag Manager heavily along with data layers, events and custom variables. Trust me, once you spend time in it and learn it, it’s so easy. And it gives you the experience you need to come up with creative and advanced solutions with macros inside of Tag Manager. Good luck!

  • Name *Chris
    Posted at 14:25h, 04 July Reply

    Hi,

    This is a fantastic article. I set up the GA Event Tag, Macros & Rule no problem. But is there a way to add the data layer to a GTM custom html tag instead of the code on the web page and if so how?

    I saw another post on this topic but I’m still unclear about what to put in the GTM custom html tag: http://moz.com/ugc/tracking-google-analytics-events-with-google-tag-manager

    For example, I’d like to track a button click with the event params:

    Category: Coupon
    Action: Submit
    Label: Button Click

    Thanks!

  • Silver Price
    Posted at 22:32h, 28 July Reply

    It’s called ‘View-Through Conversions’. Basically, Google will track not only when someone clicks your advert, but also when someone sees your advert. If that person visits your website in the next 30 days and performs an action you’re tracking, it counts as a view-through conversion. As far as I can tell, they don’t actually have to click on your ad at all.

  • Willy Bilaro
    Posted at 06:55h, 09 December Reply

    Finally, it worked for us. On step 2; using GAevent as variable name won’t trigger, so we changed it to just ‘event’ and wallah! it works perfectly.

    Thanks for this awesome post!

  • Jake Rutter
    Posted at 16:32h, 21 May Reply

    Great post – this saved my life today. We pushed our code into GTM and then all the event tracking broke!

  • Chris
    Posted at 21:18h, 04 July Reply

    Hi,

    Thanks for the quick reply! This article is great and I get the setup of the GTM Event Macros, Tag & Rule.

    But is there a way using a custom HTML GTM Tag to add the data layer in there instead of going into the code of the site. For instance you adjusted the code for a button click on the site to:

    Safety Information

    Could this somehow be done in a custom GTM HTML tag so we don’t have to touch the code on the site? Thanks!

  • Neil Moree
    Posted at 14:00h, 05 July Reply

    hmmm, that would be pretty cool. I think it won’t work because Google doesn’t want you writing in page changes via tag manager. However I will look and see if it’s possible. I have wanted the same thing so that we don’t have to change the processes of content producers. At the moment, event clicks are something I need to be involved with. If your suggestion were possible, I could automate it easily.

  • Chris
    Posted at 14:09h, 05 July Reply

    It would be cool. I have been in contact with Google over the last week seeing if its a possibility. Based on their replies, I think there’s a chance it could work. Then it would really deliver on the promise of tracking everything remotely without having to change the code on the site at all.

    However, I’m not really a coder so its a little over my head. I’d be happy to share their response with you and get your thoughts.

    I can send it over via email if you like. Do you have my email through me sending this post over? If not I can send you my email.

    Also, I’ve been scouring the internet looking for info on having the data layer via a custom html tag and not on the site. I found this post which might bring us a little farther down the path of figuring it out:

    http://marketlytics.com/blog/building-datalayer-within-google-tag-manager-interface-using-jquery-javascript/

    I’d love to use GTM to do the whole event tracking/data layer without changing site code. What a timesaver it would be when working with clients. Let me know what you think!

  • Neil Moree
    Posted at 18:57h, 09 December Reply

    Hey Chris, I have you checked out Google’s Auto-event variables? This is really awesome and allows you to listen for link clicks and target them, listen for form submissions also.

Post A Comment

Protected by WP Anti Spam