- Have you ever run into problems
where the data layer provided the right information
but it wasn't in the format that you could use?
Then in this video you're gonna learn
how you can take existing data layer information
and transform it so it is useful
for your tags, triggers and variables
without having to implement everything.
And we do all this with the built-in capabilities
of Google Tag Manager.
Alright, more coming up right after this.
(upbeat music)
Hi there and welcome to another video
of measureschool.com where we teach you
the data-driven way of digital marketing.
My name is Julian and on this channel
we do how-to videos, marketing tech reviews,
and tutorials just like this one.
So if you haven't yet, consider subscribing.
Now, sometimes when looking
at already available information of the data layer
you might want to only pull specific information
out of the data layer.
The built-in data layer variable
is not as useful in this instance
because it can only pull out specific key pair values
and has no ability to actually transform the data
that you would need for your tags.
But we can utilize the very powerful
custom JavaScript variable to accomplish our goals.
So for this video you will need to know a little bit
of the basics of JavaScript to follow along.
But we'll also have the tags, triggers, and variables
that we're gonna present to you here
ready for you to upload into your account
at measureschool.com/transform.
Now, this is kind of advanced
so if you don't have much experience
with the data layer yet, I'll urge you to check out
our essentials training which will teach you
how to use the data layer effectively.
If you're already an experienced GTM implementer,
then we've got lots to cover, so let's dive in.
Today our journey starts in our Google Tag Manager account
where I have put our browser
in the preview and debug mode already
in order for us to see what's going on on our demo page.
Now, I want to go through some examples
on how you can transform the data layer.
First up, transforming the data layer into the right format.
Now, on this Test-Thank You page
there's the data layer deployed that is custom,
and if we look into the data layer we can see here
a transaction event that holds all the different
key pair values for our transaction.
Now, these are in a special format
and this is the format of the classic ecommerce tracking.
You might know that there are two ways
of deploying ecommerce tracking to Google Analytics.
There's the classic way of ecommerce tracking
and the enhanced ecommerce tracking way.
Now, both of those need different kinds of implementation
of the data layer in order to work.
So this is the format of the classic ecommerce tracking,
and there's also the enhanced ecommerce tracking way
of pushing that data.
Unfortunately, they are not compatible.
So if you want to switch over
from this classic ecommerce tracking data layer
you would need to re-implement
the enhanced ecommerce tracking data layer.
Which is unfortunate because really the data
is the same, it's just in a different format.
So how can we solve this problem
without having to re-implement the complete data layer?
I've come up with a little script here
that is built with the help of variables.
So let's go over to our variables,
and you'll be able to download out templates
at measureschool.com/transform later on
so you can upload those.
But I have an example here for a custom JavaScript
that takes in our transaction data layer
and goes through the different products
and then pushes that data
into an enhanced ecommerce tracking object.
So, in essence, our classic ecommerce data layer
will be transformed into an enhanced
ecommerce tracking object that we can then use.
How would that look like?
If we go over to Variables here
and we're able to click on our transaction event,
we can see that we now have an enhanced
ecommerce tracking object that we can now use
to send our transaction data over to Google Analytics.
All we need to do is go over and instead of choosing
to use the data layer for our enhanced ecommerce tracking,
we can simply read the data from a variable here.
So all you need to do then
is choose our predefined variable.
And that way we can use the enhanced ecommerce tracking
with the help of our transformed data layer
into an enhanced ecommerce tracking object.
So we have transformed our classic ecommerce tracking
data layer into an enhanced ecommerce tracking friendly
ecommerce object.
And this is one example of how you can take data
and transform it to work with the format
that you need to use for your tags.
Alright, next up let's talk about
how you can piece together certain data points
that are available in the data layer
so you can output your preferred format.
In this example I have an enhanced ecommerce tracking
data layer on this Test Thank you Page,
as we can see here, and I want to try to pull out
certain product details here and push them into an array.
How can this be useful?
So for example, when we implement
the Facebook conversion pixel
and use an advanced form of tracking that data,
we might want to not only put in the value or the currency,
but rather also the different products that were bought.
So here we have the different product IDs
that need to be transferred over to our code.
How would we do this?
The data is practically already here
but how can we access it and put it into the right format?
Again, I have come up with an example here
as a custom JavaScript variable can pull out
the right product IDs from a given data layer.
In this example I take the data layer
and access our enhanced ecommerce tracking data layer,
go into the purchase object and then the product object.
So in essence we access our ecommerce,
then purchase, and then products object.
And then I write a little bit of a loop here,
a for loop, that goes through the different products
and pushes the ID back to our array
which we will then return later on.
How would this look like?
Let's go over and look into our Variables
and another transaction event, we can here see
our custom JavaScript product ID,
and now it is in the right format so we can use it
for our Facebook transaction pixel.
This is easily done by going into the tags
and creating a new Facebook audience tag.
Right here we have our base code
and down here we simply use our predefined variable
in our code so we can push the right content IDs.
So, in essence, we have taken our custom JavaScript variable
to access our predefined data layer
and pull out pieces of information
and transform them into a variable
that can be used in our tags.
Now, another example of this would be
to actually go through each and every product
and use the quantity metric here and count that up.
So I've built another variable for this.
It's the custom JavaScript product quantity
that you can also find in our tag template.
Alright, in our final example I want to show you
how you can import data that might be already
available to you through other forms of implementation.
So for example, on this Thank You page
there is already a data layer of sorts implemented
but it's in a different format,
and this is the Qubit format.
Now, Qubit is a software that offers
a lot of different capabilities of personalization
on a platform, but they use their own data layer form
that is called the Universal Variable
that's implemented on the page.
Now this is, again, a data layer of sorts
which is stored in a JavaScript variable
just like the data layer.
Now, this is easily accessible
if you can use the Developer Tools
so let's go over here and open up our Developer Tools
and enter the JavaScript console.
And we can simply put in universal variable,
and we see here we have an object
and that is certain information in there.
Now, this object holds a lot of data
that we would like to use for Google Tag Manager as well.
Unfortunately, it's not really
in the format of the data layer,
but as we have seen we can transform that later on.
First of all, I would like to import that data
into the data layer.
How can we push that data without implementing
a new data layer into our platform?
We just need this information to be pushed
through JavaScript into our data layer,
and this can be easily done via a custom tag.
So let's go over here to Google Tag Manager,
I have something prepared as well,
which is a data layer push,
and this simply takes our syntax of the data layer,
checks whether it's already available,
and then pushes our universal variable
with the universal variable key into our data layer.
There's a special event here, universal variable,
so we know when it is available.
How would this look like?
If reload this page,
our preview and debug mode shows
that we have a new universal variable
and the data layer then exposes all that information
and it's now part of our data layer.
So we have, in essence, imported an outside variable
into our data layer.
And this might be useful if you have
an existing tag management system or personalization system
which already holds all the data that you would need.
You just need to implement it into your data layer
and now you'll be able to build your own
data layer variables, transform the data,
and use it in your tags and triggers.
So there you have it.
This is how you can transform a data layer
to get the values you need for your tags.
If you want to download our tag template
with all the scripts in there,
you can head over to measureschool.com/transform,
and they'll give you a file that you can directly upload
into your Google Tag Manager account.
Now, there might be many other use cases
for this kind of transformations
that you do to the data layer,
so I'd love to hear from you.
If you have encountered any tricky situations
that you could solve with this technique
then leave a comment below
and share your measure approach.
As always, if you like this video
then hit that Like button,
subscribe to our channel and stay tuned for the next video
which will come out next Wednesday.
My name is Julian.
Till next time.