Enhanced Ecommerce Promotion Tracking (Part 2)

Enhanced Ecommerce Promotion Tracking (Part 2)


Welcome back. In this video, we’re going to take a look
at how we can track our enhanced eCommerce promo clicks with the help of Google Tag Manager
and our custom JavaScript variable. So like in the last tutorial, we already had
a closer look at how we can set up such a dataLayer inside of a custom JavaScript variable. Now, we want to also track our actual clicks. Now, these enhanced eCommerce tracking dataLayers
was built the same. But for our dataLayer here we have a promo
click as the action. And this is something we would need to change
in our tracking deployment for promo clicks. So let’s take a look at the specification
here. Down below, we here have the measuring promotion
clicks. And we want to do the same as with the other
one. Now, I’m going to just copy the whole thing
here, the whole dataLayer push. Okay, so this would be this year, going to
copy this and going to go over to Google Tag Manager and build an enhanced eCommerce tracking
promo view. I’m just going to copy this and going to call
this enhance promo click. Now, we had our dataLayer before, I’m just
going to replace this. So here we have our dataLayer. As I said, we are not really pushing anything
into the data, we just need the eCommerce object. So we can get rid of anything right here,
dataLayer push and back here. Now, this is built, especially for a tracking
scenario where you would forward the user on and you want to ensure that the data is
actually transferred. This is done within the event callback, we
can get rid of this portion as it is deployed through a variable here. So I’m going to get rid of these data points
as well. And this should give us our enhanced eCommerce
tracking object except for the event up here. This one is also something we wouldn’t need
as we are not deploying a dataLayer. We want to simply have our eCommerce data
object. Now, you see this promo object ID, project
object name, and so on. This actually needs to refer to the same data
that it was actually viewed. So we need to have the same data in here as
we had from the one that is viewed. So I’m going to just save this, for now, go
over to our view here and copy out our promotions view here. All right, let’s go over to the click data
and type that in as we had before. So now we are clicking on the same data as
via viewing. And if you know about enhanced eCommerce tracking,
you know that you need to keep data consistent. Otherwise, the data reports inside of analytics
won’t be filled correctly. So we have this now prepared. And again, we need to go through and build
a tag for this. In our case, this can also be copied. So let’s copy our event here. This time, it will be a promo click event. Also going to change the event tracking parameters,
this will be a promo click. And we obviously want it to pick up different
data, not the view data, but the click data. So this is now specified as well. And we want to change our trigger out. So let’s click here and get rid of our visibility
trigger. And in our case, it would be simply a click
trigger. So let’s go here for our clicks. And I’m going to go with the all elements
trigger. And let’s keep it generic for now, I’m going
to build a generic click trigger. Let’s save this. Before we move on, I need to configure my
built-in variables. So we actually have our click element, click
ID, and so on enabled. Let’s refresh our previous debug mode. Go back to our page and see how our variables
get filled. I’m going to click on the ad. Now, this didn’t do anything. Let’s refresh here again. Oh, that’s why we had a semicolon error in
our class some JavaScript variable. Let me just figure out what this is all about. It’s probably simply because we have some
white space here. Let’s get rid of this and save this, refresh. And this time it does it. Okay refresh our page and I’m going to click
on this with the command keypress. We have our GTM click our EE promo click already
fires, that’s fine, but we want to restrict it to only fire on our ad. So we’re going to look into our triggers here,
all variables and we see here our click classes get filled. And we have some information here about the
click classes. Let’s go with the WP image 71. So if that’s inside of our variables filled,
then we want to fire this so I’m going to turn our generic click trigger into a specific
one on our ad click and I’m going to install a filter and that
filter will be on the click classes if it contains WP image 71. Let’s save this. And again, try this all out. Press this button and we see our click has
fired. If I click anywhere else, it also generated
GTM click but nothing fires. So this works fine. And we have now deployed our data. Let’s see if it is received by Google Analytics. Let’s go back to the real-time reporting on
the events we see that there are some new events here. We had our promo click, three times promo
click and that data should then also have attached our enhanced eCommerce tracking data. We can actually check inside of our let’s
go on to inspect here this will open up our developer tools and we have under the console. Let’s reload our page actually. Here is our Google Analytics information. The page view has fired now also our page
promo view should have fired and now click with the command keypress. Yes, we get our data in here as well the creative
and so on. Everything that we have filled in. This time it’s a promo click so that data
was transferred over to Google Analytics. We already saw this here in the enhance eCommerce
click was just registered. Now let’s look into our conversions under
eCommerce reports, marketing, and internal promotions and go to the right date. And we see our internal promo clicks were
also registered here. So this data was transferred correctly. Now, this is it with this little tutorial. Just to recap, we have put in the right dataLayers
into an enhanced eCommerce tracking variable. And this is a custom JavaScript variable that
just returned our eCommerce object with the right data. And then we have triggered an event tag through
Google Analytics that transport that data over to Google Analytics correctly. So it doesn’t use the dataLayer. It doesn’t read from the database, it reads
from our custom JavaScript variable. And this is how you can fill these reports
without actually deploying a dataLayer. But doing everything through Google Tag Manager,
which is quite beneficial if you have only one promotion running on your page just like
this. All right, so there you have it. This was it with our little tutorial here
on promotion tracking with enhanced eCommerce tracking features. Now, it’s always astounding to me that you
can utilize all the built-in mechanisms of Google Tag Manager such as the element visibility
trigger and then also the click trigger to make this deployment happen. I’d love to hear from you if you run into
any problems or if you want to use this tracking deployment. If this helps you please leave us a comment
down below. I always love to hear from you guys. And if you liked this video, then give us
a thumbs up and also subscribe to this channel if you haven’t yet because we bring you new
videos just like this one every week. Now, my name is Julian, til next time.

3 comments

  1. I love watching your videos Julian, the promotion tracking videos helped me a bit on the java script side so thank you and keep it up with the good work, I hope 2019 will be a successful year for you! Cheers from Hungary! John O. 🙂

  2. Are the code scrips from the promo view and click variables not equal to each other (apart from the Ecommerce Measurement)?
    After the semi-colon error I
    1. copied the JS code from the promo view variable.
    2. pasted into the click variable.
    3. changed the Ecommerce Meassurement line, from promoView to promoClick.
    In GA the correct data from the clicks was received.
    In my opinion this is a lot easier than doing the modifications of the code 1:18 – 2:28, to get the same results at the end.

Leave a Reply

Your email address will not be published. Required fields are marked *