All About 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.

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

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).

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.

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