[ad_1]

The power of Google Tag Manager for webmasters and marketers is immense. This I also said very detailed in the article how to install Google Tag Manage, if you are not sure, you can read it again.

The power of Google Tag Manager is immense, but hidden within its power must be referred to as variables. It is the variables in Google Tag Manager that help create triggers and create tags with a flexible level of customization. Especially, it also helps to improve performance, save time if you learn in depth with JavaScript variables.

In this article, I will help you better understand variables in Google Tag Manager so that you know what the function of the variables is and which one to use appropriately and correctly.

Variable types are available in Google Tag Manager

1. Integrated variables (available in GTM)

By default, Google Tag Manager will have the most commonly used variables and the most basic variables available. However, it only has some variables enabled, so if you want to use more, you must enable it.

To see which built-in variables are enabled you access the item Out and look in the section Integrated variable as follows:

To activate available variables, click on the button Configure and tick the variables you want to activate as follows:

Below I will explain in detail the use of each variable so you know which variable to turn on to serve your purpose.

Utilities

Event: Returns a string containing the name of the key "event" in dataLayer.
Environment Name: Returns the environment name being previewed (via the shared preview link). You can see the information in the section Environment in the tab Administrators.
Container ID: Returns the string containing the container ID (GTM-XXXXXXX)
Container Version: Returns the string containing the current container version information.
Random Number: Returns a random number.
HTML ID: Returns the notification of the identifier of the custom HTML tag. Used in the same card sequence.

Error

Error Message: Returns the string containing the error message sent by the JavaScript Error trigger setting.
Error URL: Returns the string containing the URL where the error was sent by the JavaScript Error trigger set.
Error Line: Returns the string containing the number of lines in the file where the error was sent by the JavaScript Error trigger set.
Debug Mode: Returns true or false depending on whether the user is in debug mode or not.

Number of clicks

Click Element: Returns the string containing the HTML element where the click occurred.
Click Classes: Returns the string containing the class of the DOM element where the click occurred.
Click ID: Returns the string containing the ID of the DOM element where the click occurred.
Click Target: Returns the string containing the value in the attribute target.
Click the URL: Returns the string containing the value within the attribute href or action.
Click Text: Returns the string containing the value in the attribute textContent / innerText.

Form

Form Element
Form Classes
Form ID
Form Target
Form URL
Form Text

All variables for this form are the same as those for Clicks. So you can understand the same as above.

History

New History Fragment: Returns the string containing the URL of the page after the historical event.
Old History Fragment: Returns the string containing the URL of the page before the historical event.
New History State: Returns the string containing the new historical state after the historical event takes place.
Old History State: Returns the string containing the historical state before the historical event takes place.
History Source: Returns the string describing the event that began to change history.

Video

Video Provider: The service provides the monitored video. Currently only supports Youtube.
Video Status: Returns the status of the video. Maybe start, pause, buffering, progress or complete.
Video URL: The value is the URL of the video on Youtube. Example: https://www.youtube.com/watch?v=5V39cdKw9fc
Video Title: The value will be the embedded video title.
Video Duration: Total video duration is in seconds.
Video Current Time: Timeline is measured in seconds at which the event in the video takes place.
Percent Video: An integer (0-100) representing the percentage of video played at the time of the event.
Video Visible: Value is true if the video is shown in the watch window and false If the video is not displayed in the viewing window.

Roll

Scroll Depth Threshold: The value is a number that indicates the mouse scroll depth for the trigger to be activated. An integer (0-100) with a percentage threshold, a numeric value that represents the number of pixels with a threshold of pixels.
Scroll Depth Units: Is pixel or phần trăm depending on the type of threshold the trigger is tracking.
Scroll Direction: Is the direction cuộn dọc good cuộn ngang depending on which direction the trigger is following.

Display

Percent Visible: A numeric value (0-100) indicating the visibility of the selected element when the trigger is activated.
On-Screen Duration: A numeric value indicating the number of milliseconds of the display of the selected element when the trigger is triggered.

Above are all integrated variables included in Google Tag Manager. Hopefully with detailed explanations will help you better understand the use of each variable.

In addition, you can refer to more official information from Google according to the documentation here.

2. User-defined variable

In addition to the built-in variables of Google Tag Manager, you can also create your own custom variables with more advanced functionality.

To create your own custom variables you access the variable management. Then click New in section User defined variable as follows:

Next, click on Select the type of variable to start setting ... to select the appropriate variable types.

Here, there will be many types of variables for you to choose. However, what is the function of each variable and which one to suit the needs?

If you do not know, then find out according to the information you provided below.

Directional

HTTP referrer: The elements of the URL that took the user to the current page. Although there is an integrated variable in Google Tag Manager, you can create additional if you want to display different elements of the URL.

The components of the URL can be selected as follows:

Full URL: Is the whole full URL. For example: https://nguyenhung.net/huong-dan-cai-google-tag-manager.html?utm_source=google
Protocol: Is the currently used protocol of the URL. For example: http or https
Host name: Is the server URL without the port number. Can tick the item Remove 'www' to remove www from the hostname.
Gate: The port number the URL is using. 80 with http or 443 with https if the URL doesn't have a port number.
Path: Returns only the path name in the URL.
Query: Returns the entire query parameter string.
Segment: The value of the URL does not contain #

URL: This variable allows parsing, the composition of the current page URL. Selectable URL elements are the same as those of the HTTP Referrer above.

Page variation

JavaScript variable: The JavaScript variable returns the value from the global JavaScript variable you specify. These are NOT the same as custom JavaScript variables. Use this type of variable if you can find the value in the source code of the page as a generic JavaScript variable.
Variable data layer: The explanation of this variable is quite long and I do not know how to explain it easily. You can read information about data layer variables here.
First-party cookies: Is the value of the first cookies of the first party with the domain name that the user is using.
Unknown value: This is a simple variable for the purpose of returning values undefined of Javascript.
Custom JavaScript: This is a very powerful variable if you know how to take advantage of it. The return value is the result of JavaScript.

Page elements

Turn event automatically
The visibility of the element
DOM element