Tag manager

Getting to know Google Tag Manager

30.06.2020.

In this blog post, you will learn about basic concepts and features Google tag manager is offering to you.

Why should you use Google Tag Manager

Tracking user journey

Let’s take a simple user journey. Product page, cart, checkout and thank you page. By default, Google analytics will track just pageviews. Which is enough to visualize simple funnel and calculate drop off rates. But there is so much more, that is happening on those pages. Like how many users is seeing the product video, how deep do users scroll the certain page, which buttons are they clicking and so on. With Google Tag Manager we can easily set up events on different user actions and track them in our analytic system.

Integrations

Digital marketing is getting more and more complex. Everyone is using multiple analytics and advertising systems. With Google Tag Manager we can install all Google Analytics, Google Ads, Facebook Pixel, Hotjar, Twitter Linkedin, and literally every tag that exists. The beauty of the Tag manager is, that when we set up an event in the tag manager, we can send the same event in all of the systems we are using at once. Meaning that for example add to cart or scroll depth event is exactly the same thing in all of our systems. In a way, Google Tag Manager helps us to standardize the events across all of the systems we are using.

Power to do things without developer

Before the tag manager website tracking used to be complicated. For each event and system, you were using you had to ad small parts of the code on the website. At least a basic understanding of the code was required and for more complicated things one would need a developer help. Google Tag Manager enables you to do everything connected to the tags yourself. It is super easy to use and at the same time, you don’t interfere with the actual website code (most of the time). Although we recommend that, at least at the beginning, you make a consultation with your dev team before implementing anything.

What is Google Tag Manager?

Google Tag Manager is a tag management system (TMS) that allows you to quickly and easily update measurement codes and related code fragments collectively known as tags on your website or mobile app. Once the small segment of Tag Manager code has been added to your project, you can safely and easily deploy analytics and measurement tag configurations from a web-based user interface. (https://tagmanager.google.com/#/home)

Google Tag Manager is a system that puts you in charge. It is basically a dashboard. It watches what is going on your website. All the different behaviors flows and then based on what you trained it to do, it will take different actions. It can send conversion to Facebook pixel or Google ads, it can collect the data and send it to Google Analytics or it can fire script like Hotjar on certain pages.

Tags

Tags are segments of code provided by analytics, marketing, and support vendors to help you integrate their products into your websites or mobile apps. (https://support.google.com/tagmanager/answer/3281060?hl=en)

Tags are ways to tell google tag manager what to do. Basically tags are code snippets provided by Facebook Pixel, Google Analytics, Hotjar, Linkedin, Twitter, CRM, and other systems you are using. Instead of copying and pasting all of those tags on all of the pages of the website you can use Google Tag Manager to do that. Tag Manager offers a bunch of predefined tags and also custom HTML option for the rest of the tags.

Tags Google Tag Manager

For each action, you want to do with Google Tag Manager you need a different tag. For example, on the thank you page, you will have Facebook Pixel Page View Tag to track page views and another FB Pixel Conversion Tag to track conversions.

Triggers

The most useful way to think about triggers is when do you want Google Tag Manager to take action?

Tags fire in response to events. In Google Tag Manager, a trigger listens to your web page or mobile app for certain types of events like form submissions, button clicks, or page views. The trigger tells the tag to fire when the specified event is detected. Every tag must have at least one trigger in order to fire. (https://support.google.com/tagmanager/answer/7679316?hl=en)

In the previous chapter, we get to know the tags. Let’s say you have placed FB Pixel on the website using Google Tag Manager. When do you want FB Pixel to be fired? On every page view? Then pageview is the trigger. Whenever the pageview occurs tag manager will fire the FB Pixel Pageview Tag and send the pageview event into FB Pixel. The same way goes for any other system you are using. The trigger can be any action. Like when video si played at least 25% when a certain button is clicked or an item is added to the cart. So Tags are what you want Google Tag Manager to do and triggers are When you want Google Tag Manager to do it.

Triggers Google Tag Manager

Google Tag Manager has 4 types of triggers. Page view, Click and User Engagement are predefined triggers made for tracking user behavior. All of those are super useful. With the scroll dept trigger, for example, you can easily track how depth are users scrolling your pages. If you click on one of the triggers you can set up the conditions when to fire it.

Trigger Configuration Tag Manager

Multiple options like page path, click class or on-screen duration are available. Most of teh time you will probably use those predefined triggers. However, in case you will want to set up something more advance there is also Other segment where you can build triggers exactly the way you want.

Variables

Variable is information that Google Tag manager needs in order to do its job. Let us go back to the case of the Pageview. Pageview tag is telling the platform somebody is on the page. But how does the tag know on which page the user is? This piece of information is provided by variable. So in case of the Pageview, the variable tells the page path.

To a computer programmer, a variable is a symbol in code that can be used to represent a value that will change. A Tag Manager variable performs that same function. (https://support.google.com/tagmanager/topic/7683268?hl=en&ref_topic=3441647)

Multiple variables can be associated to the trigger or the tag. For example, when someone makes a purchase we are sending the variables like price, product name, quantity, and so on.

Built-in variables

From a high-level perspective, we have two types of variables, built-in and user-defined ones. You can find both types of variables if you navigate to Google tag manager na click Variables on the left side menu bar. To enable built-in variables you just have to check the boxes:

Enable built in Variable Google Tag Manager

This applies to standard things like following the page URL in the above image. With built-in variables, you get information on Pages, Utilities, Errors, Clicks, Forms, Videos, Scrolling, Element Visibility, and so on.

User-Defined Variables

This is the section where you can really customize things. You can, for example, grab information from the URL, read cookies or set up custom javascript to pull things from the data layer.

Custom Variables Google Tag Manager

For beginners, probably the most important custom variable is Google Analytics settings which are used to pass information to Google Analytics in all sorts of ways.

Go to Google Tag Manager, navigate to Variables, User-Defined variables, click “New” and click on the pencil in the top right corner of the popout that will show up. Now scroll to Google analytics settings and click on it. Insert your tracking ID, name the variable, and click save.

Google Analytics Custom Variable in Google Tag Manager

This is the place where you temporarily store the data so you can reference it later. In practice, that means Google Tag Manager is storing the eCommerce data like purchase long enough so you can send that data to all the different platforms like Google Analytics, FB pixel and CRM. Think about the Data Layer as of a place where you can temporarily store details.

Google Tag Manager functions best when deployed alongside a data layer. A data layer is a JavaScript object that is used to pass information from your website to your Tag Manager container. You can then use that information to populate variables and activate triggers in your tag configurations. https://support.google.com/tagmanager/answer/6164391?hl=en

Keys and Values

Data in the Data Layer is stored in “keys” and “values”. Price is the key and $29 is the value. Video action is the key and “play”, “paused”, “watched 15%” are the values. So the keys and values are the pieces of information you are interested in.

Data Laver Key Value in Google Tag Manager

Preview Mode

This is the Google tag manager debugging feature. We used the preview in the data layer image above. To get it click on the Preview Button in your Google Tag Manager. You should get Orange Alert notifying you, that you are in the preview mode. Then refresh your website.

Preview Mode Google Tag Manager

So preview is a way for you, to check and make sure that everything you just did in tag manager is working. That all triggers, tags, and variables are working.

In the preview mode top bar, you can navigate between Tags, Variables, Data Layer, and Errors. Now you have to perform different actions on the website and when you do so, you will see how different tags are fired and how the data in data layer changes.

Page Preview Mode Google Tag Manager

Further Reading

Setting up Google Analytics Tracking with Google Tag Manager