Enhanced Ecommerce Promotion Tracking (Part 2)

Google Analytics Enhanced Ecommerce Tracking can be installed with Google Tag Manager. In our last part (link below) we discovered how to track the view of a Promotion with the Element Visibility Trigger. In this part, we are going to track the click of the Promotion.

Part 1 – https://www.youtube.com/watch?v=AiONF_O9Dbk

πŸ”— Links:

Enhanced eCommerce tracking demo shop: https://enhancedecommerce.appspot.com

DataLayer Documentation: https://developers.google.com/tag-manager/enhanced-ecommerce#promo

Container Download: https://measureschool.com/wp-content/uploads/2018/12/EECPromo.json

πŸŽ“ Learn more from Measureschool: https://measureschool.com/products

πŸ”€ GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

πŸš€Looking to kick-start your data journey? Hire us: https://measureschool.com/services/

πŸ“š Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books

πŸ“· Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear

Facebook: http://www.facebook.com/measureschool
Twitter: http://www.twitter.com/measureschool
LinkedIn: https://www.linkedin.com/company/measureschool

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.


Leave a Comment

1 Comment threads
2 Thread replies
Most reacted comment
Hottest comment thread
2 Comment authors
Khrystyna GrynkoJulian Juenemann Recent comment authors
newest oldest most voted
Khrystyna Grynko
Khrystyna Grynko


why install GTM enhanced ecommerce using custom JS in gtm contener and not put the datalayer directly to the website and implement everything as Google suggests ?
Just want to understand the reason.

Thank you

Julian Juenemann

yes, great question. I guess it depends on the use case. A proper dataLayer implementation is always preferred. But some people don’t have the resources or a developer to get it implemented. With just one banner this method is easier and faster…

Khrystyna Grynko
Khrystyna Grynko

Oh, ok, I see, thank you very much for your reply.