What is GTM?

Google Tag Manager (colloquially known as GTM) is a script (or tag) management system that allows you to install tags, scripts and other helpful snippets of codes to your website directly.

One of the main reasons to use GTM is that you’ll no longer need to rely on your developer to install code to your site or waste time going to the backend and doing it yourself. Once you install tags, Google Tag Manager has a preview option, which will allow you to make sure your tags are being “transmitted” correctly before making any changes on your website.


How Uiza started with GTM?

As the mentioned above, as Data Engineers, they must to replied too much on the developers to set up their combo of change. The first time we used GTM in 2015, we have a list of 10 pages to define the Tag name, tag purposes, tag location, etc then send it to out developers, then they took one day or more to implement it to the website.

However, thing has changed since, we start implementing with the Header & Body.

Step 1) Register an GTM Account (https://tagmanager.google.com/)

Step 2) Set up a Container

  • If you need to setup the tracking type difference for per Website, you can create many containers. Otherwise, you can use only one container for all your website
  • You can choose the container for website - ios - android - amp

Step 3) Publish the container for the first time before you install the script

  • If you don't publish for the first time, you might get stuck when you deploy the script on your site. (we got a production error when the website loads the script of container, it is still not published but return the Error 404 instead. Thus our website can't load anything else)

Step 4) Install GTM to your website by only insert below script to your <head> and <body>

What do we have on GTM?

(*) Variables : a variable is a storage location in the computer memory. Variable has  “name” and “value”.

GTM provide 2 types of Variable

  • Built-in variables : they are available for commonly used tag and trigger configurations. Once enabled, they can be used as if user-defined variables.
  • User-Defined Variables : where user can create their own variables, such as GA-ID, URL, etc

(*) Trigger: a trigger tracks 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 transmit when the specified event is detected. Every tag must have at least one trigger in order to transmit data.

(*) Tags: where you can set-up your tracking goal by choosing the Variables and Trigger.

Version & Preview Mode

  • Version: GTM allow you to set up version & provide permission to whose right to publish. If a version is not approved for publish, changes won’t effect on your website.

Preview Mode: helps Data Analyst can track if the event track function as they are supposed to before approve the change. When Preview mode is on - by press the “Preview” button beside the “Submit” button - you can see what’s going on with your tracking set up. Every action on your site will be record & display all the information of Trigger, variables has been set.


How we exercise GTM in UIZA

After the script deployment is successed on your website, we begin with our first track

  • Objective:

a) Tracking all the GUI pages

b) All the clicks user execute on our website

  • Definition

a) Because we’re working with 5 website at the same time, which is 5 difference containerID, we make a Rule for the tracking group

We started by get 2 alphabets of event Objective and combine with the website name

For example: The Objective is “Page View”, and the Website Name is “GUI 3.0”. Therefore the Tag Tracking group should be “PV_GUI3.0”

b) After Definition phase , we started to setup

The example with Click Tracking objective on uiza.io (CT_uiza)

Step 1) Set up the Variables type

While GTM allow us to set many type of Click (such as Click Classes, Click Element, Click ID…) , our website is based on Node.js, so our classes is the same for difference elements.

After trying many times, we found that we can’t use which Click ID, classes. Because our website didn’t have those parameters, we tried with Click text and combine the definition with page URL

At Variables Menu , choose new Built-in Variables Clicks = {{Click Text}} & set up an User-Defined Variables type Google Analytics Settings = {Tracking ID}}

{{Click Text}} : this will get the Click text. If you have a "Quick Start" Button, the {{Click Text}} value = “Quick Start”

{{Tracking ID}} : GA ID which we want to receive the data

Step 2) Set up the Trigger

BWe’re targeting on Click detected by Element. At the Trigger Menu, we choose the Trigger Type = All Elements .

After you set the Trigger, every time the Trigger occur, the data will be recorded.

(*) You can set the trigger in the meantime you set up the tag , GTM allow you to perform multiple tasks in 1 screen.

Step 3) Set up the Tag

After finish the Variables and Trigger, you can create a Tag. With this Objective, we want to tracking all click of our user ( include Visible Click & Invisible Click)

  • Visible Click : track what happens when user performs a real-click such as button, menu
  • Invisible Click : track what happens when user performs an mouse click on your texts, or a space on website.

Step 4) After finish your configuration, you can publish the changes and see how it work in your Production. (use the preview mode to make sure your data is correct before approve it on production)

We integrate our product with Universal Google Analytics to get the Data & Tracking. However, GTM also allow us to integrate with many other tools.


GTM in action

Now that we have configured GTM successfully, we can start tracking user behavior in real-time on GA, data should be flowing in front of us.

  • The picture show how many online user on our testing site
  • The picture show how many action (click) occur on our website to find what feature user takes interest in our product.

Conclusion

Instead of wasting your time on editing in your lines of code, GTM save a lot of time while only require to install one time, along with experiments on new tracking methods can be exercised. Currently, Uiza only use the Cookie to define an User but a better approach should be the unique ID generated from Uiza for user's definition

  • GTM allow to get the trigger the event & popup the custom code , this is quite a good function that can keep the retain on website before that left, but this need some effort on developers
  • The disadvantage after a short time is that some Tag name changed on GTM, but the data on GA still not changed, so it made some confusing when tracking the data.