How to Transform the Data Layer with Google Tag Manager

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. 

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!

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

🚨 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: 

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. 

Custom JavaScript variable code for the products and their product IDs

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.

Accessing the preview and debug mode from the Google Tag Manager account

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. 

Identifying key-pair data points from the data layer section of the quick preview window in GTM preview mode

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. 

Configuring a custom JavaScript variable to identify the key-pair data points in the data layer of GTM

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. 

Verifying the key-pair data points from the preview window of GTM

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. 

Using the transaction value variable to read the data values instead of the data layer in the GTM event Tag

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. 

Accessing the data layer information to pull specific product details from the GTM preview window

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. 

Formatting the information of the data layer in GTM to pull out specific product details from the transaction event

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. 

Configuring a custom JavaScript code for accessing the products and their product IDs through eCommerce data layer tracking

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. 

Creating a for loop and a return function for accessing product IDs from the GTM data layer

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. 

Verifying the product IDs from the variables section of the transaction event on the GTM preview window

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. 

Configuring the predefined variable in the base code to push the content for product IDs in the GTM data layer

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.

Counting the quality metric data for all the purchased products in the transaction event in GTM

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. 

Universal variable code that is stored in a JavaScript variable for implementation into the data layer

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

Configuring the universal variable into the JavaScript console of the browser

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. 

Configuring the universal variable to push the data into the data layer of GTM

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. 

Verifying the output of the data layer values after configuring the universal variable to pull specific information

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. 

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! 

JOIN US!

Master Data & Analytics with Measuremasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Owen
Owen
2 years ago

how would you write the custom JS for a standard data layer to reformat your data without converting into an enhanced ecommerce format.

Blog Categories

Want to find the Best Sources for Learning GTM? Subscribe & Get our FREE Resource Guide

Google Tag Manager FREE Resource Guide

now it's time to

Start measuring like a master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.