Presentation of Google Tag Manager

#Google Tag Manager: what is it ? What is it not ?

Google Tag Manager is a tag management system. It allows you to easily create, maintain and deploy tracking code on your website. Even if Google presents this tool as something allowing marketing team to work without developers, we'll see that it's not exactly the case. Or at least it isn't if you don't have any technical background.

Thanks to GTM you'll be able to:

• collect and send tracking data to multiple tools such as Google Analytics or AppsFlyer
• add some conversion tracking for your advertising campaigns (Facebook pixel, Google Adwords, etc.)
• add some new functionalities to your website

And all this without changing your source code.

There is often a confusion between GTM and Google Analytics. They are both totally different even if they work perfectly well together. Google Tag Manager is more like an orchestrator that will help to add Google Analytics on your website. You can totally add GA without using GTM but GTM will ease this implementation and the sending of data.

#Why should I use Google Tag Manager ?

To answer this question, we'll simply through a pros and cons list on using GTM in your project:

Pros:

• you'll group all your third parties on a single tool which will ease their maintenance
• GTM will offer you a lot of premade integrations that will save you a lot of time
• your integrations will be loaded asynchronously which may improve the performances of your website
• addition / modification / deletion of your third parties will be done without deploying any update of you source code
• possibility to test your changes before publishing them

Cons:

• it can be time consuming to migrate all your third parties to GTM
• as already mentioned, you'd better get some technical knowledge to master GTM

#How can I add Google Tag Manager on my website ?

Before going any further there is something really important to mention: GTM is free ! There is a paying version: GTM 360 but you'll need it only if you're in a very big company and specific needs. You can find the differences between the 2 versions on Google's website.

As with most of the Google products, to use GTM you'll need to get a Google account. Then you just have to go on GTM's Homepage. Here, click on "Create Account" and fill the account creation form. In this article I'll present you only the part related to the Web but you have to know that it's possible to use GTM on iOS or Android applications and also on AMP pages.

One your account will be created, you'll be asked to add 2 pieces of code on your website. As I already said, there is also a need for having a developer ;).

These are the only pieces of code (except if you want some really specific tracking) that you'll have to add in your source code. Everything else will be done directly through the GTM interface.

#Presentation of the interface and of the functionalities

#Container

When you've created your account, the container has been automatically created. Usually, it's linked to your website. Every container has a unique ID that looks like GTM-xxxxx and you can find it also in the small piece of code that you've added on your website. You can have multiple containers on your account.

#Tags

A tag is a small piece of code that will be executed on your website if the trigger(s) attached to it are triggered. GTM offers by default a lot of premade tags that you'll just have to configure to be able to use them. That said, you have to know that it's totally possible to your own code directly through GTM interface when the premade tags don't fill your needs.

Here are some examples of tags that you can find on GTM:

• Google Analytics: Universal Analytics
• Google Ads Conversion Tracking
• Twitter Universal Website Tag
• Facebook Pixel

#Triggers

As mentioned before, triggers are linked to tags. They indicate when a tag will be fired. Here again, GTM offers multiple triggers already configured that you'll just have to attach to your tags. You can also use triggers to indicate when a tag shouldn't be executed. This is called an exception.

Some examples of triggers:

• Page View
• DOM Ready
• Click on a link
• Form Submission
• Scroll Depth

#Variables

Variables contain values that triggers and tags will be able to use. GTM offers some variables such as the URL of the page but globally you'll create your own variables; especially if you want to send custom data from your website to GTM.

A classic example is to save your Google Analytics ID in a variable that you'll use every time you'll use Google Analytics on your website.

#dataLayer

dataLayer is a JavaScript array that you can access directly from your website. This is thanks to this object that you'll be able to send custom data to GTM. All the related API is available in the documentation but most of the time you'll only use the push method to communicate with GTM.

Here is an example that you can also find in the documentation

dataLayer.push({
  'color': 'red',
  'conversionValue': 50,
  'event': 'customizeCar'
});

Then it's up to you to collect / link those data on GTM. For example they can match a trigger that will fire a tag that will send the data to Google Analytics.

It's not mandatory but usually we send an event attribute because it can be easily linked to the "Custom Event" trigger. We'll go through this with more details in the examples part of this article.

#Preview, debug and publish

When you're doing your modifications, by default those modifications are not visible on your website. To test them, you can activate the "Preview" mode (you can access it in the top right corner of GTM interface). When this mode is activated, you'll just have to go back on your website and refresh the page. Normally a banner at the bottom of your page should appear. It'll contain all the information related to your tags, triggers and variables of your container.

For each one you'll be able to check in real time their value and why they have been fired or not, etc. If you don't see your modifications, it's possible to "hard refresh" the preview mode directly from GTM interface.

When all your modifications suit you, you have to publish them. To do so, you have to click on the "Submit" button (top right corner of the GTM interface). You'll be asked if you want to "Publish and Create Version" or "Create Version". A version is a saving of your container. The number attached to your version increments itself automatically every time you're creating a new one.

There is only one version that can be "live". The live version is the version that is published on your website. Finally if the live version doesn't match your needs anymore, there is also the possibility to publish back an old version.

#Workspace

If you are multiple people working together at the same time on GTM, it can quickly become complicated to follow your modifications. To prevent this, you can create workspaces. Thanks to this, each one of you will work on his own workspace and it's when you'll want to publish it that the other workspaces will be notified that changes have been made.

By default the free version of GTM offers up to 3 workspaces.

#Some examples

#Adding Google Analytics

Before going any further, to do this example on your website you'll need to get a Google Analytics account and find it's Tracking ID. It should look like something like this UA-XXXXXXXXX-X. And of course GTM scripts should be present on your website.

If all this is ok you can go on your GTM interface under the submenu "Tags" and click on "New". A new interface should show up. Give your tag a name (eg: "Google Analytics - main tag"). You can click on the Tag Configuration part and select one of the Featured tag called "Google Analytics: Universal Analytics".

By default this tag will track all the pageviews of your website.

In the field "Google Analytics Settings" select "New Variable". Give it a name (eg: "Google Analytics ID") and your Google Analytics Tracking ID in the corresponding field. As you can see, GTM suggests you create a variable to save this value. Thanks to it, you'll be able to use it again for some others GA tracking code.

Save it. The variable is now visible in our tag.

For the Triggering part you can choose the "All Pages" trigger that already exists. It'll fire our tag on all the pages of our website. Your final configuration should look like this:

Now we can test that Google Analytics is correctly loaded on our website before publishing it. To do so, click on the "Preview" button in the top navigation bar on GTM interface. And go back on your website, refresh the page. You should see a banner appearing at the bottom of your page with the list of the fired tag and "Google Analytics - main tag" should be there.

That's perfect we can now publish our changes. First of all, you can quit the preview mode from the GTM interface. Now click on the "Submit" button. In the new interface, make sure the "Publish and Create Version" is selected and provide a name and a description to your new version (it's not mandatory but it's very useful to log it).

Click on publish and that's it, all our changes are live and you can now track all your pageviews on Google Analytics. And we've done all this without changing anything in our source code.

#Manually send an event to Google Analytics

In this example, we'll see how we can manually send an event to Google Analytics. By manually I mean that we won't use one of the premade Google Analytics tag that GTM offers us. The main idea is to see how we can use the dataLayer object to send data to GTM and how we'll send them back to GA.

Let's imagine that we have a newsletter subscription form located at the bottom of the page and we would like to track the submissions of this form. To do it, we'll send data to GTM thanks to the dataLayer. Here is how our submit button could looks like:

<button onclick="dataLayer.push({event: 'form_newsletter', eventValue: 'submitted', location: 'footer'})" type="submit">Subscribe</button>

When we'll click on the button, 3 information will be sent to GTM:

• event which will help us to link our click to a Trigger in GTM
• eventValue will allow us to know which kind of event it is
• location to know which form has been submitted

Except the event property which is part of conventions, all the other properties are free so you can name them as you want.

Now in GTM we'll create a trigger that we'll link to our event. To do so, in the submenu "Triggers" create a new one that we'll name "Trigger - Newsletter". For the Trigger Type it'll be a "Custom Event" and its Event name will be form_newsletter (it corresponds to the value sent in the dataLayer). We can save it.

Our trigger is now created. We have to link it to a tag, collect the data from the event and send them back to GA. First of all to be able to collect the data we'll need to create the corresponding variables. Go in the "Variables" submenu and create 2 new variables of type "Data Layer Variable". Their title and Name will correspond to what we're sending: eventValue and location.

In the "Tags" submenu, let's create a new tag that we'll name "Google Analytics - newsletter". For the type of tag we can choose "Custom HTML" which will allow us to put the following code that will create the GA tracker and send an event to GA with the collected data:

<script type="text/javascript">
  ga('create', 'UA-XXXXXXXXX-X', 'auto'); // The tracking ID is hardcoded here because the "Google Analytics ID" variable created in the previous example can't be used outside of a preconfigured tag.
  ga('send', 'event', 'Newsletter', '{{eventValue}}', '{{location}}');
</script>

The linked trigger is the one we've previously created: "Trigger - newsletter".

Once the tag is saved we can now test the result thanks to the preview mode. Let's click on the submit button of our newsletter form.

We can see that the event is correctly fired. We can then publish our now version of the GTM container.

This example is a bit complex but its purpose was to explore how we can use the dataLayer to send data and to collect them in GTM. A better approach would have been to collect that data thanks to a preconfigured GTM tag.

#Conclusion

As we've seen previously Google Tag Manager is here to ease our tag integration. Personally what I really like with GTM is that we are gathering all our third parties in a single location. It's then simpler to control and use them.