Tracking Google Analytics Events with Google Tag Manager

Nowadays most sites use some tool for web analytics, those tools’ main purpose is providing statistics about your website

Nowadays most sites use some tool for web analytics, those tools’ main purpose is providing statistics about your website, for example:

  • How many people visited the site

  • Where they come from

  • What country are they from

  • What device they used for visiting the site

  • How many pages they visited

  • What were the most viewed pages

  • How long they stayed in the site

 

This kind of data is useful for generating reports about your web, and those reports can be used for improving your website and even your own business. But, what  is web analytics? What is a tag? What are Google Analytics (GA) events? What is Google Tag Manager (GTM)?

 

First, a couple of definitions:

 

Web Analytics

“Web analytics is the measurement, collection, analysis and reporting of web data for purposes of understanding and optimizing web usage.” (Stackoverflow)

 

Tag

“A tag is a snippet of code that sends information to a third party” (Google.com)

 

Google Analytics (GA)

Google Analytics is a Web analytics service that provides statistics and basic analytical tools for search engine optimization (SEO) and marketing purposes.” (Search Business Analytics)

 

GA tracks the user interactions with the help of a marketing tag, called GA Tracking Code or GA Javascript code snippet. This tag is usually placed on every page of the website.

 

Example:

 

ga('create', 'UA-XXXXX-XX', 'auto');

ga('send', 'pageview');

 

The  ga('send', 'pageview'); part is the actual tag, and it’s the most basic tag that GA uses. This tag sends the basic information of a visitor, like country, url visitor is viewing, user’s device and so, along with the event ‘pageview’ information.

In case of custom events, you have to code the actual tag for each event. Those events are the so called GA Events.

Notice that both the basic tag and custom tags must be hardcoded in the website, which means every time you need to add or update any tag, you’ll need a developer.

Google Tag Manager (GTM)

“Google Tag Manager is a tag management system that allows you to quickly and easily update tags and code snippets on your website or mobile app, such as those intended for traffic analysis and marketing optimization.” (Google.com)

 

Steps for setting GTM

 

Go to https://www.google.com/analytics/tag-manager/

 

Sign in a valid Google account.

 

Create an account in Google Tag Manager page.

 

Set a name for the account.

step 01.png

 

Choose a name for the container, which is the website URL. You can have up to 3 container per account.

step 02.png

 

Choose the type according to your application, ie for websites choose Web, ios for navite ios applications, and so.

step 03.png

 

Click on create. Now you have created a new GTM account with a container.

step 04.png

The install Google Tag Manager options shows the snippets of code for including GTM in your site, GTM provides instructions for doing so, just follow them.

 

You can check how many containers are set in your account.

 

step 05.png

Click on the container you want to add tags.

step 06.png

 

Each container has several components for managing the trackings. They are:

 

Tags

The tags for tracking user interactions in the website. They could be custom code for handling custom events too.

 

step 17.png

 

Triggers

They are the conditions for determining if a tag should be sent to GA or any other tracking tool. Usually a trigger is a set of rules for building the selectors of a tag.

 

step 14.png

 

Variables

This component has the built-in variables of GTM along with the user-defined variables. The built-in variables provide information about the dom, like CSS classes of clicked element, form data and so. The user-defined variables are custom Javascript codes that provide additional functionality to tags and/or triggers.

 

step 07.png

 

By default GTM has some built-in variables enabled. GTM has variables for click event, forms and other kinds of events.

step 08.png

 

You can enable or disable built-in variable according to what you need to track.

 

In case you need something custom, like storing a category name, or the GA ID you can create a user-defined variable.

 

Setup GA in GTM

 

In order to track the user interactions with GA you need configure the connection between GA and GTM. First you need to create 2 user-defined variables, one for the GA Id and the other for the GA  settings.

 

Create a variable for GA ID.

 

Click on the button new in the user-defined variables section. You’ll see the following screen with the available variable types

 

step 09.png

 

Click on the ‘Constant’ type. Next fill out the variable form.

 

step 10.png

 

In the value field enter the GA Id. In the left corner you can set the variable name. Once you filled out the form, click on the save button for saving your work.

 

Create a variable for GA Settings.

 

Click on the button new in the user-defined variables sections. You’ll see the same screen with the list of variable types. Choose the option Google Analytics Settings.

 

step 11.png

 

In the field tracking Id you have to enter the GA Id, it could be a string or a variable. It’s recommended to use a variable, but it’s not mandatory.

For selecting a variable click on icon at the right of the tracking id field, you’ll see the list of available variables.

step 12.png

 

Select the variable with the GA Id and save this new variable.

 

step 13.png

 

Create a Trigger

 

Click on the button new in the triggers section. You’ll see the following screen with the available trigger types

 

step 15.png

 

The trigger type indicates what and when user’s action fires the trigger, ie, a Page View will be trigger upon user lands in a page, and a click type will fire when user clicks on an element.

 

The current categories are Page View, Click and Other.

 

Page View

This kind of trigger will be fired when the user visits a page. There are 3 moments for checking the conditions of the trigger:

 

Dom Ready: the trigger will be checked after the event ‘DOM Ready’.

Page View: the trigger will be checked when the user visits a page.

Window Loaded: the trigger will be checked after the event ‘Window Load’.

 

Click

Triggers of this type will be fire when user click on an element. There 2 options for filtering the clicked element:

 

All Elements: the trigger will be fired when user clicks on any html element, ie, divs, spans, images or any other html tag.

Just Links: the trigger will be fired when user clicks only on a link. Clicks on other html tags will be ignored.

 

Other

Custom Event: the trigger will be fired when a custom event occurs. This is useful for tracking actions like playing a video during some time, scrolling the page or hovering an element.

 

Form Submission: the trigger will be fired when a form is submitted.

 

History Change: triggers of this type will be fired when user changes the navigation history, ie navigating to another page.

 

Javascript Error: the trigger will be fired when a Javascript error occurs. Notice that trigger will not catch the error and your page may stop working.

 

Timer: the trigger will be fired after some time, or it could be a scheduled trigger.

 

Youtube Video: triggers of this type will be fired when a Youtube event occurs, it could be start playing, video is complete, video is paused or resumed and so.

 

Once you have decided the trigger type click on it, and  you’ll see a screen with the trigger configuration, which depends on the trigger type. In this screen you can configure the trigger’s conditions, like CSS classes of clicked element, link’s URL and so. In this part you use the defined variables, both built-in and user-defined ones.

 

Usually a trigger needs a rule, and each rule is composed of a variable with the value of the event, a filter function and the value to compare with. You can as many rules as you need.

 

Example: you have to track every time a user clicks on the search button, and the button has the class ‘search-form__submit button’.  For doing so, you need a trigger of type click, and the trigger will be fired only if the clicked element has the class search-form__submit button. In this case the trigger only applies to some clicks, and it will use the variable ‘Click Classes’, the function ‘contains’ and the value would be search-form__submit button.

 

step 16.png

 

After you filled out the trigger configuration, save it and your trigger will be ready to use.

 

Create a Tag

 

Click on the button new in the tags section. You’ll see the following screen.

 

step 18.png

 

Click on the tag configuration. Next you’ll see the available types of tags.

 

step 19.png

 

In this widget you set the function of the tag, like sending data to a tracking tool, ie Google Analytics, or adding custom content to the page. After click on the tool or type of custom content, you will see a widget  the tag configuration.

 

Example: Now you have a trigger for clicking on download links, you need to create the tag. The tag will use Universal Analytics for tracking the user interactions, and it will track every time user clicks on a download link. In this case the tracking would be per event.

 

step 20.png

 

Next you configure the category, action and the label of the event, along with the Google Analytics configuration.

 

step 21.png

 

Next click on the trigger section. In this part you’ll use the trigger you created before.

 

step 22.png

 

Now you can review the tag before save it.

step 23.png

 

Make sure your settings are correct, choose a name for the tag and click on save button.

 

Now you have created a tag for your site, but is not available in you live site. You need to test it before making the deployment to live server.

 

Testing the Tags

 

For testing the tags, use the Chrome browser, it has an integration with GTM and you can check your changes before publish them to live site.  

You need to open the google tag manager and your site in the same browser. After you logged in Google Tag Manager site, click on the preview button. This enables a widget in your site’s page.

 

step 24.pngl  

 

Then go your site and do the user interaction your tag is supposed to track. Make adjustments as you need to.

 

When everything is correct, you can publish your changes by clicking on submit button. Now your tags will be available in the live site.

 
Amora's picture

Posted by Amora