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 and 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.