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

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.

Image
t15

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

Image
t8

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

Image
t9

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

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.

Image
t6

Click on the container you want to add tags.

Image
t11

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.

Image
t22

 

 

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.

Image
t24

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.

Image
t4

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

Image
t14

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

Image
t10

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

Image
t5

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.

Image
t19

 


 

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.

Image
t21

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

Image
t18

Create a Trigger

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

Image
t13

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.

Image
t16

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.

Image
t3

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

Image
t2

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.

Image
t12

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

Image
t27

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

Image
t1

 

Now you can review the tag before save it.

Image
t17

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.

Image
t7

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.