Variables Guide in Google Tag Manager——Built-In Variables | BCS

Variables Guide in Google Tag Manager——Built-In Variables

Google Tag Manager BCS 8 months ago (12-07) 386 Views 0 Comments

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:

Variables Guide in Google Tag Manager——Built-In Variables

Then a page pops up on the right for you to tick, and tick whichever variable you want.

Variables Guide in Google Tag Manager——Built-In Variables

Enabling built-in variables is very simple.

Pages

The Pages type has 4 built-in variables:

Variables Guide in Google Tag Manager——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:

Variables Guide in Google Tag Manager——Built-In Variables

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:

Variables Guide in Google Tag Manager——Built-In Variables

 

Then Referral is displayed:

Variables Guide in Google Tag Manager——Built-In Variables

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:

Variables Guide in Google Tag Manager——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).

Variables Guide in Google Tag Manager——Built-In Variables

 

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

Variables Guide in Google Tag Manager——Built-In Variables

 

Container Version

Container Version: Provides the version number of the container, as a string.

Variables Guide in Google Tag Manager——Built-In Variables

 

Random Number

Random Number: Returns a random number value.

Variables Guide in Google Tag Manager——Built-In Variables

 

HTML ID

HTML ID: Allows custom HTML tags to signal if they had succeeded or failed; used with tag sequencing.

Variables Guide in Google Tag Manager——Built-In Variables

 

Errors

The Errors type has 4 built-in variables:

Variables Guide in Google Tag Manager——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.

Variables Guide in Google Tag Manager——Built-In Variables

 

First look at a few examples:

Example-1:

Variables Guide in Google Tag Manager——Built-In Variables

 

Example-2:

Variables Guide in Google Tag Manager——Built-In Variables

 

Example-3:

Variables Guide in Google Tag Manager——Built-In Variables

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:

Variables Guide in Google Tag Manager——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:

Variables Guide in Google Tag Manager——Built-In Variables

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.

Variables Guide in Google Tag Manager——Built-In Variables

 

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.

Variables Guide in Google Tag Manager——Built-In Variables

 

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,

Variables Guide in Google Tag Manager——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,

Variables Guide in Google Tag Manager——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,

Variables Guide in Google Tag Manager——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,

Variables Guide in Google Tag Manager——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.


If you don't understand, You can leave a comment below or email me (haran.huang@ichdata.com).
Like (1)
Post my comment
Cancel comment
Expression Texture Bold Strikethrough Center Italic Sign in

Hi, you need to fill in your nickname and email!

  • Nickname (required)
  • Email (required)
  • Website