Google Tag Manager part 2: event tracking

October 31st, 2012 This is part 2 of the Google Tag Manager (GTM) series. In part 1 we have gone through the basic concepts of GTM, in this post we will start implementing one of the most frequently used feature – Google Analytics event tracking in GTM. When to use event tracking Before I rushed into the settings and codes, let’s slow down and think about this: when should I actually use event tracking? When you want to record something other than page visits like user interactions, you use event tracking. For example, you want to track whether a particular button is clicked, or you want to know how many people has actually played the video on your site, you use event tracking. How to implement Google Analytics event tracking To implement event tracking, you need to have the Google Analytics code on your page first. Then you call the following JavaScript function when the event appears: 1 _trackEvent(category, action, label, value, noninteraction) The parameters are: Category: category of your event Action: action of the event, for example, play, click, etc Label (optional): label to identify your event. For example, it can be your banner ads tagline Value (optional): an integer value in case you want to provide a numeric value for the event Non-interaction (optional): a Boolean flag to determine whether this event is included for calculating the bounce rate. Sounds weird? See the explanation here. Let’s say you want to see if the winter promotion link is clicked, you will have something like this: 1 Winter promotion page You can find the official documentation from Google here. How to implement event tracking on Google Tag Manager Actually even if you’re using GTM, you can still use the _gaq.push mentioned above as the _gaq object is still there when the Google Analytics tracking code is loaded by the container script. However, since we’re migrating to GTM, let’s try to do things in a “GTM way”. Remember from part 1 of this blog series we have 3 key elements in GTM: tags, macros and rules. Let’s tackle them one by one: Macros

This time I will start with macros first. As mentioned when we do event tracking, we need to pass several variables (e.g. category, action, etc) to the _trackEvent JavaScript function. in GTM we will first define them accordingly as macros: Choose the Macro Type as “Data Layer Variable” and save the macro. You should see there’re 5 more macros when you’re done:

Tags The next step is to create the actual tag that the page will load, in our case, the Google Analytics event tag. When you create a new Google Analytics tag, it allows you to specify whether it’s an event tag or not:

Once you’ve selected Event Tracking, you will see the Event Tracking Parameters section. Remember you’ve defined them all as macros already? Simply select them from the pulldown and it should look like this when you’re done: Rules

The last configuration we need is the rule to trigger the tag we created. Let’s assume whenever there’s an event “GAEvent” appears in a page, we will load the tag. Click the “Add Rule to Fire tag” button below (you should still stay in the create new tag page) and create a new rule as follows:

Save the rule and the tag and we’re done with all the required setup in GTM already! But wait…how can all these linked up together and what JavaScript function should I be using when events appear? All the magic happens with the GTM DataLayer. According to developers guide from Google: the data layer is an object that contains all of the information that you want to pass to Google Tag Manager So let’s say in your ecommerce site you want to tell GTM the total revenue generated on the confirmation page, you will need to define a data layer object and associate the key and corresponding values in pairs as follows: 1 2 3 dataLayer = [{ 'ecomValue': '2000' }]; Just simple as that. By default the data layer object is using the variable name ‘dataLayer’, but you can change it if you want. You can find more information from here. So in order to trigger the event tag and pass the required parameters to Google Analytics, we just need to call the push function of the dataLayer object as follows: 1 2 3 4 5 6 dataLayer.push({ 'eventCategory': 'the event category you want', 'eventAction': 'the event action you want', 'eventLabel': 'the event label you want', 'event': 'GAEvent' }); Suddenly everything comes together right? To break it down: You put ‘GAEvent‘ as the ‘event’ value, so that the rule you’ve defined will be matched and thus firing the tag you’ve specified You put the values that you want to pass into the event tracking tag by matching the macros you’ve defined (so it’s IMPORTANT to declare those macros as data layer variables . GTM will carry forward these values and put them to the actual event tracking tag Now go to your Google Analytics and the event data should be ready for your visit. The data layer approach introduced in GTM can be very useful and powerful, will try to find more examples on how to make use of this killer feature to make our lives easier. Related posts: Source Web page ..http://www.whymeasurethat.com/2012/10/31/google-tag-manager-part-2-event-tracking/