Custom web variables can be created in ClickFlare Tag Manager to suit specific requirements.
To create a new user-defined web variable:
- Navigate to Tag Manager in the left-side menu.
- Go inside the container that you want to create a variable for.
- Go to the [x] Variables Tab
- Click on + New Variable.
- Choose the desired variable type from Variable Configuration.
- Complete the options for the selected variable type.
- Provide a descriptive name for the variable, such as "Form Field Variable - Name".
- Click Save.
Tag Manager supports the following user-defined variable types for web:
- Navigation
- Query Parameter
- HTTP referrer
- URL
- Page Variables
- 1st party cookie
- Custom JavaScript
- JavaScript variable
- Data Layer Parameter
- GTM Data Layer Parameter
- Page elements
- DOM element
- Element visibility
- Auto-event variable
- Element attribute
- Form field
- Form field custom
- Utilities
- Constant
- Random number
Navigation
Query Parameters
The Query Parameters variable allows you to extract and display specific parameters from the URL query string. By creating additional instances, you can expose different query parameters present in the URL. This functionality is particularly useful for tracking and analyzing user interactions based on query parameters passed through URLs. Adjust the URL Source to specify the variable from which Tag Manager should extract the query parameters.
HTTP Referrer
The HTTP Referrer variable captures the URL of the previous page visited by the user. For instance, if a user navigates from the home page to one of your product pages, the referrer will be the home page. While Tag Manager automatically generates an instance of this variable type, you have the option to create additional instances to expose different segments of the referrer URL.
URL
This variable type enables you to dissect and reveal various components of a URL. You can create multiple instances to expose different aspects of the URL, such as the full URL, protocol, hostname, port, path, filename extension, query, and fragment. The default input value for variables of this type is the URL of the current page, obtained from document.location. You can adjust the URL Source to specify another variable as the source of the URL value.
Page Variables
1st Party Cookie:
This variable is set to the value of the 1st party cookie associated with the domain the user is currently visiting. If multiple cookies with the same name exist on the same domain, the value of the first encountered cookie will be selected. This value mirrors what would be obtained by invoking document.cookie within the page and selecting the first outcome.
Custom JavaScript:
This variable retrieves its value from the result of a JavaScript function. The JavaScript function must be in the form of an anonymous function that returns a value. For instance, a custom JavaScript variable can be created to convert all instances of the predefined {{url}} variable to lowercase:
function () {
return {{url}}.toLowerCase();
}JavaScript Variable:
This variable retrieves its value from the global JavaScript variable specified. If the required value is not set up in the data layer (see Data Layer Variable) and is not visible in the DOM (also see: DOM Element Variable), it may still be obtainable from a JavaScript variable. Use this variable type when the value can be found in the page's source code as a global JavaScript variable.
Data Layer Parameter:
The value of this variable is established when data is pushed to the data layer through a dataLayer.push() call:
window.clickflare.push({"Data Layer Name": "value"}).You have the option to specify how Tag Manager handles dots (".") in the key name:
Version 1: Allows dots in key names. For example, window.clickflare.push("a.b.c": "value") is interpreted as the key name "a.b.c" (i.e., {"a.b.c": "value"}). Version 2: Interprets dots as nested values. For example, window.clickflare.push({"a.b.c": "value"}) is interpreted as three nested levels: {a: {b: {c: "value"}}}.
GTM Data Layer Parameter:
Similar to the data layer variable, the GTM Data Layer Parameter sets and intercepts GTM data layer parameters. When data is pushed to the GTM data layer using dataLayer.push(), this variable captures the specified parameter values. It behaves analogously to the data layer variable but focuses on GTM-specific data layer parameters.
Page elements
DOM Element:
This variable retrieves the text content of a DOM (Document Object Model) element or the value of a specific DOM element attribute. If the desired value is not available in the data layer, this variable type allows retrieval from the DOM.
If an attribute name is specified, the variable returns the value of that attribute (e.g. car-color="red"). Otherwise, it returns the text within the DOM element.
Element Visibility:
This variable determines the visibility status of a specified DOM element. Unlike its trigger counterpart, a single DOM Element Visibility variable focuses solely on reporting the visibility of a single element. Users can opt to select an element either by its ID or via a CSS Selector. In cases where multiple elements match the specified CSS Selector, the first matched element is utilized.
Output options for this variable include:
- True / False: Provides a boolean value indicating whether the selected element is visible.
- Percent: Offers a percentage value, ranging from 0 to 100, indicating the visibility percentage of the selected element on the screen.
When True / False is selected as the output type, users can also set a Minimum Percent Visible threshold to determine when the variable returns a true value.
Auto-Event Variable:
This variable captures data about an element that triggers an event, such as clicks, form submissions, or element visibility changes.
Element: Retrieves the element object, usable in custom JavaScript or CSS selectors.
Element Attribute: Fetches the value of a specified attribute.
Form Field: Captures data related to form fields, such as input, select, or textarea elements.
Form Field Custom: Allows customization for capturing data from form fields based on specific ID or CSS selectors.
Utilities
Constant
This feature sets a predetermined string value provided by the user. It's commonly utilized when multiple tags require the same account number.
Random Number
This feature sets the value to a random number between 0 and 2147483647.
