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.