How to set up event tracking in Google Tag Manager using dataLayer

The data layer or dataLayer is an array of JavaScript objects and variables that contains certain information about user actions on the website. DataLayer serves as a connector between the site and the Google Tag Manager container installed on it — it transmits information about the actions taken. Such a transfer is needed to set up their tracking. All events can be tracked in real time in the GTM debugger by enabling the preview mode:

If you have dealt with the Tag Manager, then you have probably met dataLayer and even used it without knowing it.

All built-in triggers are configured for events that the data layer «catches». Page loads, clicks, form submissions, and other interactions enter the dataLayer and fire triggers.

There are 4 main groups of triggers in Tag Manager:

• page view (for example, 2.3);
• clicks (4);
• user interactions (eg Form Submission 5);
• other (for example, User event 6).

** gtm.js (1) —javascript library. If this file does not exist, your Tag Manager will not work.

If everything has already been done for you with the first three groups — take it and use it, then the «Custom Event» type trigger requires special attention.

In this article, I’ll show you how to use the dataLayer to track the untracked using the dataLayer.push() method and the programmer.

There are events that take a lot of time and nerves to track. For example:

• sending the application form, provided that all fields are filled in correctly (we exclude the possibility of form validation);
• clicking on the «Add to cart» or «To favorites» buttons, subject to the selection of a specific product parameter or authorization on the site.

In such cases, the standard triggers — submitting a form or clicking — do not quite work. Yes, they track events, but not all of them are relevant: if the form fields are filled out incorrectly, the «Form Submit» event when clicking on the «Submit» button is not equal to the submitted form; clicking on the «Add to Cart» button without selecting a product parameter does not mean that it has been added to the basket.

What to do? You can independently set up the transmission of an event about the correct form submission or button click, using the dataLayer.push() method. It is necessary to embed a specific command in the element code.

The simplest syntax to set up an event looks like this:

where, ‘event’ – data layer variable,

‘event_name’ -the name of the event you specified.

For example, to customize the click event of a button, you can modify the button link itself by adding a push() statement to it:

And when submitting the ajax form, call push() to the success JS section of the form handler:

In the examples above, ‘onclick’ and ‘onsubmit’ indicate which user interaction with the element to send the event.

Using the push construct, you can pass additional parameters. To do this, you need to add variables to dataLayer.push(), the names of which you can specify yourself by enclosing them in quotes. For example, ‘eventAction’, ‘eventCategory’, ‘name’, ‘color’, ‘price’, etc. In this case, the syntax for sending an event will look like this:

Implementation on the example of tracking the «Participate» form

Issue

Forms shown in this article, excluding those named in the title. It is not possible to track the submission of a request for a specific promotion corresponding to the GTM «Form Submission» trigger, because the forms have the corresponding class and ID. The CSS selector only catches the name of the first form in the list, no matter which one is open.

Solution

We set up sending an event to the dataLayer, when submitting the form, indicating the name of the promotion in the eventAction variable.

Implementation

1. Setting up sending an event to dataLayer.

We draw up a technical task for the programmer, containing:

“If the fields are filled in correctly and the forms are successfully submitted, it is necessary to send an event to the data layer:

In the specified eventAction variable, you need to pull the name of the action:

After correct injection, in the GTM debugger on the dataLayer tab, the following data will be displayed when submitting the form:

It is important to check in detail the execution of the push() operator, the compliance of all parameters and their values.

2. Setting up event tracking in Google Tag Manager

 2.1. Create a variable that passes the name of the stock:

Type — Data layer variable.

The variable name — eventAction:

2.2. Create an event activation trigger:

Trigger type — Custom event.

The name of the event is the value that is passed in the ‘event’ variable. In our case «zayavka-aktsii-success».

Activation condition: the ‘eventAction’ variable contains the name of a specific form, for example, «Profitable start» (in Ukrainian «Вигідний старт»).

Thus, the trigger will fire when submitting the form, the title of which contains «Visible start».

2.3. Create a tag that will fire on a given trigger activation condition and send a form submission event to Google Analytics:

Tag type — Google Аналитика – Universal Analytics.

Tracking Type — Event.

Set the activation trigger created in the previous step.

Similarly, you can set up tracking for other forms on the page.

Note. It is important to carefully set up variables and triggers, using the names of the parameters and their contents in exact accordance with similar elements in the code from the technical task.

Advantages of the dataLayer.push() method

1. The ability to track every interaction a user has with your site, from viewing an element to submitting a form.
2. You can pass additional parameters, such as the name of the form, the price of the product, and anything else you need to track.
3. The name of the event and other variables is set by you yourself. At the same time, it is desirable that the name be clear to everyone who has access to the settings and analytics data.
4. The method has a simple syntax, which simplifies the writing of technical specifications and the implementation itself. Even for an inexperienced programmer, the implementation will be fairly easy.
5. It is easy to check the correctness of the construction using the Google Tag Manager debugger.
6. Simple and intuitive custom event tracking setup using the basic functionality of Google Tag Manager.

In this article, I described one of the ways to work with dataLayer – the dataLayer.push() method. In addition to sending simple single-line events, the data layer can collect and transmit transaction data; intercept data from third-party systems to set up tracking interactions with their elements. For example, tracking chat events and Bitrix 24 form submissions or tracking Contact Form 7 from WordPress.