Why Google Tag Manager exists?

Google Tag Manager (also known as GTM) is a free tag management solution provided by Google. Through this online tool, you can reply and manage various marketing and analytics tags on a website or mobile app. So, why Google Tag Manager exists? Read this to learn why, and to know how to start using it for your marketing strategies!

Before even answering the initial question, we shall begin with the following question:

What is Web Tracking?

Web tracking is equal to monitoring behavioral events from your users. Its main goal is to collect data from your market/audiences for later measuring, so decisions can be made.

Why is Web Tracking important?

It helps you to create strategies to get a benefit directly from your business.
Imagine you sell gamer keyboards and you sell X keyboards a month, but you want to sell more. So, you need an analysis of your market, eg:

• Who is your primary buyer?
• Where do you sell more (places)?
• What is the average age of your buyers?

All the data collected through web tracking helps us to answer the aforementioned questions.

Web Tracking helps you know how many keyboards you sold the past month in Mexico to gamers between the ages of 12 and 25 during holidays (super specific). Or, maybe you want to do something more generic or general about how many keyboards you sold in Mexico.

If you have data, you have great power (I’m feeling like Peter Parker’s uncle). In other words, you can make decisions about your business to explode your sales or maybe to expand your product or for any reason you want.

But, if we are talking about great power, what is great responsibility then? Well, users’ information.

Nowadays many platforms offer this kind of tooling service to collect data and a dashboard to visualize the measured data of our audiences or market. Here you have a list of some of them.

• Amplitude
• Google Analytics
• Facebook Pixel
• The Snap Pixel
• TikTok Pixel
• Hotjar

etc…

My opinion about the web tracking in the codebase of any project

Well, all services require a setup step (minor snippets of code). This is where things get knotty.

Some companies love tracking, that is why they add a lot of snippets into their codebase. But, in my opinion, this pollutes the codebase (frontend or backend).

Why? Imagine it is the first time you see a snippet of code related to tracking. Then, you will notice it and immediately later you will spend some time figuring out what it is or what it does. So, that means you would waste time and a little bit of cognitive load.

Web tracking code is like the black sheep in a codebase since it does not contribute real value to the codebase. Furthermore, its management is a pain in the neck when it is a lot.

Finally, here it is when Google Tag Manager (aka. GTM) enters the room.

Why is Google Tag Manager an option?

Google Tag Manager helps you isolate all the pixels/tags/snippets of your code. It also allows you to manage them out of your project (out from the codebase or app).

Using GTM you could add Tags through UI, instead of adding each snippet separately via code.

Also, through GTM you can edit, update, pause, and remove your tags. And, you could even keep a history of those changes (yes, like git). All these things represent a real advantage over the traditional way when setting up your snippet in a project’s codebase.

How can I start with GTM?

Before continuing, log in to your browser using your Gmail account.

Step 1.- Create a container

1. Go to Tag Manager webpage and click on “Start for free” button
   

2. Find and click the “Create Account” button
   

3. In the next form fill out all the fields and click on the “Create” button
   

4. Accept terms

5. That’s it, you would have created a GTM container!

Step 2.- Install the GTM container on your website/my app

1. After creating the container you should see your Workspace (UI) and a modal on it with 2 snippets of code similar to the samples below.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({&#039;gtm.start&#039;:
new Date().getTime(),event:&#039;gtm.js&#039;});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=&#039;dataLayer&#039;?&#039;&l=&#039;+l:&#039;&#039;;j.async=true;j.src=
&#039;https://www.googletagmanager.com/gtm.js?id=&#039;+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,&#039;script&#039;,&#039;dataLayer&#039;,&#039;GTM-XXXX&#039;);</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

1. Go to your index.html or layout.html on your app/website and paste it following the instructions.

2. That’s it, now you can test your installation in many ways. I suggest using the chrome extension “Tag assistant”, you should see something like this if you visit your website.
   

And there you go, GTM up and running!

BTW, I suggest learning this stuff:

1. Tags, Triggers, and Variables GTM concepts
2. How to use the Data Layer
3. How to integrates the gtag (global tag manager) using the GTM

If you want to know more about Google Tag Manager or share views and opinions, just let me know in the comments below.

I will always be happy to help you and get new opinions from all over the world.

Thanks for reading!