How to Use Google Tag Manager (Ultimate Guide) @ TwentySixForty

How to Use Google Tag Manager Overview.

This tutorial will explain what a website tag is, what Google Tag Manager is and why you should use it. I will also explain how to open a Google Tag Manager account and how to install it on your website.

Quickies.

What is a Website Tag?
What is Google Tag Manager?
Why Should I Use Google Tag Manager?
Understanding the Parts of Google Tag Manager.
How Do I Open a Google Tag Manager Account?
Where Do I Get the Google Tag Manager Container Code?
How to Place GTM Container Code on a WordPress Website.

What is a Website Tag?

A tag is a small piece of code that collects data when placed on a website or application. A tag could be a block of JavaScript code, a small pixel, or a transparent image. These small blocks of code use cookies, browser info, and user’s HTTP requests to collect information about the user and about the user’s behavior while on the site or application. This data is primarily used for targeted marketing and providing customized user experiences. Have you ever searched for a product online like a pair of shoes, and for the next week you see advertisements for those shoes everywhere? They have collected data about you that shows that you’re interested in the shoes and they are sending you targeted ads because they believe you are now more likely to purchase the shoes. Simply put, a tag collects data about website users.

What is Google Tag Manager? (GTM)

Google Tag Manager is a tag management system that provides an interface where you can embed, manage and update various tags and marketing pixels on your website or mobile application. It is compatible with all Google products and most third-party tags and pixels. Some people confuse GTM with Google Analytics and they are not the same thing. GTM is simply a tool that will place an analytics tag, and many other tags, on a website.

Why Should I Use Google Tag Manager?

Nowadays there are lots of different tags out there. There are analytics tags, advertising tags, social media pixels, conversion tracking tags and many more. Let’s say you need to place 5 different tags on your website. Instead of digging into the code to place each one of them, you can dig into the code once, place the GTM code, and then place all of your tags and pixels through the GTM interface. Google Tag Manager is a dream come true for digital marketers. No longer do they have to put in a request to a developer to place a tag on a website and then wait until they get around to it. Once GTM is placed on a website, anyone can install, delete and tweak any tags and pixels they want at any time.

Understanding the Parts of Google Tag Manager.

GTM Containers.

A GTM container is the piece of code that Google gives you to place on the website. It basically holds all of the tags, pixels and other snippets of code you are placing on the website.

google tag manager code

GTM Triggers.

A GTM trigger determines if a tag should be fired or not. Triggers listen for events to happen on a website and if an event meets a specified set of conditions, the tag is fired. Some common triggers are clicks, page views, and form submissions. There are also many custom triggers you can create for things like downloads and video views. Example: If you want to keep track of the number of times someone clicks a specific button on your website, you can set up a trigger to do this.

gtm triggers

Variables.

A variable in GTM is a placeholder for a value. GTM variables store data that is used to determine if a trigger should fire or not. They are also used to pass information and values to tags. The variable syntax looks like this: {{variable}}. Example: Instead of having to type your Google Analytics tracking code every time you want to use it, you can simply put it in a variable and call the variable when needed. Like this: {{GA Tracking Id}}

gtm variables

Data Layer.

The data layer is sort of a container that exists between the website and GTM. Instead of GTM having to read all of the code on the website, it reads the data layer. Anything can add data to the data layer including the website, plugins, custom code that a developer creates and GTM itself.

gtm data layer

How Do I Open a Google Tag Manager Account?

If you don’t already have a Google account you will need to create one first at accounts.google.com.

google create account

Go to Google Tag Manager and sign in.
Click on Create Account.

gtm create account

Enter the Account Name and Country in the Account Setup panel.

gtm create account

Enter the Container Name in the Container Setup panel.
If this is going on a website select Web.

tag manager container setup

Click Create and accept the terms and conditions.
You now have a GTM account.

Where Do I Get the Google Tag Manager Container Code?

The GTM container code consists of 2 parts, one will go in the head of the website and the other will go in the body of the site.

Login to your Google Tag Manager account.
Click on Admin near the top of the screen.

google tag manager

Click on Install Google Tag Manager.

google tag manager admin

This is the code that will be placed on the website.

google tag manager code

The Correct way to Place GTM Container Code on a WordPress Website.

Now that you have a Google Tag Manager account and the container code, you need to place it on your website. I am going to demonstrate this on a WordPress website but as long as you put it in the correct place it will work on any website. There are lots of plugins that will help you do this and I have tried most of them. I have not come across one that does it correctly so I will show you how to do it without a plugin, correctly. In order to do this, you must have a child theme installed. If you don’t have a child theme check this out: How to Make a WordPress Child Theme. It’s a little extra work but it’s well worth the effort.

GTM Container Code Placement Instructions.

Here are the code placement instructions straight from Google’s website:

a. Instructions for first code block: “Paste this code as high in the head of the page as possible:”.
b. Instructions for second code block: “Additionally, paste this code immediately after the opening body tag:”.

Open your child theme folder. If you don’t have a header.php file in your child theme, go into the parent theme, get a copy of the header.php file and paste it into your child theme.
Open the header.php file from your child theme in a text editor.
Copy the first block of code from the GTM container code.

google tag manager container code head