What is a dataLayer?

What exactly does a dataLayer do?

Imagine this: someone visits your Web site. That person clicks around, views products, perhaps fills out a form or buys something. All of those actions are valuable to you as a Web site owner. But to properly measure those actions, you need to collect that information somewhere. That's what the dataLayer does. The dataLayer takes all the relevant data and puts it into an organized package. Think about the name of a product someone is viewing, the price, what language the website uses, or what type of page it is. This information is neatly structured and made available to other systems.

A simple example looks like this:

javascript

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 'event': 'page_view',
 'pageCategory': 'productpagina',
 'productName': 'Hardloopschoenen',
 'productPrice': 79.95
});

Here a 'page_view' event is added with additional information about the product that can be viewed on this page.

‍

Why do you need a dataLayer?

Without dataLayer, it's like having to pull all the information about your Web site visitors out of different cabinets and drawers. That's messy and often goes wrong. With a dataLayer, you have everything in one place, neatly organized. Google Tag Manager would otherwise have to fish all the data out of your website code. That's difficult, error-prone and requires a lot of technical knowledge. With a dataLayer, even someone with no programming experience can collect reliable data. It also makes you much more flexible. Want to start a new marketing campaign and measure different conversions? Then you just modify the dataLayer and don't have to rebuild the whole website.

The dataLayer is usually a JavaScript list. Every time something important happens on your website (loading a new page, clicking a button, making a purchase), a new piece of information is added with dataLayer.push(). Google Tag Manager constantly monitors for new data. As soon as it sees an "event," it can respond to it by sending data to Google Analytics, for example. It is important that the dataLayer is loaded before Tag Manager does its work. Otherwise, Tag Manager misses important information. Want to learn more, then read more about why you need a dataLayer here.

‍

How do you read a dataLayer?

Reading a dataLayer is easier than you think. Open your browser's developer tools (F12) and go to the Console tab. There, type dataLayer and press Enter. You will then see all the data that has been put in so far. Each time an event occurs, a new object is added to the list. You can scroll through this list to see what has been captured. Each object contains information such as the event type, page data, product information or user actions. In Google Tag Manager, you can also use Preview mode. Then you can see in real time which events are triggered and what data is passed. This is useful to check that everything is working properly before putting tags live. Read more about how to read a dataLayer.

‍

What is a dataLayer event?

A dataLayer event is actually a signal that something has happened on your Web site. It is like a bell that rings to say, "Attention, something important has just occurred!". Every time a visitor performs an action, an event is sent to the dataLayer. This can be anything: a page loading ("pageview"), someone clicking a button ("button_click"), a form being filled out ("form_submit"), or a purchase being made ("purchase"). The event itself is often just a name, but it usually includes additional data. With a 'purchase' event, for example, you also get the product name, price and quantity included. Google Tag Manager constantly listens for these events and can then automatically perform actions, such as sending conversion data to Google Analytics. If you want to read more about this, read on about what a dataLayer event is.

‍

How do you build a good dataLayer?

Start by thinking: what exactly do you want to measure and what data do you need to do so? List all the data points you want to collect. Work with your developers to build this into the website. Pay attention to these points:

• Keep the structure consistent and logical
• Give fields clear names that everyone understands
• Make sure events are triggered at the right time
• Do not put sensitive personal data in the dataLayer (remember AVG regulations)

A properly set up dataLayer will save you a lot of time later and prevent errors.

At AdPage, we have developed our own dataLayer for WooCommerce, Shopify, Magento and Lightspeed from which you can also retrieve the marketing and user information needed for analytics and marketing channel attribution. The reason we reflect that in the dataLayer is so you can override from the Google Tag Manager web container certain marketing IDs needed to work with webhooks. If you want to know how to set up the AdPage dataLayer and webhooks yourself, follow our documentation on setting up our dataLayer and webhooks.