Creating Dynamic Event Tracking Tags in GTM (Updated 2018)

In class last week, we learned the basics of setting up a simple Pageview tag in Google Tag Manager. We also got to experiment with setting up an Event tag that would allow us to track when users click on the “Join” link in the upper navigation of this site.

Now we can get to move onto the next-level stuff! While this example isn’t intended to be difficult to implement or disproportionately challenging, I want everyone to have the chance to play with something that demonstrates both the complexity and the power of an implementation method like Google Tag Manager.

Without further ado, let’s get into it.

Prerequisites

Got all that? Great, let’s begin.

How to Set Up a Dynamic Event Tracking Tag in GTM

Step 1: Begin Creating a Tag

Once you’ve logged into your GTM account at tagmanager.google.com and clicked into your GTM container (the one that we set up in class), do the following:

A) Use the menu on the left-hand side to go to the Tags page.

B) From there, select the red “New” button.

Step 2: Name the Tag & Choose A Type

  • Tag Name (A): The first thing you’ll want to do is name your tag. Name it something descriptive so that you (and others) can understand what the tag does without having to take a shot in the dark. Optionally, use the folder icon to the right of the tag name to group the tag with similar tags.
  • Tag Type (B): Then, select Universal Analytics as the Tag Type.
  • Track Type (C): Open the Track Type drop down and choose the Event option.

Step 3: Populate Tracking Parameters

You’ll notice that when you selected the Event Track Type, the screen changed a bit to show you the option to fill out Event Tracking Parameters.

The values for “Category”, “Action”, and “Label” can be anything you’d like but they should generally be used to provide progressively more granular information about the Event you’re tracking. One good model to start with would be the following:

  • Category (A): Where on the site the event happened (e.g., navigation, homepage, blog posts, contact forms, footer, sidebar, etc.)
  • Action (B): A descriptive label that’s one level deeper than the category (e.g., primary navigation, marque, drop-down menu, recent posts widget, sign up form 3). Many analytics folks will append “click” to stay true to the name Action, e.g., “recent posts widget click”.
  • Label (C): This field is optional and can be used to provide an even deeper level of granularity. You can use it to capture the link text that was clicked on, the path of the page that the event occurred on, or which version of an element was interacted with.

Fill out the Category (A) and Action (B) as you see fit (or just copy my example below). For the Label (C), we’re going to want to capture the unique text of the navigation link that someone clicked on. That means it will need to be either “Home”, “Blog”, or “Join”. We’re going to get fancy with this later on in this post so that we can use this single tag and track all three of those. For now, just put ??? in that field.

The next two fields (D) do not require modification, but may be helpful to understand.

  • Value (D): You can use this field to assign a monetary value to this event. For example, you may know that every sales lead from the web is worth $50 to your organization. If so, putting 50 here will allow you to approximate the value of website interactions within Google Analytics.
  • Non-Interaction Hit (D): By default, Google Analytics will consider any event to be an interaction with your website. That means an event will be used to say “this visit wasn’t a bounce” and/or to calculate a more accurate time on site (because time on site isn’t calculated for single-interaction visits). In most cases, you can leave this set to “false”. If you want this event to not count as an interaction with your website, select True.

Last but not least, we’ll set:

  • Google Analytics Settings (E): This is where you tell Google Tag Manager (your implementation method) where to send your data (Google Analytics, which is your analytics platform). We set this up in class last week, but if you need a refresher on how to do this, see the Additional Reference at the end of this post.

Step 4: Static Vs Dynamic Values

As mentioned in Step 3, we want to set up this tag to track all three links. We don’t want to have to create and maintain three different ones on a regular basis. Setting this up dynamically (i.e., so that it changes depending on what’s on the website) will also allow for new or modified navigation links to by tracked automatically without additional setup.

So what is the first obstacle we need to overcome? Well, within this event tag, we know that the Category should be “navigation” on each link click event, the Action should be “primary nav click” on each, but the label should be something different depending on which link a user clicked. This is where dynamic event values using variables comes in.

To rearticulate the goal, we want the following values:

  • Category: navigation
  • Action: primary nav click
  • Label: whatever the link text was that the user clicked, i.e., which one of the three navigation links was clicked?

To use a dynamic value for Label, we can harness the power of GTM variables. We can only scratch the surface of the wide world of GTM variables today, but this is a good start.

  • Variable Configuration (A): While still on your Tag Configuration screen, click the “lego” icon next to Label in the screenshot from above.
  • Activate Built-Ins (B): On the “Choose a Variable” screen, find the “BUILT-INS” link next to the blue + icon and click it. On the “Configure Built-In Variables” screen, enable everything under the “Clicks” heading. What this allows you to do is access information about the click that will trigger your Event tag. For example, if someone clicked the “Home” link in the navigation, the “Click Text” built-in variable would equal “Home” and the “Click Target” would equal “/”. 

  • Choose a Variable (C): As soon as you check those boxes, the Click built-in variables become available for you to use. Go back to the “Choose a variable” screen and select the one that says “Click Text”. Once you make that selection, you should be taken back to the original Tag Configuration screen. Your “Label” should now show “Click Text” inside of two curly braces (see below). If you have anything else in that field, delete the extraneous parts so you’re left with just: {{Click Text}}

What does it mean?! When this Event tracking tag fires on the website, the value of “Label” is going to be the link text of whatever link was just click. If the “Home” link was clicked, the Event label that Google Tag Manager will send to Google Analytics will be “Home”. If it was “Join”, it would automatically send “Join”. And so on.

 

Step 5: Define a Trigger for The Tag

Now we need to tell Google Tag Manager when to fire this tag and send the collected data to Google Analytics. The one built-in Trigger that comes pre-configured in GTM is “all pages” and that simply won’t do — this needs to fire when someone clicks on a specific thing, not every time someone views a page. Here’s how we tell GTM to listen for a click on a specific element or set of elements.

  • Open Triggering (A): While still looking at the settings for your Event tag, click into the “Triggering” section. Once you do that the “Choose a Trigger” screen will slide in from the right.

  • Start Creating a Trigger (B): Find and click the blue + icon to start configuring a brand new Trigger.

  • Name the Trigger (C): First, name your Trigger so you can always remember what it’s “listening” for and (optionally) put it in a folder.
  • Select the Trigger Type (D): Click into “Trigger Configuration” to make the “Choose trigger type” screen appear (right side of the image below). Then select “Just Links” to tell Google Tag Manager that “we’re only concerned with tracking links”.

  • Options (E): Leave “Wait for Tags” and “Check Validation” unchecked. No point in getting into these options because they’re rarely used except is advanced cases.
  • Some Links (F): The last thing we need to do before we get to the really fun part is select “Some Links Clicks” rather than “All Link Clicks” (which would cause this to fire on every click that happens on the site).

You’ll notice that as soon as you select on “Some Link Clicks” (F), some new fields appear. From left to right, we’ll call these the variable, the condition, and the value. 

The Variable (G1): Think of each option that is available under The variable as attributes about the click that you want to track. At the precise moment in which that click occurs, these variable options will be calculated on-the-fly. For example,

  • “Click Text” will be whatever the text of the clicked link was when that click occurred.
  • “Page URL” will be the URL of the page that a user was viewing when they made the click.
  • If we wanted to access a host of information about the clicked element itself (which we do), we can select “Click Element”.

At this point, go ahead and select “Click Element” as the value for The Variable (G1).

The Condition (G2): Think of The Condition as how you want to check if The Variable matches your criteria. If you simply wanted to track every link (anywhere on the site) with the text “Join”, you could use “Click Text” as the Variable and “equals” as the Condition.

However, we want to use this to specify multiple link elements (all links in the website’s navigation). For that, we can use “Click Element” as the variable and “matches CSS selector” as the condition. If you want to learn about the mechanics, read the CSS Selectors piece on Sitepoint.

At this point, select “matches CSS selector” as the value for The Condition.

The Value (G3): The Value is what you want to match the variable to. For the simple “all join links” example, the value would be “join” so that, when the “Click Text” was “equal to” the word “join”, everything would check out and the tag would fire.

For our more advanced “track all nav links” example, we can’t do the same because the text of each link is different. Plus, what would happen if new links were added to the navigation? Those wouldn’t be tracked!

The answer is to use the aforementioned CSS Selector. This is why I had you take that Khan Academy course on HTML & CSS!

Here’s how to find out what to put there:

  1. Leave Google Tag Manager open and open a new tab (or window) in Chrome.
  2. Go to the site you want to track something on.
    1. Just stay right here if you’re practicing on this site; you don’t even need to leave this page.
  3. Find an example of the type of element you want to track. In our example case, pick a navigation link. Right-click on it (1) and then click on “Inspect” (2).

  4. You’ll see an additional “drawer” appear with a bunch of code (see below). That’s what we want. Now take a deep breath. This is the trickiest part. Get ready to “navigate the DOM tree”. This sounds a lot more complicated than it is. DOM stands for “Document Object Model”, but for our purposes, just think of it as what you’re looking at now — a visual representation of the code (i.e., HTML) that forms the web page you’re currently on.
    Now let’s find the “CSS Selector” that we need to use as the Value in our GTM trigger.One: The first thing you should notice when the Dev Tools window pops up is that there’s one line of code in particular (1) that is highlighted in blue (if it’s gray, that’s fine, too). This is the HTML code for the link (or whatever) else you right-clicked on. If you don’t see anything highlighted, just go back a few steps and try again.

    Two: Next, we want to see if we can find the other similar items we want to track in addition to the currently selected element. To do this, expand the “nodes” by clicking on the gray arrows (2) until you find what looks like another element at the same indent level as the one you originally inspected. If you clicked on (2) in the screenshot above, you’d see another <a> link that looks similar to the first (1). Once you’ve done that, you’ve successfully located where all the elements you want to track “live”.

    Three & Four: The next step is to find a way to identify that location. This is called choosing an identifier. We can use either IDs or classes for this (again, check out the CSS Selectors piece on Sitepoint).

    In the example screenshot above all the available classes are “main-navigation”, “menu-toggle”, “menu”, “nav-menu”, “current_page_item”, “page_item”, and “page-item-16”.

    The only id is “site-navigation”.

    To find which one of those classes and IDs to use, you’ll want to navigate up the DOM tree — that is, literally take your mouse cursor up one line at a time highlighting each item along the way (3). If you began on (1), you’d first hit the <li> tag and then the <ul> tag. Remember in the last paragraph when we found similar link elements? Our goal is to go up far enough so that all those similar elements are indented within a common “parent”.

    As you highlight each parent, moving up the DOM tree, you’ll see that Chrome Dev Tools (the pane you’re working with right now) is automatically highlighting elements on the actual page. This is phenomenally useful! It will help clue you in to when you’ve selected the element (i.e., the line of code) that’s “just right”. See how this example has only highlighted the “Home” link (2) and left the “Join” link alone? This element selection (1) is too narrow, so we need to keep navigating up the DOM to the next parent.
    How about this example? See how the entire navigation is highlighted, encompassing both “Home” and “Join” (2)? That means the element we’ve selected (1) is just right.
    So the moment has come for us to populate (i.e., fill in) that Value back in our Google Tag Manager event tag! We either need to grab the ID or class from the element we finally landed on. Sometimes you’ll have one or the other to choose from; sometimes you’ll have both (the ID is usually a better choice when you have access to both); sometimes you have none and if that’s the case, keep moving up the DOM.

    Now, fill in The Value (G3) for your trigger (go up three images to get back to that screenshot example) using the class or ID.

    1. ID: To specify that you’re using an ID, start the value with a #. If you saw id=”site-navigation” in the code, you’d put #site-navigation.
    2. Class: if you’re using a class, start the value with the . symbol (period). If you saw class=”nav-menu”, you’d put .nav-menu. Keep in mind any element can have multiple classes (separated by spaces). So if you see something like class=”nav-menu active” that means the element has two classes, “nav-menu” and “active”. Just use the first.

Important

Finally, you’ll need to add an “a” right after your class or id. For example, if you had the following:

.nav-menu

You would need to make it:

.nav-menu a

This is because the class (or ID) we found only describes the parent element; what we’re concerned about are all the links (i.e., “a tags”) within those parent elements.

Voilà! What you’ve put in there is called a CSS selector. It uses CSS syntax to uniquely identify a specific element or group of elements on a webpage.

For humans (as opposed to software) to understand CSS selectors like this, it’s best to read from right to left. The final example we arrived at would be read, “We’re looking for all the ‘a’ tags [AKA, links] that are within any webpage element that has the class ‘nav-menu'”.

Once you put in your CSS selector, the final specification for The Variable, The Condition, and The Value should look like this.

Step 6: Review and Save

Now make sure you save everything (you’ll have to click the blue Save button on a few screens).

Once everything is saved, you should find yourself back where you started on the main “Tags” screen. You’ll be able to see your completed tag with its name (A), type (B), and trigger(C).

 

Step 7: Enter Preview Mode

Note that certain ad blocking extensions/plugins will block 
ALL communication with Google servers, meaning that nothing 
from here on out will work. If you're having trouble, try 
disabling your ad blocker and/or whitelisting google.com.

Next, we’ll enter GTM’s Preview Mode so that we can test this tag to see if it works.

Activate Preview Mode (A): To do that, click just to the right of the big  Preview button.

 

Once the GTM window refreshes, you should see a bright orange bar (B) across the top letting you know that you’re in Preview Mode. Note that anytime you change a tag, trigger, or variable (anything, really) you’ll want to hit the Refresh link in orange (C) and refresh the website that you’re testing on.

 

Get Your GTM ID (D): Before we hop to the next step, grab your GTM ID from the nav bar in GTM (D). It should have the format of GTM-AB12345. You need to either copy it as text (so you can paste it) or type it out in a note somewhere.

 

If you control the website you’re working on and you’ve actually added GTM’s container code (you’ll know if you have), you can skip to Step 9 right now — preview mode should be working when you refresh your site.

If not, we can use Tag Manager Injector (download link included under Prerequisites at the top of this post) to simulate having the actual GTM container code on any site you want. This will allow us to test and QA, but won’t work for anyone else visiting the site.

Step 8: Configuring Tag Manager Injector

First, navigate to the site that you’re working with.

Click on the Tag Manager Injector icon (1) in your Chrome menu bar and you’ll see a drop-down appear. Fill out the drop-down options as follows:

  • GTM Container ID (2): Paste the GTM ID you copied from above (when you activated Preview Mode)
  • Include Domain (3): Check “Exact Match”
  • Fill out the text field (4): Put in the domain on the site you want to test on (include www but not the https:// part)

Then click START (5) and you should see a green message that your GTM container is active (6). The page will automatically refresh.

Step 9: Test & QA

If everything is working as it should, you should see something like the next screenshot below on the website. The one thing to notice is that you won’t see your new click event tag under “Tags Fired On This Page” (1). That’s what we want because we haven’t clicked on anything yet. On the other hand, the page loaded and we’re viewing the page so our “Pageviews” tag (if configured) should be there.

Next, notice the “History Events” log on the left-hand side (2). This shows a log of every significant event that’s happened in the current page’s history so far with the most recent event listed on top. What we have at this point is:

  • Summary: Clicking on this will let you see, in the tag details section (1), everything that happened over the course of all the history events.
  • Window Loaded: This historical event occurs when the entire page has finished loading: all text, images, scripts, animations, etc.
  • DOM Ready: This historical event occurs when the DOM tree (the skeleton of HTML) has loaded.
  • Page View: This historical event occurs when first when the page starts to load.

If you click on “Page View” entry in the History Events log (2), you might see the “Pageviews” tag under “Tags Fired On This Event”. This means it is set to fire right away, which is a good thing.

So how do we test our tag and perform quality assurance (QA) to make sure it’s going to send the right data to Google Analytics?

While holding Command (on Mac) or Control (on Windows), click on any link (1) in the navigation (this forces the link to open in a new tab rather than making you leave the page you’re on). You’ll see that a new history event shows up in the log, “gtm.linkClick” (2). You should see “Navigation Event Tag” (or whatever the name of your new tag is) show up under “Tags Fired On This Page”.

If you then click on “gtm.linkClick” (2) in the History Events log, you should also see the tag listed under “Tags Fired On This Event”. Click on the name of the tag (3).

Once you click on that tag, you’ll see the “Properties” of that specific tag (click on the blue “Sho More” text to see all the details). You’ll see all the data that is being sent to Google Analytics.

  • Your Google Analytics UA ID (1): Not just the name of the variable, like {{GA ID}}, but the actual value!
  • The Event Category (2): The one you set in the tag settings within GTM.
  • The Event Action (3): The event action that you specified in GTM.
  • The Event Label (4): This was set to {{Click Text}} in GTM, but look at it now! It’s showing the actual text of the link you just clicked.

You can repeat this process with all the links in the navigation to ensure your tagging works for all of them.

If your tag didn’t fire when you clicked, you can see why by going to the last section of the Tag Properties, under “Firing Triggers”. If our example tag was configured properly, we’d see green check marks by

  • “_event” (1) meaning that a click (specifically a link click) occurred,
  • “Click Element” (2) meaning that the clicked element matched our specified CSS selector, and
  • “_triggers” (3), which is just a technical identifier that GTM uses — ignore these when you see them.

If any of the “Filters”, i.e., conditions, have red Xs, that’s where things are breaking down and you’ll have to investigate why they aren’t equating to “true”.

Step 10: Publish When Ready

So that’s it! You can click STOP in the Tag Manager Injector Chrome extension and select Leave Preview Mode in the GTM interface.

When ready, select the big blue Publish button in Google Tag Manager and click it. You’ll get a cute message from the Google Tag Manager engineering team and your new tag will go live to the world!

Additional Reference

Creating a Google Analytics Settings Variable

To set up a Google Analytics Settings variable, you’ll need to insert your Google Analytics Universal Analytics ID (UA ID) into a new GTM Variable. To start, go to Variables (A) on the left-hand menu and then click New (B) on the Variables screen.

On the next screen, give the variable a name (C), select “Google Analytics Settings” as the Variable Type (D), and then input your Google Analytics Tracking ID (F).

To find your ID, you can use these instructions from Google.

 

Leave a Reply

Your email address will not be published. Required fields are marked *