On October 1st, 2012 Google launched its tag management system intuitively called “Google Tag Manager” or “GTM”. In premise, GTM is a good thing, though the user base is small compared to some of Google’s other products like AdWords or Analytics. However, now is the chance to seize the day! Now is the chance to get in on the ground floor and educate yourself on a platform that will be growing exponentially in the coming months and eventually replace 90 percent of the emails you send to your website developer.

What is Google Tag Manager?

Google Tag Manager is a marriage between marketing and code development. Though it has been around for years, the recent UI update (made available March 30th, 2015) makes the platform far more intuitive and accessible to those of us that don’t speak code. More importantly, GTM can consolidate dozens of tag snippets into one single deployment, which saves you, the marketer, time from drafting emails to engineers and QA’ing code deployments that you may or may not be qualified to audit in the first place.

How to Use GTM Properly

Here’s where most people fall off. Google Tag Manager is powerful, but like any other technology, only when used properly. So let’s handle this in sequence.

1. Deploy the Right Code

The first thing worth mentioning here is that not everything comes right out of the box. E-commerce tracking, for example, is not pre-configured in GTM and needs a little extra effort to get off the ground (I will cover how to do this in a separate article). But let’s not get ahead of ourselves here. Before any paint gets used or fixtures get added to the doors, we need to lay the foundation for the house.

The first thing you will notice about the new UI in Tag Manager is the clean appearance. And though this clean appearance certainly looks better, it’s important to note that a few things have moved around from the previous interface. After you login, at the top of the page, you will see a link that simply states “Create Account”. To set up the code for your site you will need to click it.

Lewandowski_GTM_1

After you do this, complete the mini questionnaire about your website and click create.

Lewandowski_GTM_2

You will be prompted to agree to the terms of service and then once you sign your life away, a code snippet will generate. Now I know that I said that Tag Manager would replace 90 percent of the emails to your code developer – this next step is part of the remaining 10 percent. Take this code snippet and forward it to your developer, instructing them to place it immediately after the opening <body> tag on every page of your website.

Lewandowski_GTM_3

Side note, if at any point you need to relocate this code, simply use the left navigation and click the GTM-XXXXXX at the top right corner of the interface.

Lewandowski_GTM_4

Once the code is added, you can verify the deployment by using the inspect element feature in chrome (Ctrl+Shift+i). The GTM code should be right below the opening <body> tag in the source code. It’s less important that you are able to read the code, and more important that it is there.

Lewandowski_GTM_5

2. Set the Right Tags (Google Analytics Example)

Tags are used as instructions for you to tell GTM what to do on your website. Now, I know it seems rather obvious, but let me stress how important it is to set the right tags in your account. Tag Manager can only do what you want it to, so make sure you are passing along the right instructions.

For our purposes, let’s take care of the low-hanging fruit first and set up Google Analytics. The nice part about Analytics and Tag Manager both being Google products is that they play well together. The first step is to select Google Analytics from the “Choose Product” list provided.

Lewandowski_GTM_6

Next, you will want to choose whether you have Universal Analytics or Classic Google Analytics. If you can’t remember which one you have signed up for, go to into your Google Analytics property and click Admin–>Tracking Info (under the Property Settings)–>Tracking Code.

Lewandowski_GTM_7

Now we get to the fun stuff. The third step, Configure Tag, has a couple of elements that we will need to address but let’s take the first one listed here, the Tracking ID. You will notice something that looks like a Lego brick next to the text box. This is what GTM calls a “variable” (formerly called a macro) and can be used to populate your Google Analytics Tracking ID. But for now, we will simply type the information. It will follow a format of “UA-XXXXXXXX”, where X is a number. It is possible to have a version associated with it that would then change the format to “UA-XXXXXXXX-X”. Either way, copy this from the same Tracking Code location in your Google Analytics account and paste it into the text box in Tag Manager.

Beneath the Tracking ID box, you will see an optional checkbox to enable Display Advertising Features. Click it. This will enable your GA Demographics and Interest Reports, Remarketing with Google Analytics, and DCM Integration. If you need more information on these integrations, you may find the documentation here.

The last option most users need to pay attention to in this step is the Track Type dropdown. This will instruct GTM when to listen for your tag. If your tag was based on a custom event or transaction, you can make that distinction here. For our purposes using Google Analytics, we want to leave this as “Page View”. The only remaining options in our lengthy step three is to custom configure our tag using “More Settings” or “Advanced Settings”. The only distinction worth noting in this article is that “More Settings” is for making adjustments based on website configurations and “Advanced Settings” is for making adjustments on tag prioritization and conditions. For now, let’s leave them alone.

Lewandowski_GTM_8

The last step, “Fire On”, tells Tag Manager where to execute the tag. This can range from a page load to custom JavaScript. Since Google Analytics needs to be loaded on every page, we want to select the “All Pages” option. Once this is complete, click “Create Tag”.

Lewandowski_GTM_9

3. Have the Right Triggers in Place

Triggers (formerly called Rules) tell GTM where to execute. You will notice the same was said in the paragraph above in our “Fire On” description. This is because the “Fire On” step uses a list of triggers to tell the tag where to fire on your website.

Natively, Google Tag Manager has one trigger built in: All Pages. While this is useful for a variety of tags, you most certainly do NOT want this for all of your tags. For example, you would not want this trigger to fire on all pages when the goal is to capture form submissions on a particular page. In the spirit of simplicity, we will walk through an example of setting up a trigger for an order confirmation page on our fictional e-commerce site.

Because our e-commerce site follows a particular sequence to make a purchase, we will want to first understand how the URLs change in that sequence. Our example is outlined below:

/cart –> /billing-information –> /review-order –> /thank-you

In this example our order confirmation page is “/thank-you”. This is the page that we want to leverage to create a trigger that will empower our tag to track transactional information properly. So let’s jump in to creating our trigger in GTM.

The first step in our trigger is to choose the event upon which the trigger is built. In our example, because we are wanting to track an event based on a particular URL, we will select “Page View”.

Lewandowski_GTM_10

Step two for our purposes is similar to step one in that we will again select “Page View”. For the sake of being thorough, however, let me briefly explain the differences among the options provided. From the dropdown, you will notice “Page View”, “DOM Ready”, and “Window Loaded”. Below are the applications for each:

  • Page View – This is the quickest way to identify the trigger type. This allows the trigger to fire right at the beginning of a page change.
  • DOM Ready – This option is a bit more technical but essentially the difference is between quick element identification and entire page loads. The gtm.dom element is best used as a lighter way to identify elements in your HTML when you may be dealing with longer load times due to media or API calls.
  • Window Loaded – This is used when actions require all the individual elements to load prior to triggers firing. I would not recommend this method unless completely necessary, as this can lead to tags not firing at all if the entire page fails to load before the user navigates away.

Lewandowski_GTM_11

This last step is where we earn our paychecks. The URL path above for purchase completions will now be used to set a trigger that will only pertain to our order confirmation page. Assuming that “/thank-you” does not exist anywhere else on our site, we want to create a rule using “url” in the first dropdown, “contains” in the second drop down, and then type “/thank-you” in the textbox provided. This will instruct our rule to only fire on the order confirmation page and not fire on any other.

Lewandowski_GTM_12

The only other thing you may want to take note of in this last step is the “-“ and “+” to the right of our conditions. This allows you to add or remove multiple conditions within a single trigger. This may be useful if you have a staging site that you have made changes to and want to test before you go live (assuming staging is also configured with GTM). In this specific example you could choose “url hostname”, “equals”, and then the staging domain (ex. staging.mysite.com).

4. Set It and Forget It with the Variables Feature

I cannot say enough how much I love the variables feature in GTM. This is where you can become incredibly efficient and begin to automate things that can be otherwise hard to remember. Let’s jump back to the Google Analytics implementation that we walked through in the Set the right tags (Google Analytics example) section above. In step three, I alluded to the variable feature and this would be a great time to revisit the subject.

In this example, we will set up the Google Analytics Tracking ID so that we don’t need to go digging for it any time we need to use it moving forward. Because this is merely a Tracking ID, and in theory should never change, we will select the “Constant” option in step one.

Lewandowski_GTM_13

Once this is selected, we can type the Tracking ID in the textbox provided and click “Save Variable”.

Lewandowski_GTM_14

After this is completed, you will notice your variable appear in the list provided below.

Lewandowski_GTM_15

Once the variable becomes available, we can simply go back into the tag that we created earlier and replace the hand-typed text with our new Google Analytics Tracking ID variable by clicking the Lego brick to the right and selecting it from the dropdown.

Lewandowski_GTM_16

This Google Analytics Tracking ID is one of the more basic ways to use variables in Tag Manager. Variables can be far more integrated and impressive as you continue to expand your level of comfort with GTM. Below is a short list of uses for variables that intermediate users should be able to implement with minor development work:

  • session cookies
  • custom JavaScript
  • ecommerce variables
  • URLs
  • custom events
  • DOM elements

Kazaam! You’re a Tag Manager Master (Kind Of)

If you’ve made it this far, you should have a grasp on some of the basic functionality of Google Tag Manager. By no means, however, should your knowledge end here. Much like other Google products, Tag Manager is simplistic enough for anyone to pick up and use, but complex enough to have entire books and blogs written about it.

I hope at the very least that you now have confidence to get started in your own tag management account. Tag management as a whole is a very popular topic and is expected to grow rapidly in the coming months. Make sure that you are educating yourself by keeping up with the changes and check back for updates posted on our blog about GTM and other tag management platforms.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comments