Google Tag Manager - How it Works

Google Tag Manager - How it Works

Overview

Google Tag Manager (GTM) provides web developers with an easy way to add and manage third-party code snippets to their websites without having to modify the sites HTML or template files directly. Once Tag Manager itself is installed on the website you can begin adding “Tags” to your site. Tags can be used for many tasks such as trigger tracking in 3rd party services such as HotJar, sending information to Google Analytics, or even running a custom script. Each Tag has to be set to run on some triggering criteria, such as running on page load, or when the user has scrolled down a certain percentage of the web page. Additionally, websites can send information and trigger tags via the Tag Manager’s data layer.

Installation

To setup GTM you need to login to your Google account and then go to. Once you agree to the Terms of Service and Privacy policies, you’ll be asked to set up a new account. I would always set the container name to the website it is installed on for ease of management, especially if you know you’re going to be managing a large number of containers.

Once you create the Account and Container you’ll be given some snippets of code that should be placed on every page on your website. The first snippet needs to be in the <head> tag of every page and the second tag needs to be immediately after the opening <body> tag.

Tags and Triggers

Once the code snippets are installed you can begin setting up your different tags. Each tag performs some specific function like updating Google Ads Conversion tracking data or running a custom javascript. There are many pre-existing tags, so check the tag listing prior to writing any custom scripts

Each tag runs on a trigger. There are a number of triggering criteria available in Google Tag Manager ranging from a web page being viewed/loaded, to distance scrolled on the site, Youtube video interactions and even events defined in the data layer discussed below.

The Data Layer

The data layer is an object that passes information from your site to tag manager. It creates a convenient way for you to send data such as email addresses, order totals, order ids, and other information to the different tags on your site. You also use the data layer to create specific events that can be used to trigger tags. Using the data layer is optional. If you don’t define one on your pages, Tag Manager will create one for you.

A new data layer object is simple. It should be placed in the <head> tag of your page above the GTM container snippet:

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

You can send data to GTM simply by populating the array. If I was sending a purchase conversion for an affiliate tracking system of some kind it might look like:

<script>
dataLayer = [{
"event": "Purchase",
"purchaseAmount": "25.99",
"orderId": "12345678",
"date":"7-29-2018",
"email":"sometest@testing.com"}];
</script>

Notice that the dataLayer array contains a variable called “event”. This variable is used by Javascript event listeners in GTM. It can be used to trigger tags when specific event names are pushed into the data layer. The example above shows a static data layer snippet you would use when you wanted the event to occur when a page is loaded. You can also push events into the data layer dynamically as users interact with the website by using push to add data to the dataLayer array.

The basic syntax is:

window.dataLayer.push({'event': 'event_name'});

An example of the event “buttonClick” being sent to the dataLayer when a link is clicked:

<a href="http://www.mywebsite.com/buttonclicklandingpage.html" name="CTA Button" onclick="window.dataLayer.push({'event': 'buttonClick'});" >Call To Action TEXT</a>

Making Your Tags Live

Once you’ve setup your tags and triggers and added data layer information to your website you will need to publish the container to make the tags live. Prior to publishing it is always a good idea to test your tags. GTM provides a convenient way for you to do this. By clicking “Preview” in the upper right hand corner you can run any unpublished tags in your browser only.

You will be able to see that GTM is in preview mode as you’ll see this message inside of Google Tag Manager. You can also get a specific URL to allow other to view your unpublished GTM tags by clicking “Share Preview”.

Once you test your tags, simple press the “Submit” button in the upper right hand corner, and then “Publish”. Make sure to always put in note as to what you change when you publish as you may need to roll back the changes in the future if there are issues.

Once you press “Publish” your tags are live. I hope you’ve gotten a feel for how easy google tag manager makes it to manage tracking scripts and other 3rd party code snippets on your site.

Check out these top 3 Best web hosting services

Hostinger
$2.99 /mo
Starting price
Visit Hostinger
Rating based on expert review
  • User Friendly
    4.7
  • Support
    4.7
  • Features
    4.8
  • Reliability
    4.8
  • Pricing
    4.7
IONOS
$1.00 /mo
Starting price
Visit IONOS
Rating based on expert review
  • User Friendly
    4.5
  • Support
    4.0
  • Features
    4.5
  • Reliability
    4.5
  • Pricing
    4.3
Ultahost
$2.90 /mo
Starting price
Visit Ultahost
Rating based on expert review
  • User Friendly
    4.3
  • Support
    4.8
  • Features
    4.5
  • Reliability
    4.0
  • Pricing
    4.8

How to Install Google Analytics on Your WordPress Site

Want a better insight of your website stats? This is a step-by-step guide on ins
2 min read
Eliran Ouzan
Eliran Ouzan
Web Designer & Hosting Expert

How to Add a Google Analytics Tracking Code to Your WordPress Site

This is a how-to article which will have two different methods to enable Google
3 min read
Avi Ilinsky
Avi Ilinsky
Hosting Expert

How to Add Google Tracking Code Using PHP in cPanel

This how-to walks you through a step by step process to add Google tracking code
3 min read
Arvind Singh
Arvind Singh
Hosting Expert

How To Install Google Tag Manager On Big Commerce

How to install GTM on the Big Commerce shopping cart platform.
1 min read
Mark Armistead
Mark Armistead
Author
HostAdvice.com provides professional web hosting reviews fully independent of any other entity. Our reviews are unbiased, honest, and apply the same evaluation standards to all those reviewed. While monetary compensation is received from a few of the companies listed on this site, compensation of services and products have no influence on the direction or conclusions of our reviews. Nor does the compensation influence our rankings for certain host companies. This compensation covers account purchasing costs, testing costs and royalties paid to reviewers.
Click to go to the top of the page
Go To Top