Data Layer and Data Layer variables

If you're working with Google Tag Manager (GTM), sooner or later, you'll come across the term “Data Layer,” which, when used correctly, can unlock a wide range of possibilities for web analytics.

Data Layer is a unique system for transmitting data from a website to Google Tag Manager, consisting of a specific data array.

How does a Data Layer work?

1. The Data Layer script is usually implemented in the website’s code to load variables from the site;
2. Google Tag Manager contains special handlers that scan the Data Layer block's data and send it to the tag container;
3. The data in the tag container is then distributed according to its configured algorithms.

Here is an example of how a Data Layer code might be structured:

<script>
dataLayer = [];
</script>

The code typically includes variables connected to Google Tag Manager and retrieves information from the site. In programmer’s terms, these are data layer variables that transmit data. For example, let’s look at a simple eCommerce code of Google Analytics:

<script>
dataLayer = [{
	'transactionId': '1234',
	'transactionAffiliation': 'holostenko.ua',
	'transactionTotal': 11.99,
	'transactionTax': '1.29',
	'transactionShipping': '5',
   'transactionProducts': [{
   	'sku': 'DD44',
    	'name': 'T-Shirt',
    	'category': 'Apparel',
    	'price': 11.99,
    	'quantity': 1
   }]
}];
</script>

Here, variables such as price, name, and sku are passed into Google Tag Manager, and their values are loaded into the container. If it’s a custom function or a new feature not pre-configured in GTM, these variables will need to be created in Tag Manager.

Key points about Data Layer:

• The "dataLayer = []" code should be placed above the container code. If placed below, the data won’t be recorded into the container.
• Variables declared in Data Layer are only valid on the page where they are declared. A single declaration for the entire website isn't applicable.
• Data Layer loads asynchronously and does not interfere with the loading of other page elements.

Data Layer, event, and push

A crucial role in Data Layer is played by the special variable “event”, which acts as a trigger for the occurrence of an event, sending the corresponding data to GTM.

A trigger is a condition set in Google Tag Manager that initiates an event.

An event only works with the push method and looks like this:

dataLayer.push({'event': 'event_name'});

Where “event_name” is the event's name.

Notice the brackets change from square to round when using the push method. This is a unique feature of push, allowing data to be sent upon certain actions, regardless of where the code is located. A prime example is found in enhanced eCommercesetups.

<script>
dataLayer.push({
  'ecommerce': {
    'detail': {
      'actionField': {'list': 'Apparel Gallery'}, 
      'products': [{
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
   },
 'event': 'gtm-ee-event',
 'gtm-ee-event-category': 'Enhanced Ecommerce',
 'gtm-ee-event-action': 'detail',
 'gtm-ee-event-non-interaction': 'True',
});
</script>

The push method is relevant when you don't know if the event will happen. This way, the data is only sent when a specific action, such as a click, add-to-cart, or other event, occurs. The code can be placed anywhere on the site.

You might encounter “window.dataLayer.push” online, a universal method for defining variables anywhere. However, we don’t recommend it, as we adhere strictly to Google Developer guidelines.

Additional notes on Data Layer and Data Layer Variables:

• Variable names are case-sensitive;
• Keep data loading consistent—avoid sending data from multiple sources;
• Use a separate container for each resource unless the structure is hierarchical;
• One page = one container — do not place multiple containers on a single page.

What If you don't have a developer to place the Data Layer code?

• Load data via GTM event tags and publish variables;
• Use selectors to load variable data.

However, this method is not entirely reliable, as dynamic site structures can stop passing data from selectors at any time.

We hope this article was helpful to you, and we'll continue bringing you interesting content on our blog.

Order a service