Data Layer Variable – How can you use them to store UTM parameters of your website visitors
The Data Variable Layer is in charge of extracting information from a layer in your site that help you in gathering and storing data. Often, a website comprises 3 layers: the interface layer (what people view), the applications layer (which includes the tools you link to your website, such as Google Analytics), and the data layer (which stores all of the data created by your visitors). The data layer is a dependable method of gathering information from your web page. We all understand the value of data collecting for the optimisation of efforts as digital marketers. In this post, we’ll teach you how to use the data layer variable in GTM to get these insights from your data layer.
An Overview of Google Tag Manager
GTM is a completely free, web-based tool offered by Google that facilitates the management and deployment of different tracking tags & snippets of code on your website. It functions as a tag management platform, allowing marketers & website administrators to centrally oversee and control the adoption of external tags like tracking pixels, analytical codes, conversion monitoring scripts, & more, without the need for manual code modifications on the website. To learn more about GTM, here’s an article where we have uncovered it in detail.
With a user-friendly interface, GTM allows you to effortlessly create, alter, and organise tags, triggers, & variables. We obtain code snippets from different third-party tools to form tags. The conditions under which the tags are supposed to run are defined by triggers. Lastly, variables store and provide input to the tags. This modular design enables to set up and oversee a wide range of monitoring and marketing technologies in an efficient and effective manner.
What is the Importance of Google Tag Manager?
Because GTM is a straightforward and comprehensive website & marketing tool, it provides several benefits to your company and team. This section lists the five key advantages of utilizing Google Tag Manager.
1. Increased Flexibility and Agility:
Google Tag Manager allows you to make adjustments & modifications to tracking tags & code snippets without having to manually alter the website’s code. It is possible to swiftly deploy new tags, adjust current ones, and adjust to fluctuating tracking needs without depending on developers/IT resources. This can significantly enhance the agility and flexibility of your marketing team.
2. Tag Management is Simplified:
GTM organises and manages all tags & code snippets through a unified interface. This removes the need to disperse code over numerous pages of your website and streamlines the tracking installation process. You are also able to add, amend, and organise tags, triggers, & variables with ease. Therefore helping in easier maintenance of structured and organised tracking infrastructure.
3. Faster page load time:
One of the primary benefits of GTM is that it aids in the optimisation of page load speeds. Tags are loaded asynchronously by utilising GTM’s asynchronous tag launching. This decreases the impact on page speed. Furthermore, the standard rules and conditions in GTM allow marketers to manage whether or not to fire tags. Resulting in further optimising the loading process and increasing the overall website performance.
4. Rollback & Version Control:
Google Tag Manager has version control, letting your marketing team build and manage multiple iterations of their container. This feature allows you to examine and return to prior versions if necessary, giving you more control & peace of mind while making alterations to the tracking configuration. It also makes it easier for team members to collaborate by permitting them to operate on distinct versions at the same time.
5. Capabilities for testing & debugging:
GTM offers powerful debugging and testing features that enable you to see how tags will perform on your website before you publish them. This enables rigorous verification and testing of tag functioning, lowering the likelihood of mistakes or configuration errors. The debugging capabilities also help with troubleshooting and diagnosing inaccuracies which offer essential insights to guarantee proper tracking implementation.
What’s a Data Layer Variable?
Collecting reliable and relevant information is critical in web analytics & tracking to comprehend user behaviour and optimise marketing strategies. The notion of a data layer along with data layer variables helps you to improve the data-collecting process and assure consistency across diverse tools & platforms. This data layer serves as a well-organized repository for important information regarding user activities on a web page. Whereas, the data layer variable operates as dynamic placeholders for this data, storing and passing it to tags & tracking systems inside GTM.
In the simplest terms, a data layer can be thought of as a JavaScript array or object containing customer-related data including page URLs, preferences of users, product details, or a variety of customised data points useful for monitoring and analysis. It acts as a link between your website & GTM, supplying a constant and dependable stream of information that can be retrieved and used by various tags & tools available through GTM. The data layer reduces the need for dispersed code and allows for centralised data administration.
Data layer variables enable reliable data gathering and analysis by providing a dynamic and effective means to transfer pertinent data to different tracking systems & tools.
Versions of Data Layer Variable
Variables in Google Tag Manager are classified into two categories. Built-in Variables are preset variables that collect regularly used data items without any extra adjustment. These variables are easily accessible and give helpful details about the user, the page, & the browsing context. Another type of variable is User-Defined Variables, which are custom variables created by marketers in GTM. These variables offer versatility by allowing marketers to design and use unique data points according to their monitoring and analytical needs. Here’s how to use Google Tag Manager to generate customised user-defined web variables to meet special needs that may not be met by built-in variables.
a. HTTP Referrer – The value is assigned for the HTTP referer, indicating the URL of the previous page from which the individual was redirected to the new page. For instance, if a user explores your pricing pages from the main page, the main page will be the referrer. Tag Manager creates a version of such variable type for you, but you can set up several instances if you want to disclose other sections of the referrer URL.
b. URL – This variable type enables you to decode and disclose URL components. Additional instances can be created for revealing different sections of the URL. You can select from the following URL components:
>> Full URL,
>> Protocol,
>> Hostname,
>> Port,
>> Path,
>> Filename Extension,
>> Query,
>> and Fragment.
The URL of the individual’s present page is set as the input value for such variables. Change the URL Source variable to instruct Tag Manager to employ another variable to be the origin of the URL value.
2. Page variables
a. 1st-party cookie – This value corresponds to the value of the first-party cookie containing the domain name that the user is now visiting. If several cookies with the same name are placed on the identical domain, the initial value will be selected. This is the same value that you used within the webpage & selected the first response.
b. Custom JavaScript – The outcome of a function in JavaScript is used to set the value. JavaScript must be written in the structure of an unidentified function that produces a value. A custom JavaScript variable, for example, can be constructed to change all instances of the preset url variable to uppercase.
c. Data layer – When data is sent to the data layer using the dataLayer.push() method, the value is set. You can instruct Tag Manager how to read the dots (“.”) in key names:
>> Version 1: Dots are permitted in key names. Regarding dataLayer.push(“e.f.g”: “value”), for instance, it interprets the key name as “e.f.g” (i.e. “e.f.g”: “value”).
>> Version 2: Consider dots to be nested values. As an example, use dataLayer.push(“e.f.g”: “value”) to have three stacked levels: e: f: g: “value.”
d. JavaScript variable – The value is allocated to the specified global JavaScript variable. If the needed value wasn’t set within the data layer & is also not available in the DOM, the value might be obtained via a JavaScript variable. Utilise this variable type if the value can be found as a global JavaScript variable in the page’s source code.
3. Page elements
a. Auto-Event variable – Records details regarding an item which initiated an event (for example, clicks, submissions of forms, element visibility, and so on).
b. DOM Element – The value corresponds to either the text itself of the document object model (DOM) component or the actual value of the DOM element attribute provided. If the necessary value has not been configured in the data layer, it can be feasible to access it through the DOM. In case the value can be found in the DOM, use this variable. If an alternative attribute name is specified, the value of the variable will be the value supplied from that element; without it, the value ought to be contained within the DOM element.
c. Element Visibility – The value is determined by the visibility of the given DOM element. A single Element Visibility variable can only indicate the visibility of an individual element. Decide whether to use an element ID / CSS Selector to choose an element. If a CSS Selector matches several items, the initial matched element is going to be utilised.
4. Utilities
a. Constant – The value defaults to a string that you specify. Constant string variables tend to be used when many tags use an identical account number.
b. Custom Event – The name of the customised event that was sent to the data layer will be used as the value.
c. Google Analytics Configuration – The Google Analytics Configurations variable is utilised in Universal Analytics tags in mobile and web containers to simultaneously manage and distribute Google Analytics settings utilised by different tags. When you use Universal Analytics to build a Google Analytics tag, Tag Manager will suggest you to pick or build a Google Analytics Parameters variable.
d. Lookup Table – The Lookup Table lets you define a variable whose value changes depending on the value of a different variable. If your site has been configured in such a manner that the relevant value can be linked to the web address, DOM element, or any other component of the page, then this variable is handy.
5. Container Data
a. Container Version Number – The container version variable provides the preview version number only when the container is in a preview state. Instead, this variable represents the live version number of the container.
How can you use DLVs to store UTM parameters from URL parameters?
The URL of your website, especially if it is well-structured, can serve as a valuable source of information. Even though a URL is made up of numerous sections, the URL variables are likely to include the majority of the information essential to tagging. This section will go through how to retrieve such information from your URL using Data Layer Variable.
How to Get Create Your Container in Data Layer Variable?
a. Open Google Tag Manager & choose the container from which you would prefer to retrieve the URL parameter.
b. Select “Variables.” From “User-Defined Variables,” choose the “New” option to add a fresh user-defined element to your URL parameter.
c. Name your variable according to something that will be simple for you to remember and easy for others to recognise.
d. Navigate to “Variable Configuration.” The window “Choose variable type” will appear. In “Navigation,” choose “URL.”
e. In the “Component Type” selection menu, choose “Query.” Insert the key for the URL parameter under “Query Key.”
f. After you have completed all the above-mentioned steps, click on the “Save” button.
How to Put Your Container to Test?
a. In the top right side of the screen, select the “Preview” option.
b. In “Your website’s URL,” put the URL of your homepage, also including the URL parameter you intend to test.
c. To see the value of the variable, click on the appropriate events in the “Summary” column on the left. Then, on the “Variables” tab, locate the variable you want in the given table.
If you successfully configured the GTM container and provided the correct URL with the appropriate URL parameters in the “Preview” tab, the variable should have the correct value.
How do URL Parameters Work in Data Layer Variable?
By adding several parameters (like source, campaign, etc) to the end of a landing page’s URL, you can add more details about that page’s visitors.
Assume that your homepage page’s URL is https://saasgrowthadvisory.com/page. You can include two parameters in the URL if you’re preparing to connect the homepage in your email campaigns & want to monitor how many recipients have clicked on it. In this situation, the first part of the URL parameter will contain details regarding the source of the visit (email). The second part of the URL variable will contain your CRM system’s Campaign ID (for example, 123).
As a result, the URL of your landing page will be changed to https://saasgrowthadvisory.com/page?source=email&campaign=123. Any person who views this link will be attributed to the traffic source “email” & the campaign ID “123.”
Why should you add Keys, Values, and Characters In-Between?
Continuing with the previous example, the URL https://saasgrowthadvisory.com/page?source=email&campaign=123. The link has three extra characters: a question mark (? ), an ampersand (&), & the equals sign (=). We add these so that the browser can know:
>> Where exactly do the URL parameters begin
>> Where every URL parameter terminates
>> Every URL parameter’s key & value
A question mark (?) is inserted between the page address & the initial URL parameter to indicate the endpoint of the page route & the beginning of the URL parameters. An ampersand (&) is put between the two consecutive URL parameters to separate them. Finally, to inform the web browser of the value and key of each URL parameter, the key & value are delimited by the equals symbol (=).
Now you are all set to track your visitors using the UTM Parameters in your URL!
Still, finding it difficult to implement DLVs? Contact our GTM Professional for a seamless data layer variable setup and an error-free implementation.