Thanks to Google Tag Manager, we can insert various tags (brands) on our website quickly and easily without the need to modify the source code. This means that it can be done without the work of programmers. One of the most essential parts of the Google Tag Manager is the dataLayer.
DataLayer (data layer) is one of the key concepts in the Google Tag Manager (GTM) world. It is a javascript variable, and in analytics, it serves us to sell data from the web to GTM. Simply put, it is a kind of virtual web layer containing various data, and GTM reads the values of the necessary variables from the dataLayer. That is, provided that they are in it. The data in dataLayer is generated by individual users who interact with the website somehow. For example, they click on a product preview or add a product to their cart. Thus, dataLayers store information such as the text of the clicked button, the product’s price, or the order’s value.
At first glance, dataLayer may seem complicated. The basics we need to know to create variables can be easily and quickly understood.
Where can we find dataLayer in GTM?
In GTM, click the “preview” button on the right side – a new window will open – Google Tag Assistant. You fill in the URL address of the website and get into the debug mode on that page. Then return to the Google Tag Assistant page.
Basic dataLayer principle
Each object in dataLayer consists of a key and a value. The key remains the same, only its value changes. In our example, it looks like this:
Key =pageType, value =product detail
DataLayer is made up of several layers. They are separated from each other by a tab and {} bracket. These are nested data layers that are hierarchically organized. Each nested row is shifted to the right.
If you want to work with data from the dataLayer and use them in tags or triggers, you must create dataLayer Variables from them. These variables are probably the most used, and you will come across them often when working in GTM.
Creating variables from dataLayer
Let’s create a variable, thanks to which we will find out what type of page it is. E-shops usually have product or category pages or a basket page.
1. In Google Tag Manager, select variables > in the “User – Defined Variables” section New > Data Layer Variable
2. We fill in the name of the variable in the upper left. For variables from the data layer, we usually use the designation DLV – /name of the key that corresponds to the value we want to extract/
3. We will fill Data Layer Variable Name. Since we have multiple nested layers in dataLayers, when writing dataLayer Variable Name, we will use a special dot notation. We separate the individual layers with a dot and write them from the highest to the lowest. Put simply, top to bottom and right to left. Our variable name will look like this: shoptet.pageType
4. We save the new variable
For example, you can use the pageType variable if you want to fire a certain tag only on the product page. Thanks to it, you can create a trigger that will run only on a certain page type.
Let’s check if the variable is working correctly. In Preview mode, click on a product on your page. In Google Tag Assistant, select the Variables option, on the left side select the relevant event (Window Loaded). Among the variables, you should see the created variable DLV – pageType with the corresponding value.
How to extract data from variable array?
When working with a dataLayer, you may encounter another type of nested object, which is an array. In Javascript, a field is delimited by square brackets and is made up of several elements. In a simplified way, we can write the field as:
[A, B, C]
The positions of the array elements are numbered. Numbering starts with zero. Our example looks like this.
A = position 0 B = position 1 C = position 2
After sending the order, we will meet the field of variables, for example, in the basket or on the thank you page. It is simply said if one object (row) of the dataLayer contains other objects with special values. For example, several products in the basket or order. Each product has its name, id, price, category, etc. Let’s add more products to the cart and see how the dataLayer looks on the cart page.
If we wanted to store, for example, the ID of the first product in a data layer variable, our key would be, in this case ecommerce.checkout.product.0.id
For the price of the first product, the key would look like this ecommerce.checkout.product.0.price
If we want to define the variables of the second product, we replace 0 with 1
We will check the functionality of the created variable in the same way as in the first case. Via Tag Assistant, we get to the cart page, select variables in the top bar, find the newly created variable, and check whether its value matches reality.
One more warning at the end – when creating variables from the data layer, distinguish between upper and lower case letters because Javascript, like most programming languages, is case-sensitive. Therefore Product and product are not the same.
