- In this video, I'm gonna show you
how you can capture the value of your conversion
with Google Tag Manager to implement a conversion value
in your tags such as the conversion tracking of AdWords
or the Facebook pixel, all in all coming up,
so let's dive in.
(upbeat techno 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 let's get started talking about
the conversion value, which are important
in conversion tracking.
So for example, in these tags here
for the AdWords conversion tag,
we have a conversion value that is filled out
with the number one.
And this field is important because once a conversion
is reported back to AdWords, we would tell AdWords
that this conversion is worth one dollar or one euro,
depending on your currency that you have declared.
Now at the moment, in this tag at least,
this is hardcoded with the number one.
So every time a conversion is reported back to AdWords,
it would be reported as the value of one,
and this would actually count up.
So if you have 10 conversions, you would have $10 reported
as the total value of all these conversions together.
Now in some cases, this might actually represent
the actual value of this conversion
if you sell only one product on your page
with the price of one dollar.
But in most cases, with e-commerce stores,
especially we have different kind of products
in our portfolio which have different prices.
So depending on what we put into our cart
and check out with,
we would get a different total value for our order.
So right here, we have a total order of $17,
which we would like to transfer to our AdWords
conversion tracking, but also
to our Facebook conversion tracking and a sales event
that fires off to Google Analytics.
So how can we transfer this conversion value of $17
over to our quote?
Now there are different methods here,
and I will first show you the preferred
and the best practice method of doing this,
which is actually implementing a custom data layer.
What does that mean?
So for example, let's go into our preview in debug mode
in our console here, and let's go to one conversion again.
Take this product this time.
And this time, we get the conversion total value of 40.
And on this page, which is built on an installation
of WordPress plus the plug-in WooCommerce,
we actually have a custom data layer implemented,
which we can see in our preview in debug mode
when we go to data layer here.
We see that there's a data layer that we have
the information available to actually send on to
our different tools.
So we have here a transactionTotal value,
we have the transactionId,
but also all the products that have been brought.
Now how do you implement something like this?
This will greatly vary from the installation
that you probably have on your shop or on your CMS.
In our case, we were lucky because there's a plug-in by
Thomas Geiger, the DuracellTomi Google Tag Manager plug-in
for WordPress, which you can install and which will
enable the data layer for you on this transaction page.
But this might be different for your set up.
So if you're on the gentle on (mumbles) shop,
you might be able to install a plug-in
that does this automatically for you.
In another case, you would actually need to consult
your developer, asking him to transfer this conversion value
into the data layer so you can pick it up from there.
Now how do you pick actually this
total transaction value up?
Well, a data layer consist always of keyvalue pairs.
So in our case, we have here our key and our value,
and so we simply take the key here and put it
into a variable, which we can build.
So let's go to variables and define a new variable,
which we will call the
dataLayerTransactionValue,
and go ahead and select
our data layer variable as the type.
And here we just simply need to import the key
that in our case was the transactionTotal.
And that's already it, we can create this variable
and refresh our preview in debug mode.
Now we need to go through another order quickly.
And on our transaction page, we can see in the preview
and debug console our different tags that fired.
But also up here, how the variables got filled.
For that, we first need to select an event.
Our tags fire on the PageView events,
so I'll go with PageView here, click into Variables
and we can see our dataLayerTransactionValue was set to 25,
which in our case is the total amount of 25.
So we can tag already this data transaction value
and implement it into our tags.
This is pretty easily done by going into the tag
and every time you see this little break here,
you have variables available.
So let's get rid of this number one
and click on this little brick.
We get our dataLayerTransactionValue,
which is marked by these two curly brackets,
which usually describe a variable.
Now every time this variable is called,
it will pull out the data from our data layer
and transfer it into our tag.
So this is one of the methods of how you can transfer
the data to our tag, and it's actually
the preferred method in Google Tag Manager
because with a proper data layer integration,
we have the data available
in a structured way
and Google Tag Manager can access it
through the methods that it has available
whatever tool we want it to transfer onto.
I'm going to show you the second method here of doing this
which is generally called scraping from the actual Dom.
Just important to say that the data layer variable
is not as error-prone as the scraping method
because the scraping method actually relies
on the displaying of the values on the page.
So if the page changes, your tracking might be affected.
With a proper data layer integration,
you don't run the risk of having your data
being affected by a change that happens
on the presentation level.
But onto our next adventure here
to get our total value out of this page,
and which is the method of scraping.
Now I've talked about scraping before in another video
about the Dom element variable,
which you can check out in our previous videos.
But in this video, I'm going to show you another method
of doing this with actually JavaScript.
Now let's look at this page a little bit closer.
We can actually look into the underlying HTML
by inspecting the element that we are interested in
by right clicking on it and then inspect element.
This is the case in Chrome.
And we can see the HTML markup and how it's marked up.
Now with a JavaScript variable, we could actually
access this element and pull out directly
from the document object model
our amount of $25.
Now there's no problem for somebody who knows JavaScript
or jQuery, but all of you out there who don't know
JavaScript in detail, I can recommend to you a plug-in,
the GTM Macro Builder, which you can download
in the Chrome extension store,
and it will write this JavaScript
that you need automatically.
So how does it work?
You simply need to mark your desired element.
So in our case, this would be 25.00.
We don't want to have this dollar sign in our later value.
And then you go over to the console
in the development toolbar.
Let's get rid of this.
And click on our GTM Macro Builder.
It will give you back some green code,
which you can simply copy.
And in order to see what it does, we can actually
put it into the console here and press Enter.
And we see it will return a string of our number, 25.
So how would we make this accessible to Google Tag Manager?
Well, we can build a custom JavaScript variable.
Let's go over to our variable menu
and create a new variable, which we'll call
DomTransactionValue.
And as a type, this time we'll choose our custom JavaScript
that we want to implement.
Now it's important to follow the rules because we need to
in our function that we need to input here,
return a value.
I have a snippet here prepared that I often use,
which will basically do the same as our anonymous function
that we need to implement, just with a catch there
is a try catch error in order to circumvent
any kind of errors that might happen in our code.
Now we can simply use the code
that our GTM Macro Builder gave us
and implement this as behind our return function.
So here we go.
We can create this variable.
And let's try this all out.
We'll reload our page here.
Choose the right event.
Go into Variables,
and we see our DomTransactionValue now holds
the right number out of our total value.
Now with this transaction value, we can also fill our tags
by, for example, going into our Facebook tag here,
looking for the right place to put this in.
Here's a value we can define.
It is also filled with one.
And also, like in our tag template for AdWords,
we can implement variables by using the curly brackets
and implementing our DomTransactionValue.
Let's save this all
and try this all out.
Refresh this
and go with another order.
And on the transaction page, our different tags fire
on the PageView event.
We can look into them.
For example, the AdWords event, which pulls
from the data layer, and we see this value here,
which is underlined with a gray box.
But what we can do is up here, kind of select values
that we want to see.
And we see that the right value of 40
was transferred into our tag.
Now this pulls directly from the data layer.
In our Facebook example, we can also use values here
and look for the right place where we implemented
our variable, which is over here and also here.
It shows our $40, this time pulled directly
from Dom element.
So these are two methods to import
the conversion value into Google Tag Manager,
and then send them on to your marketing tools.
Now this works particularly well with conversion tags
such as AdWords, Facebook conversion tracking
or a Google Analytics event that you send a event value with
in order to later build the goal of.
This won't work for Google Analytics e-commerce tracking.
For that, you will need a proper data layer integration
because there are much more values transferred over
to Google Analytics than just the total conversion value.
(upbeat techno music)
And that's already it with this week's video
of measureschool.com.
If you want to get an example of all the different tags
and variables that we have implemented in this video,
then you can head over to measureschool.com/conversionvalue
and download a tag template that you can upload
into your Google Tag Manager account.
If you have any questions, please leave them
in the comments below, and I would be very grateful
if you could like this video or subscribe to our channel
so we can bring you more these tutorials every week.
My name is Julian, till next time.