Track Your Internal Promotions with Google Analytics Enhanced eCommerce Tracking and GTM (Part 1)

Enhanced Ecommerce Promo Tracking can be done with Google Tag Manager and an Custom JavaScript variable. If you have Ads leading your website visitor deeper into your website you might want to install this tracking technique. We will use the Element Visiblity Trigger as well as a Click Trigger and a Custom JavaScript variable to deploy our tracking. No dataLayer implementation needed

? Links:

Enhanced eCommerce tracking demo shop:

DataLayer Documentation:

Container Download:

In this video, I’m going to show you how you can track internal promotions like banners on your homepage with the help of Google Analytics Enhanced eCommerce tracking and Google Tag Manager. All and more coming up right after this.

Hey there and welcome back to another video of teaching you the data-driven way of digital marketing. My name is Julian and today I want to answer a question from our MeasureMasters Community. MeasureMasters Marco asked, how can I installed Enhance eCommerce promo tracking with the help of a custom JavaScript variable? Thanks for this question, Marco. We actually need to define a few things up front. What is Enhanced eCommerce promotion tracking? Well, the Enhanced eCommerce tracking is a feature set of Google Analytics that carries throughout different reports in Google Analytics. And you can track a whole lot with this but we want to focus on the promotion tracking.

Now, what are promotions in the sense of the enhanced eCommerce tracking? Promotions are, for example, banners on your homepage, where you actually want to bring the user deeper into the website or making them aware of a certain promotion that is going on right now. So for example, you could have a banner on the homepage saying we have 20% off on our shoes right now. So if the user clicks on this, then he goes to the category and he buys later the product may be. Now, you want to track how many people actually viewed this promotion, and then clicked on it and ultimately bought right. With the enhanced eCommerce tracking, promotion tracking, you can do all of this.

Now, Marco is asking here about how he can do this with a custom JavaScript variable, which is really interesting because normally, you would need to deploy extensive dataLayers in order to track enhance eCommerce tracking. We can do this all now with the help of Google Tag Manager, at least in the promotion tracking part of this because we can make use of a custom JavaScript variable. This gives us the information that we want to send over to Google Analytics. And we can do this all with the built-in tracking mechanisms of Google Tag Manager. We can utilize the element visibility trigger to track the view, and then also the click with our click tracking trigger. And this is what I want to show you in this tutorial. Now it got a bit longer so I split it up in two parts. In this first part, we’re gonna take a look at how we can actually track the view. And this is done with the element visibility trigger. And then in the second video, we’re going to take a look at how we can track the actual click on our promotion with the help of the click trigger. Now, we got lots to cover so let’s dive in.

Welcome to the Enhanced eCommerce tracking demo shop. This is something you can access yourself at and this shop was built by Google to show off how you need to implement the enhanced eCommerce tracking to get full functionality of it. In order to see what needs to be implemented into the dataLayer, you can always click on this information icon here. And you see if the user clicks on this product, we need to deploy this kind of dataLayer. But today we want to concentrate on a particular dataLayer and this is the promo dataLayer. Right here we have a promotion going on. And when we click on it, we go to a product and then we can buy the product. Now, in the enhanced eCommerce tracking specification, you can in particular track when the user sees this promotion impression, and then also clicks on it. And the data layer that you need to implement for click is this dataLayer right here. And for the view, we actually have them on that page view when the page loads. Now we have product impressions here. But also down below here we have the promo view. So these are two dataLayers that would need to be sent over for the impression or promo data to work.

Once that data available and sent over to Google Analytics, what would it look like? If we go over to analytics, we can go under the conversions then under eCommerce and marketing then internal promotions. This is where the data would show up. If we have enhanced eCommerce tracking installed, you could see the name of the promotion then how many times it was seen, how many times it was clicked. And from there, it calculates the CTR. And if the user has bought a particular product, later on, we would be able to also see the transactions that are connected to this internal promotion click. So really interesting data. By the way, you can also use this for non-eCommerce tracking websites. It is just what Google Analytics calls and enhanced eCommerce tracking feature. And if you are flexible and can ignore the eCommerce label, you can also track, for example, internal promotions for a lead generation website or certain elements on the homepage that you want to classify as promotions.

Now, in order to get that data in there, you normally would need to deploy these dataLayers on your page. So every time somebody clicks, this dataLayer needs to be pushed into Google Tag Manager’s dataLayer. From there Google Tag Manager can pick that up via a page view or an event tag and send that on to Google Analytics. In this video, I want to show you how you can accomplish this with the help of custom JavaScript. Why do I want to show you this? Well, there are cases where you really have only one promotion on your shop. So for example, here in our shop, we have one ad that is down here, it also goes to a product page and would be perfect for our internal promotions. But we don’t want to go back and forth with the developer. We know that there’s just one ad here that we want to track. And this is actually pretty nicely done with a click trigger and an element visibility trigger. So how would we set something up like this? Let’s start at the beginning, we would need to have the information that we get from our dataLayers here inside of our custom JavaScript variable somehow. Let’s set up these variables first. So I’m going to go over to the specification of the enhanced eCommerce tracking for Google Tag Manager. It gives us here all the different dataLayers that you can set up. We want to concentrate on measuring promotions. And let’s first of all, look at measuring promotion impressions. So the actual view. It gives us this dataLayer here. Let’s simply copy it and go over to Google Tag Manager. And under variables, we’re gonna build a custom JavaScript variable.

And a custom JavaScript variable always needs an anonymous function. So you need to enter an anonymous function and a return statement. Now, in this anonymous function, we want to implement our dataLayer right here. But we don’t want to push actually to the dataLayer, we have all the information available for Google Tag Manager to send onto Google Analytics. So what we can do is actually just push our eCommerce dataLayer. In that case, we would simply get rid of that dataLayer push here. And also at the end, we want to get rid of our parentheses. And that way, now we have a simple enhanced eCommerce object installed here. Now, what do we want to do with as object? We actually want to return it. So I’m going to put the return statement in front of our object here. And it will simply return an object with our promo view information in there. It’s correctly formatted because we took it out of the specification. And we can now customize this dataLayer. Now, in this particular dataLayer, you need to know a little bit about how you can read dataLayer information. I want to actually not track two promotions, two promotions are tracked here, I only want to track one promotion. I’m going to get rid of this first promotion here. And then I want to customize this. So every promotion needs to have an ID, it doesn’t matter which ID you gave them. Only if this is an ad that comes up over and over again, you want to have the same ID. Just going to go with one here we will name this ID and our case it is an ad for the flying ninja.

Now you can put in a different creative if you have different creatives for flying ninja and a position. These, by the way, are pushed into dimensions that you can also access by the secondary dimension. So if you put in creative here we have internal promotion creative, this would be the creatives and we also have the position.

So if you want to customize them, you can. For me, this doesn’t really matter because I just have one single ad. So I’m going to just keep this a skyscraper and slot two. But if you want to customize them, go ahead. All right, let’s give this all the name. This is a custom JavaScript variable for an enhanced eCommerce promotion view. And let’s just try this out to see what the preview debug mode says about our variable so we can check whether it was correctly formatted and everything is running. So let’s go to variables. And we see here our custom JavaScript variable is now of the return type object and it’s simply has enhanced eCommerce tracking object in here. This is the information that Google Analytics needs in order to build these reports here. So now we would need to transfer to somehow to Google Analytics. How would we do that? Well, through Google Tag Manager and a Google Analytics tag. Let’s go over to tags and build a new Google Analytics tag.

And this time, it will be an event tag because we just want to send this data over. It needs to have something to transport it. And I will choose event. And this will be an event promotion view. As a tag configuration, we take our Google Analytics tag. And as a track type, this time I choose event this will be a category of enhanced eCommerce. And as the action promo view, it doesn’t really matter what you put in here, this is just the event that transport it over. But I will choose the noninteraction hit true because I don’t want to mess with my bounce rate. And as the Google analytics setting variable, I have this already prepared so it goes to the right account. Now we need to tell this tag to pick up this enhanced eCommerce tracking data that we had prepared. So I’m going to go with the enable override settings and go to more settings. And here under the eCommerce section, I can enable the enhanced eCommerce tracking. This one will be set to true I can specify if I want to use the dataLayer or read from a variable. Now in normal enhanced eCommerce tracking, you would have the dataLayer filled and then pick up the data from there. So you would use the dataLayer. But in our case, we can choose the custom JavaScript ee promo view that we have just prepared. All right, that should do it. Just to show you what data will be sent over. We also want to check under the advanced configurations the use debug version true. This we transport some information into our developer tool. So we can actually see these enhanced eCommerce tracking data being sent to Google Analytics.

So I’m going to set this to true for now. Later, if you actually publish this, I would go back and set us to false because you don’t want to have that data always in your debug console. All right, and then we just need to choose a trigger, which trigger do we choose? We have an old pages trigger that would obviously mean that the ad would be triggered, or the promo view would be triggered on all the pages. We only want it to be seen on our particular page here. How can we target this page or every time the app is seen? This is actually pretty far down. So at the beginning, the user can actually see it. So I don’t want to send an impression over once the user lands actually on a page only if you scroll down and sees this ad. And this is something you can use the element visibility trigger for. So let’s go ahead and build one. I’ll go here to the plus and as a type, we choose element visibility. And now we can select a method to actually trigger this either an ID or CSS selector. Obviously, you would need to know a little bit of CSS and figure out what the right selector is. I’m going to go here and right click and go to inspect element. And this will give me the HTML markup. And luckily, for us, we have here our section, our section of the ad. And it has an ID, media image two. So I’m just going to double-click on that and copy it and fill that into the ID. In most cases, you will probably need to use a CSS selector, which gets more complicated as you try to filter down on the elements that actually should be viewed here. So I’m going to go with the ID though. And I can choose whether they should fire every time the element is seen. This would be this one once per element. So if you have multiple elements only once it will fire or once per page. I will choose once per page for our example here. And how much should be seen of that element? 50% is fine with me. Now, I don’t need to worry really choose any filters here as this will only fire if the media image two is actually seen. Now, let’s just give this a name. This is the visibility trigger for our ad. Let’s save and save this again here. And now let’s try to this all out, refresh our page.

Well, it’s already fired here because it just down there. Let’s reload again. Somehow remembers where I was at a time. Now let’s go to another category here.

Let’s go to the t-shirts and see if this works. Okay, now we are on the t-shirts page and we just gonna scroll down. And we see element visibility now fired. And our ee promo view has fired as well. Now, this information is sent over to Google Analytics. How can we make sure that it was actually sent? That’s where this debug view came in that we have activated in our tag. We can open up the developer tools again, right-click Inspect Element and here under the console, we should now have information available of what data was actually sent over to Google Analytics. First of all, we had our pageview. This is something that fires normally on the page as we have a pageview trigger installed. And then afterward, we should see an event and this event should have our enhanced eCommerce tracking data in here as well. So here’s our event. And we also sent over an EC add promo. And this is our ID, our name and so on. So this was sent over to Google Analytics correctly. We can look this up in the account on the real-time reports here on the events. You see events last 30 minutes, we have our enhanced eCommerce tracking promo view that was sent over. Now, this only tells us that the event was received by Google Analytics. But did it actually pick up the right information from our enhanced eCommerce tracking dataLayer or the eCommerce object that we send over? Let’s go over to our conversions and under eCommerce, marketing internal promotions, we need to set the right date. Just going to pick the last date and here we see some information already been received. So we have here our internal promotion and our promotion views and the clicks or something that test it out beforehand, which we’re going to get to in a second. All right, so this is how you can already send over information about the promo view. In the next video, we’re gonna take a look at how we can send over our click data to Google Analytics as well.

Leave a Comment