All About Google Tag Manager

Google Tag Manager
Google Tag Manager, also known as GTM, is a free container tag system from Google. A container tag helps you manage different kinds of tags that you may have on your site. This include web analytics tags, advertising conversion tags, general JavaScript, etc.

Some of you may have one or two tags on your site. Others may have 20 or more tags on your site. Everyone can use GTM to make tagging and tag changes easier.

With Google Tag Manager you place a single line of JavaScript code on your site. This is called the container.

Then you use the GTM interface to populate the container with other types of tags.

Let’s take a closer look at Google Tag Manager and some of the important features.

Google Tag Manager Account Structure

When you sign up for Google Tag Manager you get an account. Then within that account you create different containers.

GTM Account Structure

A container is basically a holder, or bucket, that you can populate with all of your other tags. Each container has it’s own JavaScript that you place on the site.

A container can be put on one website, or on multiple websites. It depends on how you plan to manage your tags. As you read more about the other GTM features, like rules and events, you’ll get a sense of if you should deploy one container on all your sites, or multiple containers.

TIP: If you are a consultant or an agency, it’s a good idea to have ONE account for each of your clients. That way, if you part ways with your client they will still “own” the GTM account and setup.

The Container

The container is simply JavaScript code that you put on your website. It’s recommended that you place the JavaScript immediately after the opening < BODY > tag on your site.

I know it’s a bit nerdy, but let’s take a look at the actual container JavaScript.

< !-- Google Tag Manager -->
< noscript>< iframe src="//www.googletagmanager.com/ns.html?id=GTM-7JRL"
height="0" width="0" style="display:none;visibility:hidden">
< 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');
< !-- End Google Tag Manager -->

The first thing that you probably notices is the noscript opening. This let’s individual tags, which have a noscript option, function normally if the browser does not execute JavaScript.

Like most tags on the internet, the GTM tag loads a JavaScript library. This library, named gtm.js, contains all the logic that GTM needs to execute the tags within the container.

Also notice, towards the bottom of the tag, you can see your Google Tag Manager account ID, it’s formatted as GTM-XXX. This links your container JS to the your account.

Google Tag Manager will execute the tags within the container asynchronously. This means that if there is a tag that is slow in loading the rest of the tags will not need to wait. They’ll continue to load and the page will render normally. This can actually improve the page load time for your site.

The Data Layer

The data layer is a way to communicate information between your web page and the various tags you have inside of a container. It’s basically a data format that Google Tag Manager can respond to.

For example, you can place data about a page, like the page title, page category or transaction value, in the data layer and it can be accessed by other parts of GTM.

To create a data layer all you need to do is create a JavaScript object and name it dataLayer, like this:


< script>
dataLayer = [{
}];
< /script>

NOTE: To get the most benefit make sure that you create the data layer before the GTM code.

If you’re new to the idea of using a data layer with tag management see this article about making tag management better with a data layer.

But the data layer is not just for static information, like a page category, you can also pass data to the data layer as things happen on the page. For example, if a visitor enters certain data into a form, like a favorite country, and you want to use this data in a tag that’s within your container, you can immediately add it to the data layer. This is done using the the push command:

dataLayer.push({'Favorite Country': 'Australia'});

TIP: You can change the name of your data layer. Just update your container tag code. Look for dataLayer in the container JS and change it to the name you want.

Macros

So if you have data in a data layer, how do you use it in Google Tag Manager? Via Macros!

Quite simply, macros are things that store data. That’s it. Don’t get confused.

A macro has one job, and that’s to store a piece of information that you can later use to create a rule.

I think Macros can be confusing because there are lots of different types of macros. The reason is that the information about a page is scattered and stored in lots of places. There’s some data that’s in the DOM. There’s some data that’s in custom JavaScript. Other data may dynamically appear when a visitor takes a certain action.

Macros are a way to tell GTM where to find the information.

Google Tag Manager comes with a number of pre-configured macros:

  • URL Macro: This holds the value of the URL for the current page.
  • HTTP Referrer: This holds the value for the referrer of the current page.
  • JavaScript Variable: This is the name of a JavaScript variable on your page. GTM searches the page, finds the JavaScript variable based on the name you enter, and then stores the value in a macro.
  • DOM Text: This is the name of a DOM element ID in your page. GTM searches the page, finds the element, and then stores the value of that element in a macro.
  • DOM Attribute: This is the name of a DOM element ID:attribute. GTM searches the page, finds the element ID:attribute, and then stores the value in a macro.
  • Data Layer Variable: This is the name of a data layer variable. GTM searches the data layer, finds the variable with the name that you entered into the macro, and then stores the value in the macro.
  • Constant String: The Constant String does not come from the page. It’s just a constant value that you input as a macro.
  • Custom Event: This is a way to get custom data based on a visitor action. More about events in the a later section.

Let’s look at an example. Let’s say I want to use the transaction value in a rule. I need to tell GTM where to find that piece of information. On my site it’s stored in the data layer. There is a data layer variable named transValue. All I need to do is type in the name of the variable, transValue, in the macro, like this

Creating a Macro in Google Tag Manager

Let’s look at events, a way to get custom data into a macro.

Events

Visitor actions can also be added into the data layer. For example, when a visitor clicks on a button, you can pass this action into the data layer and GTM can respond to it. These are called Events.

You capture GTM events using some custom JavaScript that you add to the site.

After you add the code to your site the event can be referenced from the GTM interface using a Macro.

Here’s an example. Let’s say I want to fire a tag with the visitor clicks on a link on my site. I need to capture the click so I can create a rule in GTM.

To capture the click I need to add the following JavaScript to the anchor tag:

< a href="#" name="button" onclick="dataLayer.push({'event': 'BuyButtonClick'});">Buy Now

You’ll probably notice that I’m actually adding data to the data layer. That’s the cool thing about the data layer, it can accept dynamic data, like visitor actions, as well as static data like page attributes.

A better way to actually add an event to the link click would be to abstract the data layer code from the link and wrap it in some kind of function:


function trackLinkEvent (eventName) {
dataLayer.push({'event': eventName});
}

Then you would modify the link like this:

< a href="#" name="button" onclick="trackLinkEvent('BuyButtonClick');">Buy Now

NOTE: If you’re a Google Analytics user, don’t get Google Tag Manager Events confused with Google Analytics Events.

Rules

Rules are the “brain” of Google Tag Manager. They decide when a tag should appear with the container. Rules are stored at the container level, and you can reuse them on more than one tag.

For example, for AdWords conversion tracking, you only want to fire the conversion tag on the thank-you, or confirmation page. You can create a rule in GTM that specifics your AdWords conversion tag appears only when the URL of the page matches the URL of your thank you page.

There are three parts to a rule:

  • The Macro: This is the data that’s stored in Google Tag Manager. See the previous section for more information.
  • The Condition: This is a logical condition, like matches, does not match, contains, etc.
  • The Value: This is a pattern that you apply to the macro. If the value meets the logic condition when compared to the macro, then the rule returns true and the tag is fired.

Rules can have multiple conditions. For example, you may want to create a rule that will only execute on a certain page (URL macro) when the source is a certain value (HTTP Referrer macro).

You can add multiple conditions to a Google Tag Manager Rule

Rules are stored at the container level. This means you can reuse your rules across different tags.

Managing Google Tag Manager Users

Google Tag Manager is VERY helpful. It can save you a lot of time getting tags pushed out to your website. BUT, in the hands of an inexperienced user it can cause all sorts of trouble. That’s why it’s really important to manage your users effectively.

There are two permission levels in Google Tag Manager: Account permissions and Container permissions.

Account level permissions:

  • View Only: This means that the user will not see any containers in their account unless they are given permission at the container level.
  • View, Edit and Manage: This means that the user will see containers in their account, and be able to view he settings on each container. But they will not be able to make any changes or publish tags unless given permission at the container level.

Container level permissions:

  • View Only: This user can view all tags, rules and macros in a container.
  • View and Edit: This is a really helpful set of permissions. It let’s a user make changes to a container, BUT the user can not publish those changes. It requires that someone else with higher permissions, publish the changes. This is really helpful for enforcing tag publishing process.
  • View, Edit, Delete & Publish: This level allows complete management of a container. The user can do everything. You don’t want a lot of users with this level of permissions.

Adding a user in Google Tag Manager

I hope this article gives you an understanding of some of the important parts of Google Tag Manager. I’ve written a couple of other articles that focus on other parts of Google Tag Manager:

Previewing and Publishing Tags in Google Tag Manager Workflow
Make Analytics Better with Tag Management and a Data Layer

Be Sociable, Share!

    Like this post? Sign up to get posts delivered to your inbox.

    Comments

    1. Victor says

      Justin: Thanks for this great overview. There are several interesting possibilities of things we can do with this – what immediately came to mind is your article about how to track “zero search result” pages way back in 2009 – http://cutroni.com/blog/2009/09/08/tracking-ero-result-searches-in-google-analytics/

      This is something I am messing with right now. I was wondering how easy it would be to use the DOM text and DOM attribute macros to identify a custom string of words only found on zero search results pages – like ” No results found” …, then fire off the special category creation code you created in that article. Would be great to see an actual example of this ( I suspect it will simplify the entire “no search results” tracking methodology as well.

      • says

        @Victor: ABSOLUTELY! You could create a generic JS script to parse the DOM and look for 0 result searches. Then put it in a Custom HTML tag. I’ll try to get to it soon, but your idea is spot-on.

    2. Sam Hirbod says

      A great explanatory introduction to the tag manager,
      both methodical and easy to understand even though it’s quite detailed.
      You answered most questions that appeared in my head when first hearing about it’s release.
      The ones that were not covered in this post were mostly covered in your other posts regarding the subject.

      I guess you have no estimate of when the advanced GA-tagging options will come into work?

      Regards,
      Sam Hirbod

    3. Daniel Ford says

      In the example used above to trigger an AdWords conversion pixel on a specific page if the referral is google or bing. Will that actually work? In the explanation further up referrer seems to be the actual page referrer and not the initial referrer to the site? Do you understand me?

    4. rob says

      Is it also possible when your website have a login, to change the customvars of your analytics-code when someone actually logs in, using the tag manager?

      • says

        @Rob: Yes, it is possible. But there is no “automatic” code that will do it in Tag Manger. You’ll need to create some custom JavaScript that checks the custom vars and responds to the action. Then you’ll need to place the code in a Custom HTML tag in Google Tag Manager.

    5. says

      It’s a good news that Google launched tag manager.Thank you for introducing such excellent tool!
      I am confused about the HTTP Referrer, as you mentioned in this article, it holds the value for the referrer of the current page.But when you constructing CPC conversion Only Rule, you used url and HTTP Referrer together, in my opinion , with these two conditions together, only the traffic which use thankyou.html as landing page and comes from Google and Bing matched the condition. But the real purpose of this rule was trigger some tag (such as conversion tracking code) on goal page (no limited to the landing page) for some traffic source.Or HTTP Referrer means the landing page’s referrer not current page’s referrer just as the GA.
      Regards,
      Cloga

    6. Faith says

      I wonder if you can elaborate on “NOTE: If you’re a Google Analytics user, don’t get Google Tag Manager Events confused with Google Analytics Events.” We’re evaluating GTM and have found that although Preview indicates the button click GTM event in our test is firing, we don’t see the button click event tracking data in Google Analytics. If the GTM event (“BuyButtonClick” in the example) doesn’t record a GA event, then what does it do and where would we see the data for these visitor actions?

      • says

        @Faith: A GTM event just pushes data to the data layer. You need to fire a tag, which is based on the event that you pass to the data layer. That will get the data to flow into Google Analytics.

    7. James says

      Hi Justin,

      Above, it states:

      NOTE: If you’re a Google Analytics user, don’t get Google Tag Manager Events confused with Google Analytics Events.

      Can you advise why you would want to record events both in Google Analytics as well as via the data layer?

      Or does capturing the events in the data layer replace capturing it via additional javascript alongside the usual GA tracking code when not using Google Tag Manager?

      Am new to GA so sorry if this sounds like a question with an obvious answer.

      Cheers,

      James

      • says

        @James: GTM is a completely different product that works with a lot of different products. An event in GTM is very different than event in GA. When you create an event in GTM it can be used for a lot of different things; AdWords tag, Floodlight Tag, SiteCatylst tag, etc. It’s just that GTM uses the term event, just like GA. But they are different things.

    8. Sivaprasad says

      Just wondering whether Google TMS can be used to manage the non GA tags. For example, can google TMS be used to manage webtrends, omniture tags?

    9. says

      Justin, thanks for this article! Just got a macro rule set up because of this.

      One question: when GTM says it only does “basic Google Analytics tags”, does this mean that we can’t use GTM to set GA custom variables? I tried to put the GA custom variable logic in the HTML tag (surrounded by script tags), and the debugger says my tag fires, but Charles doesn’t show the custom variables being set.

      Any ideas?

      • says

        @Randy: Remember, a custom variable is sent to Google Analytics with an image hit. The custom variable does not generate an image, so the data is sent with the event, pageview or transaction hit that happens immediately after you set the custom variable. That’s why you may not be seeing the CV sent.

        Hope that helps.

    10. Bradb says

      OK, I inherited a 6,000 page site for marketing purposes that we use google analytics on and we “try” to use conversion tracking in adwords and google analytics. a few questions.

      1. Does the tag container code replace the google analytics code or do they need to both be on the page?
      2. Do tags then make the process of adding individual “conversion” tracking code obsolete?

      Unfortunately, I am the marketing guy that actually is in charge of the tracking of all the metrics and I am new to this side of the isle. Our IT team will make the changes, but I need to do the research. Sorry for being basic, but I don’t see all the info I am asking and thought you might respond.

      Thanks!

      • says

        @Bradb: Sounds like you’ve stepped into quite a big project.

        1. The container tag replaces the Google Analytics tag. If you’re using Google Tag Manager then that should be the only tag on the site. All of your other tags, like Google Analytics and Google AdWords will be managed from within Google Tag Manmger.

        2. KInd of. Once you have Google Tag Manager on your site then you manage all other tags from within Google Tag Manager. Technically you still need to “add” conversion tracking tags, but you “add” then using Google Tag Manager. You don’t actually place the code on the site, you “add” them via the GTM user interface.

        Hope this helps you get started.

    11. says

      I don’t get this part: ” you can inimically add it to the data layer.”

      Webster’s says inimically means:
      1: being adverse often by reason of hostility or malevolence
      2 a : having the disposition of an enemy : hostile
      b : reflecting or indicating hostility : unfriendly

      Can’t be right, surely??

    Trackbacks

    1. [...] Google Tag Manager Google hat in der ersten Oktoberwoche den Tag Manager vorgestellt. Er richtet sich an Marketeers, die Tags (u.a. Analytics-, Doubleclick- oder auch SiteCatalyst-Tags) selbst on-the-fly auf der Webseite aktivieren möchten. Durch den Manager können diese Tags modifiziert werden ohne auf den Release-Zyklus des IT-Teams angewiesen zu sein. (cutroni.com, englisch) [...]

    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>