Variables in Google Tag Manager are named placeholders for values that are populated when code is run on your website or mobile app. Tag Manager provides a set of predefined built-in variables. Built-in variables handle most needs for tag and trigger configurations. You can also create user-defined variables for web pages or mobile apps to suit specific requirements that might not be covered by built-in variables.
In this section, we mainly talk about built-in variables. Built-in variables are available for many of the most commonly used tag and trigger configurations. Google Tag Manager built-in variables provide 9 types of 44 variables.
Once enabled, they can be used just like user-defined variables. On Google Tag Manger, click Workspace> Variables> Configure, as shown below:
Then a page pops up on the right for you to tick, and tick whichever variable you want.
Enabling built-in variables is very simple.
Pages
The Pages type has 4 built-in variables:
We can simulate the test on the actual page, click the Preview in Google Tag Manager, and then search in Google and click into the blog, as shown below:
You can see that the ones marked in red in the figure are the four built-in variables in Page.
Page URL
Page URL: Provides the full URL of the current page. Assuming you visit https://www.bbccss.com/tag/adobe-launch, then the Page URL is https://www.bbccss.com/tag/adobe-launch. As shown in FIG.
Page Hostname
Page Hostname: Provides the hostname portion of the current URL. Is the host name, the domain name of the website, if you visit https://www.bbccss.com/tag/adobe-launch, then the host name is http://www.bbccss.com. As shown in FIG.
Page Path
Page Path: Provides the path portion of the current URL. It is the path of the URL in the server, if you visit https://www.bbccss.com/tag/adobe-launch, then the path is / tag / adobe-launch. As shown in FIG.
Referrer
Referrer: Provides the full referrer URL for the current page.Indicates which page the user came from, and the Referral here is https://www.google.com/. As shown in FIG.
You can also type in your browser: JavaScript: alert (document.referrer) after you visit the website:
Then Referral is displayed:
This is Referral. Referral is passed through the browser. This is also the principle of traffic tracking.
Utilities
The Utilities type has 6 built-in variables:
Event
Event: Accesses the event key in the dataLayer, which is the name of the current dataLayer event (e.g. gtm.js, gtm.dom, gtm.load, or custom event names).
Environment Name
Environment Name: Returns the user-provided name of the current environment, if the container request was made from an environment “Share Preview” link or from an environment snippet. For the built-in environments, it will return “Live”, “Latest”, or “Now Editing”. In all other cases it returns an empty string.
This is not practical. It can’t be found in the Preview, so you can’t use it.
Container ID
Container ID: Provides the container’s public ID. Example value: GTM-PHXQ69M
Container Version
Container Version: Provides the version number of the container, as a string.
Random Number
Random Number: Returns a random number value.
HTML ID
HTML ID: Allows custom HTML tags to signal if they had succeeded or failed; used with tag sequencing.
Errors
The Errors type has 4 built-in variables:
Error Message
Error Message: Accesses the gtm.errorMessage key in the dataLayer, which is set by JavaScript Error triggers. This will be a string that contains the error message.
Error URL
Error URL: Accesses the gtm.errorUrl key in the dataLayer, which is set by JavaScript Error triggers. This will be a string that contains the URL where the error occurred.
Error Line
Error Line: Accesses the gtm.errorLine key in the dataLayer, which is set by JavaScript Error triggers. This will be a number of the line in the file where the error occurred.
Debug Mode
Debug Mode: Returns true if the container is currently in preview mode.
Clicks
The Click type has 6 built-in variables, These will only be used for targeting when setting click events.
First look at a few examples:
Example-1：
Example-2：
Example-3：
Did you find the pattern? These variables are attributes of the click position, such as ID, Class, Text …
Click Element
Click Element: Accesses the gtm.element key in the dataLayer, which is set by Click triggers. This will be a reference to the DOM element where the click occurred.
Click Classes
Click Classes: Accesses the gtm.elementClasses key in the dataLayer, which is set by Click triggers. This will be the string value of the classes attribute on the DOM element that was clicked. As in Examples 1 and 3.
Click ID
Click ID: Accesses the gtm.elementId key in the dataLayer, which is set by Click triggers. This will be the string value of the id attribute on the DOM element that was clicked. As in Example 3.
Click Target
Click Target: Accesses the gtm.elementTarget key in the dataLayer, which is set by Click triggers.
Click URL
Click URL: Accesses the gtm.elementUrl key in the dataLayer, which is set by Click triggers. As in Example 3.
Click Text
Click Text: Accesses the gtm.elementText key in the dataLayer, which is set by Click triggers.As in Example 1 and Example 2.
The more commonly used are ID, Class, URL, and Text, which are easier to locate.
Forms
The Forms type has 6 built-in variables：
This is only used for form tracking, but form tracking needs to meet two conditions:
- The first is that the code is a <form> </ form> structure
- The second is the confirm button is type = submit
The subscription function on my blog is a form, we can look at the source code:
Not all forms will have these 6 variables, but they will all have class or id, both of which must have one.
Form Element
Form Element: Accesses the gtm.element key in the dataLayer, which is set by Form triggers. This will be a reference to the form’s DOM element.
Form Classes
Form Classes: Accesses the gtm.elementClasses key in the dataLayer, which is set by Form triggers. This will be the string value of the classes attribute on the form.
Form ID
Form ID: Accesses the gtm.elementId key in the dataLayer, which is set by Form triggers. This will be the string value of the id attribute on the form.
Form Target
Form Target: Accesses the gtm.elementTarget key in the dataLayer, which is set by Form triggers.
Form URL
Form URL: Accesses the gtm.elementUrl key in the dataLayer, which is set by Form triggers.
Form Text
Form Text: Accesses the gtm.elementText key in the dataLayer, which is set by Form triggers.
More info, you can read Google Tag Manager Practical Guide：Form Tracking
History
The History type has 5 built-in variables,
These variables need to be used in conjunction with the History change trigger and are usually used for tracking in single page applications.
Google Tag Manager’s History Change trigger will fire a tag when the URL fragment changes or when a site uses the HTML5 pushstate API. This trigger is useful to fire tags that track virtual pageview in single page web applications
New History Fragment
New History Fragment: Accesses the gtm.newUrlFragment key in the dataLayer, which is set by History Change triggers. Will be the string value of the fragment (aka hash) portion of the page’s URL after the history event.
Old History Fragment
Old History Fragment: Accesses the gtm.oldUrlFragment key in the dataLayer, which is set by History Change triggers. Will be the string value of the fragment (aka hash) portion of the page’s URL before the history event.
New History State
New History State: Accesses the gtm.newHistoryState key in the dataLayer, which is set by History Change triggers. Will be the state object that the page pushed onto the history to cause the history event.
Old History State
Old History State: Accesses the gtm.oldHistoryState key in the dataLayer, which is set by History Change triggers. Will be the state object that was active before the history event took place.
History Source
History Source: Accesses the gtm.historyChangeSource key in the dataLayer, which is set by History Change triggers.
Videos
The Videos type has 8 built-in variables,
These variables need to be used in conjunction with YouTube video trigger. In addition to these built-in variables, there are other variables in the data layer that can be obtained through data layer variables.
Video Provider
Video Provider: Accesses the gtm.videoProvider key in the dataLayer, which is set by YouTube Video triggers. This will be the name of the video provider, i.e. ‘YouTube’.
Video Status
Video Status: Accesses the gtm.videoStatus key in the dataLayer, which is the state of the video when an event was detected, e.g. ‘play’, ‘pause’.
Video URL
Video URL: Access the gtm.videoUrl key in the dataLayer, which is set by YouTube Video triggers. This will be the URL of the video, e.g. ‘https://www.youtube.com/watch?v=gvHcXIF0rTU’.
Video Title
Video Title: Access the gtm.videoTitle key in the dataLayer, which is set by YouTube Video triggers. This will be the title of the video.
Video Duration
Video Duration: Accesses the gtm.videoDuration key in the dataLayer, which is an integer that represents the total duration of the video in seconds.
Video Current Time
Video Current Time: Accesses the gtm.videoCurrentTime key in the dataLayer, which is an integer that represents the time in seconds at which an event occurred in the video.
Video Percent
Video Percent: Accesses the gtm.VideoPercent key in the dataLayer, which is an integer (0-100) that represents the percent of video played at which an event occurred.
Video Visible
Video Visible: Access the gtm.videoVisible key in the dataLayer, which is set by YouTube Video triggers. This will be set to true if the video is visible in the viewport, and false if it is not (e.g. below the fold or in a background tab).
More info, you can read：Google Tag Manager Practical Guide：Youtube Video Tracking
Scrolling
The Scrolling type has 3 built-in variables,
These variables need to be used in conjunction with the Scroll Depth trigger.
Scroll Depth Threshold
Scroll Depth Threshold: Accesses the gtm.scrollThreshold key in the dataLayer, which is set by Scroll Depth triggers. This will be a numeric value that indicates the scroll depth that caused the trigger to fire. For percentage thresholds, this will be a numeric value (0-100). For pixels, this will be a numeric value that represents the number of pixels specified as the threshold.
Scroll Depth Units
Scroll Depth Units: Accesses the gtm.scrollUnits key in the dataLayer, which is set by Scroll Depth triggers. This will be either ‘pixels’ or ‘percent’, that indicates the unit specified for the threshold that caused the trigger to fire.
Scroll Direction
Scroll Direction: Accesses the gtm.scrollDirection key in the dataLayer, which is set by Scroll Depth triggers. This will be either ‘vertical’ or ‘horizontal’, that indicates the direction of the threshold that caused the trigger to fire.
Visibility
The Visibility type has 2 built-in variables,
These variables need to be used in conjunction with the Element visibility trigger.
Percent Visible
Percent Visible: Accesses the gtm.visibleRatio key in the dataLayer, which is set by Element Visibility triggers. This will be a numeric value (0-100) that indicates how much of the selected element is visible when the trigger fires.
On-Screen Duration
On-Screen Duration: Accesses the gtm.visibleTime key in the dataLayer, which is set by Element Visibility triggers. This will be a numeric value that indicates how many milliseconds the selected element has been visible for when the trigger fires.
The latter types of variables are based on specific triggers, and these built-in variables need to be turned on for trigger settings only when the trigger is used. If not, you will rarely use it.
