How to Transform the Data Layer with Google Tag Manager

Last Modified on June 6, 2024

Have you ever run into problems where the data layer provided the right information, but it wasn’t in the format you could use?

A data layer includes all of the information you want to pass to Google Tag Manager into the data layer, and triggers can be set up based on the variables’ values or specific events. 

Sign up to the FREE GTM for Beginners Course...

GET THE FREE COURSE

In this guide, we’ll learn to access existing data layer information and transform it to use in your Tags, triggers, and variables – all of it with the built-in capabilities of Google Tag Manager!

🚨 Note: If you want to create super versatile and precise tracking deployments, check out our handy guide on How to use RegEx for Google Tag Manager

An overview of what we’ll cover: 

• Understanding the data layer
• Transforming the data layer
• Formatting the data layer ready for output
• Pushing new data into the data layer with JavaScript

So let’s dive in!

Understanding the Data Layer

We have large quantities of built-in data in our data layer. However, we might only want to pull specific information according to our needs. 

The built-in data layer variable may not be useful in such instances, as the variable can only pull specific key-pair values.

Moreover, a built-in variable can’t transform the data according to your Tag needs. 

This is where we can use the power of custom JavaScript to accomplish our goals. 

We recommend that you learn the basics of JavaScript to follow along with this guide. 

Moreover, we’ll also provide you with Tags, triggers, or variables and their codes that you may need to follow this tutorial.

In addition, we also recommend you have a basic understanding of the functioning of the essentials of GTM to understand the data layer for this advanced guide. 

Let’s open our Google Tag Manager account. We have already put our browser into preview and debug mode.

But before we start, let’s go through some examples of transforming the data layer. 

Transforming the Data Layer

The most important aspect of pulling the information from the data layer is to transform the data layer into the right format. 

Let’s open a page to understand the format of the data layer. 

We’ve opened the Thank You page on our website. 

As we’re in preview and debug mode, we can access the Data Layer from the quick preview window on the browser. 

This is a custom data layer. Our transaction event data contains various key-pair values of the data. 

There are two different ways of deploying the data into Google Analytics. This particular format of data is called classic or Standard eCommerce tracking. 

There is also an Enhanced eCommerce tracking system. 

Both of these methods require different types of implementation of the data layer. 

Unfortunately, these tracking methods are not compatible with each other. 

So if you want to switch over from the classic eCommerce tracking system provided in the GTM data layer, you’ll need to reimplement the enhanced eCommerce tracking system. 

Your data will still remain the same, but just in a different format. 

We have come up with a solution to switch data formats without reimplementing the complete data. 

It’s a script that is built with the help of variables. So let’s open Variables and configure them. 

You can download our data layer transform template. Upload those templates to your GTM account. 

Let’s take an example of a custom JavaScript variable. 

It takes the input of the transaction values from the data layer, goes through various products, and pushes that data into an enhanced eCommerce checking object. 

In general terms, we’ll transform our standard eCommerce data layer into an enhanced eCommerce checking object. 

You can verify its output by navigating to the transaction → Variables section in the GTM preview window of your browser. 

We can use this enhanced eCommerce tracking object to send the transaction data to Google Analytics. 

You can easily perform this action by altering the data course in your Tags. 

Navigate to your transaction event Tag, and modify the enhanced eCommerce features to read the data from the variable, instead of using the data layer. 

This way, we can use the enhanced eCommerce tracking with the help of our transformed data layer into an enhanced eCommerce tracking object. 

This is just one example of taking the data and transforming it according to our specific needs. 

You can also piece together certain data points from the data layer itself and format them in your chosen format. 

Let’s see how! 

Formatting the Data Layer Ready for Output

In our example, we have enhanced eCommerce tracking data layer installed for a Thank You page on the website. 

We’ll pull specific product details to push them into an array. 

This can be very important in certain situations. 

For example, suppose you use an advanced form of tracking the data while implementing a Facebook conversion pixel. 

Along with the currency values, we’ll also need the data of the purchased products on the website. 

We have different product IDs that can be transferred by using a code. We need to access them and transfer them into the correct format. 

We solved this problem by creating a custom JavaScript variable that can pull out the correct product IDs from the given data layer. 

First, let’s access the enhanced eCommerce tracking data layer, access the purchase summary through it, and then access the product ID. 

Our path will be to access eCommerce tracking → purchase → products. 

Finally, we’ll configure a for loop in our code that accesses all the products and pushes the IDs back to our array. 

Additionally, we’ll add a return function following the for loop. 

Let’s see what it looks like. 

Navigate to transaction → Variables on the GTM preview window of the browser. 

If the configuration is correct, you’ll see the product IDs accessed by the custom JavaScript variable in the correct format. 

We can now use these values for our Facebook transaction pixel. All you need to do is create a new Facebook audience Tag. 

Add the predefined variable in the base code to push the right content for product IDs. 

Overall, we have taken our custom JavaScript variable to access our predefined data layer, pull out pieces of information and transform them into a variable that can be used in our techs.

Another use can be to go through all the products and count their quantity metric data.

We’ve built a custom JavaScript product quality variable for counting the metrics. You can find the template for this Tag as well on our website.

Pushing New Data into the Data Layer with JavaScript

This example specifically deals with importing data that is already available through other forms of implementation. 

Suppose we already have a data layer implemented on the Thank You page, but the data is in the Qubit format. 

Qubit is software that offers a wide range of capabilities and personalization on the platform. 

 It uses its own data layer called the universal variable, which is implemented on a new page. This is a data layer that is stored in a JavaScript variable. 

The code can be easily accessed through the developer tools. If you aren’t familiar with them, check out our handy guide on developer tools for marketers.

Navigate to the developer tools and enter the JavaScript Console and input the universal variable. 

You’ll find the object that contains all the data points. 

We’ll import this data and transform it into a usable format in Google Tag Manager. However, we need to push the data without implementing a new data layer into our plan. 

We can create a custom Tag and push this data through JavaScript into our data layer. Let’s open Google Tag Manager. 

We have created a Tag that takes our syntax of the data layer. You can find the Tag template on our website. 

It checks whether the data is already available or not, and then pushes our universal variable key into our data layer. 

Let’s see what the implementation would look like. 

After installing the Tag, let’s open the preview and debug console and refresh the website.

Open the universal_variable → Data Layer. You’ll see the information as a part of the data layer. 

So, overall, we have imported the outside variable into our data layer to make the information accessible. 

You can use this effectively if you have an existing tag management system or personalization system that can hold your data and implement it into your data layer. 

FAQ

Summary

So that’s how you can build your own data layer variables, Tags, and triggers, and transform the data layer according to your specific needs. 

The data layer contains information about all the events or variables. You can use this information effectively by using the tools on your GTM account. 

Additionally, once you have transformed the information in the data layer, you can also try to pull the information from the data layer variable into your Google Analytics account.

Which template did you use for your website? Did you implement any other modifications to the data layer? Let us know in the comments below! 

Sign up to the FREE GTM for Beginners Course...

GET THE FREE COURSE