Category: Tutorials

How to Set Up Basic Tags in GTM

1 Comment

This post will walk you through the steps required to set up basic tags (pageviews, events, and social actions) in Google Tag Manager.

Prerequisites

Got all that? Great, let’s begin.

How to Set Up Tags in GTM

Step 1: Begin Creating a Tag

Once you’ve logged into your GTM account at tagmanager.google.com, use the menu on the left-hand side to go to the Tags page (1). From there, select “New” (2).

Step 2: Name the Tag & Choose A Type

The first thing you’ll want to do is name your tag (1). Name it something descriptive so that you (and others) can understand what the tag does without having to guess. Optionally, use the folder icon to the right of the tag name to group the tag with similar tags.

Then, select Universal Analytics as the Tag Type (2).

For Tracking ID, you’ll need to input your Google Analytics Universal Analytics ID (UA ID). To find your ID, you can use these instructions from Google.  However, keep in mind that you may be setting up a lot of tags and you don’t want to have to go through that whole process each time. To save yourself the trouble and generally keep things organized, click on the “lego” icon to the right of Tracking ID (3). You’ll be prompted to “Choose a variable”, but you’ll want to add a new one instead (at the time of this writing, this can be done by finding a blue + icon). Name your new variable “UA ID”, choose “Constant” as the variable type, and then paste your actual UA ID as the value of that constant variable. Save everything and you should now see {{UA ID}} as the input under Tracking ID (3).

Finally, select your Track Type (4). This is the type of hit that will be sent to Google Analytics when this tag is fired. For the purpose of this tutorial, we’ll only be dealing with the following hit/track types:

  1. Page View
  2. Event
  3. Social

If you’re setting up a Page View, good news! You can skip ahead to Step 5.

Step 3: Populate Tracking Parameters

If you’ve select either the Event or Social track types, you’ll need to supply some additional information.

We’ll use an Event track type as an example here, but similar principles apply for the Social track type.

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 your “Event”. One good model to start with would be the following:

  • Category (1): Where on the site the event happened (e.g., homepage, blog post, footer, sidebar, etc.)
  • Action (2): A descriptive label that’s one level deeper than the category (e.g., homepage 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 (3): 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.

The remaining two fields do not require modification, but may be helpful.

  • Value (4): 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 (5): 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-page 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.

Static Vs Dynamic Values

What if you have four navigation links and you want to use a single Tag in Google Tag Manager to collect event data on each one? The Category would be “navigation” on each link click event, the Action would be “primary nav click” on each, but the label should be something different depending on what link a user clicked. This is where dynamic values using variables comes in. To restate 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 four 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 here but this is a good start.

Click on the “lego” icon next to Value (4) in the screenshot from above. 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 “/”.

So the last thing we need to do here is select the variable called “Click Text” for the Value of this tag. If you were following this example, your finished tag would look like this.

Step 4: Define a Trigger for your Tag

Now we need to tell Google Tag Manager when to fire this tag and send 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.

While still looking at the settings for your Event Tag, click into the “Triggering” section. The “Choose a Trigger” screen will come up and just like with the variables, find and click the blue + icon to start configuring a brand new Trigger.

First, name your Trigger so you can always remember what it’s “listening” for and (optionally) put it in a folder. Then select “Just Links” (2) rather than “All Elements” and leave “Wait for Tags” and “Check Validation” (3) unchecked. The last thing we need to do before we get to the really fun part is select “Some Links Clicks” (4) 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”, some new fields appear. From left to right, we’ll call these the variable, the condition, and the value. 

Variable: Think of each option that is available under “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 mad the click. If we want to access a host of information about the clicked element itself (which we do), we can select “Click Element”.

Condition: Think of the Condition as how you want to match against the Variable. 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, let’s say that 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.

Value: 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. Here’s how to find out what to put there:

  1. Go to the site you want to track something on (or just stay right here if you’re practicing on this site).
  2. 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).

  3. 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. 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.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”.

    The next step is to find an identifier for that location; the place where these elements “live”. We can use either ids or classes for this. 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 into 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 use to populate (i.e., fill in) that Value. 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.

    Fill in the value for your trigger (see the beginning of Step 4 for that screenshot example) using the class or id.

    1. id: if 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 a . (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 and “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.

Step 5: Review and Save

Now make sure you save everything. 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 it’s name, type, and trigger(s).

Step 6: Enter Preview Mode

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

We’ll enter GTM’s Preview Mode so that we can test this tag to see if it works. To do that, click just to the right of the big red PUBLISH button (1) and select the PREVIEW option (2).

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

Before we hop to the next step, grab your GTM ID from the nav bar in GTM (3). It should have the format of GTM-AB12345

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 7 — 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. This will allow us to test and QA, but won’t work for anyone else visiting the site.

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 dropdown appear. Fill out the dropdown 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”
  • In the text field (4), put in the domain on the site you want to test on (include www but to the http:// part)

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

Step 7: Test & QA

If everything in 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 in the History Events log (2), you’ll 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 there (3).

Once you click on that tag, you’ll see the “Properties” of that specific tag. Notice that the Google Analytics UA ID is displayed here for you (1). If that’s not displaying, you may need to toggle on the “Show Values” option (not pictured here, but directly to the right of the tag properties).

Click on “Show More” (2) to continue your QA.

Once the tag Properties expand, you’ll see a lot more information about your tag. What we are checking for is that the Event Action, Category, and Label are being populated as expected (highlighted below in green).

If for any reason, 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 8: 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 publish in Google Tag Mananger and your new tag will go live to the world!