All about Data Layers

DP6 Team
DP6 US
Published in
5 min readJan 3, 2022

When analyzing or optimizing media in the world of data collection, one of the biggest challenges is ensuring that the implementation is consistent and complete. This is a persistent challenge due to the volatility of digital environments, which are at the mercy of the user’s internet, the type of browser (and its extensions), the modifications to the pages that are carried out by different areas within a company, and the type of technology used in the development of the environment, among other variables.

In this scenario, one of the tools that can be used to minimize errors in data collection is the Data Layer.

Let’s start at the beginning: What is a data layer?

A simple definition is: it is an intermediary object between the Back-End and Front-End of a website, whose main objective is to provide easy access to important website and navigation data.

A visual representation, then, could be as follows:

As it is independent of the front-end and created by the back-end, it is here that the data can be structured to facilitate, streamline and standardize the collection in a more consistent way. The front-end tends to be more dynamic, so there are constant changes to the interface. As a result, data collection based on the front-end may require constant maintenance. (We have a series of posts about the various ways the collection can be checked)

Following a facilitated structure, as recommended by Google, you should treat it as an array of objects, as the structure of each object is individual according to business needs. For example, for an e-commerce it is expected to contain data about the products that appear on the page. Alternatively, for sites that have the objective of obtaining new Leads (a potential consumer), it is expected to have Lead submission data.

Therefore, there is no specific way of making data available in the data layer. This has to be planned and carried out in the best possible way for the business in question.

Planning of the Data Layer

For Digital Marketing, the layer must be built in such a way as to have all the information necessary to monitor navigation, the data that has been collected with the users’ consent, and the conversions carried out in the online environment. Generally, these 3 macro areas manage to cover all the KPIs (Key Performance Indicators) identified by the business.

Therefore, it is important to plan the data layer while keeping future data tracking needs in mind.

One possible direction is to have at least 4 main objects and populate them according to the needs of the business:

<script>dataLayer = [{‘user’: { data that has received the consent of the user such as Id},‘page’: { data from the page browsed such as Url},‘event’: { navigation event data such as Action},‘conversion’*: { conversion data such as Product Name }}];</script>
  • Some examples of user keys: Id, Loyalty Level and Region
  • Some examples of page keys: domain, path and banners
  • Some examples of event keys: Category, Action, Label and Value
  • Some examples of conversion keys: Lead data, Purchase data.

Planning this layer is important in order to ensure the consistency and integrity of data collection and, in the future, the analysis and application of intelligence based on it.

* In online stores, this key can be called “ecommerce”.

Basic implementation of the data layer

The most common use of the data layer in the Digital Marketing world is to create an environment that can be used by tag managers, media pixels, testing and customization tools, etc. A complete data layer can serve as an input for any tool that needs to receive navigation information about users in the environment, whether for media, analysis or any other purpose.

For best use the data layer must receive its data via the back-end and be populated before requesting the tools that will use it, so that they can already use the layer’s inputs for their triggers. Using Google Tag Manager as an example, the code should follow the following structure:

<script>dataLayer = [{‘pageCategory’: ‘login’,‘visitorType’: ‘recurring’}];</script><! — Google Tag Manager →<! — End Google Tag Manager →

Adding new data to the data layer

The data layer is a dynamic resource and will receive new data as the user browses, adding new values and updating existing data. A classic case is when a product is added to the shopping cart. After clicking the “add to cart” button, new data must be added to the data layer.

dataLayer.push({‘event’: ‘add_to_cart’,‘ecommerce’: {‘items’: [{‘item_name’: ‘Donut Friday Scented T-Shirt’, // Name or ID is required.‘item_id’: ‘67890’,‘price’: ‘33.75’,‘item_brand’: ‘Google’,‘item_category’: ‘Apparel’,‘item_category_2’: ‘Mens’,‘item_category_3’: ‘Shirts’,‘item_category_4’: ‘Tshirts’,‘item_variant’: ‘Black’,‘item_list_name’: ‘Search Results’,‘item_list_id’: ‘SR123’,‘index’: 1,‘quantity’: ‘2’}]}});

As the data layer is a JavaScript array, we use the push method of sending new data to the layer.

Observation: For the push method, it is important that the variable is already defined in the global scope. We can ensure that there are no errors by adding the following line before executing the data layer change:

window.dataLayer = window.dataLayer || [];

When using this technique, the current value of the layer will be maintained, if it is already defined. If not, it will receive the value of an empty array, allowing the correct execution of the push method.

How does Google Tag Manager (GTM) use the data layer?

Initially, GTM creates 3 objects by default, indicating 3 page-loading steps:

  1. “gtm.js”: gtm.js is a JavaScript library used by the GTM container. If it does not load, GTM will not work. Its presence in the Data Layer indicates successful loading.
  2. “gtm.dom”: An event that identifies that the DOM (Document Object Model) has been loaded and is operational.
  3. “gtm.load”: This is a loading file of the page itself and its contents. It appears when fully loaded.

Conclusion

The data layer is a very important resource that allows data collection to be more assertive and have a higher level of quality. The information it brings generates insights and helps answer questions about your growing business with a data-based methodology.

Defining a data layer is a multidisciplinary activity and should involve all the main stakeholders (Marketing, IT, Product teams etc.). A well-designed data layer will add agility to your day-to-day operations, in addition to monitoring the entire lifecycle of the digital product.

Were you already aware of this subject? Does your company use a Data Layer with a Tag Manager? Do you use any of the practices we recommended? Do you have any other suggestions for a good Data Layer? Let us know in the comments section below, or contact us on our social networks.

Profile of the author: Bianca Santos | Interested in the wide world of technology, she has been working at DP6 for years on the implementation, management and maintenance of a variety of technical solutions aimed at improving the entire data cycle, such as collecting, structuring, crossing, and converting data to any format necessary to extract the intelligence contained within it.

Profile of the author: Robson Oliveira | Graduated in Information Systems from São Judas Tadeu University, he is a Data Engineer at DP6 who is passionate about Data Analysis and Business Intelligence and is always looking for the best way to extract insights from the data around him.

--

--