Introduction to variables in GTM.

Google Tag Manager (GTM) is a well-known tag management tool that website owners and marketers use to control different tracking and analytics tags on their websites. The use of variables, which enables flexible and dynamic tag implementation, is one of the fundamental ideas behind GTM.

In GTM, a variable is merely a storage location for a value that may be accessed by one or more tags. In GTM, there are various types of variables, each with a distinct function and goal. Let’s examine some of the most prevalent categories of variables used in GTM:

1. Built-in variables: These are predefined variables that GTM automatically fills with specific values. Examples include {{Page URL}}, {{Click Element}}, and {{Browser Language}}.
2. Datalayer variable: The information about the user or the website is stored in these variables, which are created by developers. The data layer is a JavaScript object that holds details like the user’s ID, the type of page, or the name of the product. The page source contains JavaScript code that can be used to create data layer variables, or GTM users can use their own HTML tags to do so.
3. Custom JavaScript variables: These variables are created by writing custom JavaScript code in GTM. They can be applied to pull values off of a page or alter already-existing values to produce new ones.
4. User-defined variables: The user can use these variables to store values unique to their website or company because they were created by them. They can be made using the pre-built variable templates in GTM or any of the aforementioned types of variables.

Variables can be used in a variety of ways in GTM, including:

1. Passing data to tags: Variables can be used to pass information to tags such as Google Analytics or Facebook Pixel. For instance, the product name and ID could be passed to an e-commerce tracking tag using a data layer variable.
2. Creating triggers: Variables can be used to create triggers that fire tags based on certain conditions. For instance, a custom JavaScript variable could be used to determine whether a user has scrolled past a specific point on the page and then cause a tag to show a popup.
3. Enabling tag customization: Variables allow for flexible tag implementation by enabling the customization of tags based on the value of the variable. For instance, based on the user’s location, a user-defined variable could be used to alter the click tracking tag’s destination URL.

In conclusion, variables are a strong and versatile component of GTM that allow marketers and website owners to dynamically and effectively implement tracking and analytics tags. You can modify your tags based on user behavior and other aspects by using variables, which will result in more precise tracking and more insightful data about how well your website is performing.

How can a variable be called in GTM?

When managing different tracking and analytics tags on their websites, marketers and website owners frequently use Google Tag Manager (GTM). The use of variables, which enables dynamic and flexible tag implementation, is one of the core ideas behind GTM.

A value can be stored in a variable in GTM so that it can be used by one or more tags. In GTM, there are various types of variables, each with a distinct function. Let’s examine some of the most prevalent categories of variables used in GTM:

1. Built-in variables: These variables have already been predefined by GTM, and certain values are automatically filled in for them. Examples include {{Page URL}}, {{Click Element}}, and {{Browser Language}}.
2. Data layer variables: The information about the user or the website is stored in these variables, which are made by developers. The data layer is a JavaScript object that holds details like the user’s ID, the type of page, or the name of the product. The page source contains JavaScript code that can be used to create data layer variables, or GTM users can use their own HTML tags to do so.
3. Custom JavaScript variables: These variables are created using original JavaScript code written in GTM. They can be used to create new values by modifying existing ones or to extract values from a page.
4. User-defined variables: These user-created variables can be used to store values particular to their website or company. They can be made using the pre-built variable templates in GTM or any of the aforementioned types of variables.

Variables can be used in GTM in a number of different ways, such as:

• Passing data to tags: Variables can be used to pass data to tags like the Facebook Pixel or Google Analytics. For example, a data layer variable could be used to pass the product name and ID to an e-commerce tracking tag.
• Creating triggers: Variables can be used to build triggers that fire tags in response to specific circumstances. For example, a custom JavaScript variable could be used to check if a user has scrolled past a certain point on the page and trigger a tag to show a popup.
• Enabling tag customization: Variables make tag implementation flexible by allowing for tag customization based on the value of the variable. For instance, based on the user’s location, a user-defined variable could be used to alter the click tracking tag’s destination URL.

In conclusion, variables are a strong and versatile component of GTM that allow marketers and website owners to dynamically and effectively implement tracking and analytics tags. You can modify your tags based on user behavior and other aspects by using variables, which will result in more precise tracking and more insightful data about how well your website is performing.

Built-in variable for GTM.

The built-in variables offered by Google Tag Manager (GTM) can be used to collect data about the user, the page, and the browser. These variables can be used in various tags and triggers and are automatically filled in by GTM. The complete list of GTM’s built-in variables can be found below, along with technical information and usage examples:

• Click Element: This variable records details about the element that the user clicked. It contains the element’s ID, class, text content, and placement on the page. Example: You can use this variable in a trigger to fire a tag when a user clicks on a specific button or link.
• Click ID: The ID of the element that was clicked by the user is captured by this variable. Example: You can use this variable in a tag to send Google Analytics the ID of the clicked element as a custom dimension.
• Click URL: The URL of the page that the clicked element links to is stored in this variable. Example: By sending the clicked URL to a third-party service, you can use this variable in a tag to track outbound link clicks.
• Constant String: You can specify a constant value in this variable to be used in tags and triggers. Example: You can use this variable to store a static value such as a tracking code or a campaign ID.
• Container ID: This variable records the ID of the currently active GTM container. Example: You can use this variable in a tag to identify which GTM container is responsible for firing the tag.
• Cookie Consent: This variable records whether the user has given their consent to cookies. Example: You can use this variable in a trigger to fire tags only when the user has given their consent for cookies.
• DOM Element: Details about the element that initiated a tag are stored in this variable. Along with its placement on the page, it also contains the element’s ID, class, and text content. Example: You can use this variable in a tag to capture the text content of a form field when it is submitted.
• Error Message: This variable stores the error message that appears after a failed form submission. Example: You can use this variable in a tag to send the error message to a third-party service for troubleshooting purposes.
• Event: Information about the occasion that brought about a tag is stored in this variable. It contains the name, label, and category of the event. Example: You can use this variable in a Google Analytics tag to track custom events and assign them to specific categories and labels.
• Form Classes: This variable stores the classes a form element has been given. Example: You can use this variable in a trigger to fire a tag only when a form with a specific class is submitted.
• Form Element: Details about the form element that caused a tag are stored in this variable. It contains the ID, name, and type of the element. Example: You can use this variable in a tag to capture the value of a specific form field when it is submitted.
• Form ID: The ID of the submitted form is stored in this variable. Example: You can use this variable in a tag to send the ID of the submitted form to a third-party service.
• History Source: This variable stores the current page’s browser history source information. Example: You can use this variable in a tag to determine whether the user arrived at the current page by clicking the back button.
• HTML ID: The ID of the HTML element that initiated a tag is stored in this variable. For instance, you can use this variable in a tag to only activate the tag when a particular HTML element is clicked.
• JavaScript Error: Information about a JavaScript error that occurred on the page is stored in this variable. 

The GTM custom variable with technical details and illustrations.

Custom variables in Google Tag Manager (GTM) are an effective tool that let you make unique data elements to be used in tags and triggers. In GTM, a variety of custom variable types are available, each with a unique set of technical specifications and use cases.

The various custom variable types available in GTM are listed below, along with some usage scenarios:

1. Custom JavaScript variable: With the help of this variable, you can write your own scripts that can manipulate or retrieve information from the page. For example, you could use a custom JavaScript variable to extract the value of a form field or to determine the user’s location.
2. Custom HTML variable: Using this variable, you can write unique HTML code that can be applied to a page to retrieve information. For example, you could use a custom HTML variable to retrieve a product SKU from an e-commerce site.
3. Custom URL variable: This variable enables you to retrieve information from the current page’s URL. For example, you could use a custom URL variable to extract the query string parameters from a URL.
4. Custom event variable: With the help of this variable, you can get information from a particular event that has been pushed to the data layer. For example, you could use a custom event variable to retrieve the product ID from an “add to cart” event.
5. Custom JavaScript function variable: With the help of this variable, you can write a JavaScript function that alters or retrieves data from a page. For example, you could use a custom JavaScript function variable to calculate the total value of a shopping cart.

You must first choose the correct variable type before entering the code or configuration information for that variable type in order to create a custom variable in GTM. Once the custom variable is created, you can use it in tags and triggers by referencing its name using double curly braces, like this: {{Variable Name}}.

For example, let’s say you wanted to create a custom JavaScript variable that retrieves the value of a form field. You could create the variable by selecting the “Custom JavaScript” variable type and entering the following code:

function() {
var fieldValue = document.querySelector('#form-field').value;
return fieldValue;
}

Then, you could refer to the custom variable by using its name in the appropriate field in a tag that sends the form data to a third-party service, like this:

Form Field Value: {{Form Field Value}}

In conclusion, GTM’s custom variables are a potent tool for developing unique data elements that can be incorporated into tags and triggers. You can create custom variables that extract, manipulate, or compute data from the page or data layer by choosing the appropriate variable type and entering the appropriate code or configuration information.

Summary

Variables are an integral part of any Google Tag Manager (GTM) implementation, and mastering them is necessary to become a GTM expert. To make complex tag implementations simpler, it is essential to understand how to combine the various variable types; simply knowing about them is not sufficient.

It’s also critical to pay attention to technical details, particularly the method used to resolve variables, in order to prevent unexpected situations. A “race condition,” where a variable tries to access a data source that isn’t yet ready, is one frequent problem.

Furthermore, when using variables, it’s imperative to adhere to the “no side effects” rule. A variable should only be used to create a return statement that makes sense. Consider using a Custom HTML tag in place of a function call if you need to make your function calls more complex.

Please leave your comments if you have any queries or special uses for any of the variable types.