Ecommerce DataLayer Setup for Google Analytics | Part 2


In the second video of our three part video
series on ecommerce tracking with Google Tag Manager and Google Analytics, we are going
to talk about how you can transfer the information that you have available within your ecommerce
system over to Google Tag Manager. And this is typically done with a data layer. We’ve got lots to cover. Let’s dive in. Welcome back. In this lesson, we’re going to talk about
how we can set up our data layer to have the information available to send on to Google
Analytics ecommerce tracking. First of all, what is the data layer? You might have seen that name down here in
the preview mode before. The data layer is a central repository for
structured data. This lives in the background of Google Tag
Manager. And it provides Google Tag Manager with a
system to ingest data that comes from the outside. You can actually push data, whatever data
you want, into the data layer, and then make it available to Google Tag Manager. By default, Google Tag Manager already has
data that is pushed in automatically. And this goes in order. So first, we have to page view right here. This data is pushed first when Google Tag
Manager is initialized. Then we have the DOM ready and the window
loaded. And with this data in the data layer we can
now work with. Now this is not much information, because
the real power comes really in once you transfer data that is only available in your application. So in this demo shop, for example, to Google
Tag Manager in that structured way, so we can read from it and do our ecommerce tracking. Now, what information do we want to transfer
here from this demo shop? We have already seen it, it’s on the thank
you page. Let’s do another test order here. On this order receive page, we want to now
transfer data over to our ecommerce tracking. If we look at these reports, again, we see
we would like to have the transaction ID, the revenue, the tax, delivery costs, shipping
costs, and the amount. And even more information when we click into
product here, what product was actually bought? So how can we make this available in our data
layer tap here. For this we need to install a custom data
layer which pushes information to Google Tag Manager. What would this data layer look like? Well it needs to have a specialized format
which is explained in the documentation of the enhanced ecommerce tracking section of
our developer guide here. Now enhanced ecommerce tracking is fairly
complex there many data layers involved. What we are interested in particularly is
the purchase tracking or measuring purchases right here. And it gives us the data layer that we would
need to install gives us an example of the data layer that we would need to install. It doesn’t give us the exact code as obviously
this is always different from side to side. Now, where would we implement this code? This actually needs to be implemented onto
your shop system, because we want to transfer dynamic data over to Google Tag Manager, which
means that the data layer needs to change based on the order number, the total or the
products that have been bought. Now you might be thinking, Hey, why don’t
I just pulled us from our site directly. Well not every page actually displays the
information in this way. And that’s why Google Tag Manager actually
requires a standard to pull that information in, which is this data layer. So how can you implement this data layer? Now there are really three ways that you have
available. First up, it’s already installed, you may
have a shop system where the data layer is displayed already, you can go into data layer
and see here, all the transaction information that we saw in the first video. That would obviously be ideal but not all
ecommerce systems are so forward thinking that they have a default data layer installed. Second option would be to use a plugin. Now a lot of shop systems have the ability
to be extended by certain plugins that you can buy or download for free and install to
your installation. And additionally, add the functionality of
displaying the data layer on to the order receive page. If you want to go down that route and it’s
definitely an easier route than our next part, then you might want to Google and see if there
are any experiences out there what the best plugin is for your shop system. But if you have a complete custom shop, or
there is no plugin out there that actually works correctly, then you might need to install
this manually. This means you need to actually be going into
the code of your website in order to install this little bit of script. What you would need for this, if you want
to do it yourself is access to the actual back end code. So the PHP code, you would need to have access
to the server in order to alter the server code and implement this. If you work within a bigger company, chances
are that there’s somebody dedicated that takes care of the development of the website, so
you will need to get in contact with them in order to install this code. And this is probably the most common option
when implementing ecommerce tracking. Now you might not be very familiar with coding,
and therefore I want to give you a little bit of help how you can communicate effectively
with your developer. And it starts with sending over clear instructions
of what you want to have done. So I come up with a document here that you
can copy and send over to your developer, he knows what to do. First of all a title, then we have the objective
of our implementation,what do we want to have done, and official vendor documentation. So if they’re unclear about anything, you
can always see the official specs and what needs to be implemented from the Google Tag
Manager team, then your support email put in your email right here. Then the page of implementation, where do
you want to have this implemented only on the URL of the page. So in our case, that would be this one. But since our page always changes here with
the key, I’m going to get rid of this. And probably this would also be a number that
always changes. So I’m just going to put 111 in here. To make it clear, we want to have it on this
order receives page. Where do we want to have it within the HTML? Below the Google Tag Manager snippet code
right here. Then you might want to add a screenshot. So the developer has a test in case and knows
what you’re looking at once you want to have this deployed. I’m gonna just take a screenshot right here
and paste this into my document. So he knows, okay, this is really the order
receipt page. And then we come to the code example. For the code example, you will need to provide
a clear instruction. It is oftentimes not enough to just sent over
this document and say, please implement this, because the developer then would need to go
through and figure out himself what is actually necessary or not. So I’d recommend to take that code. And I’ve copied it over here. A few slightly variations with best practices
of checking if the data layers already there, and including an event key that is not in
this documentation. But I think it’s necessary and best practice
to include them. And then you would go ahead and fill out this
data layer. Don’t be afraid if you are not familiar with
coding right here, you just need to change the red values. Notice the variables need to be replaced dynamically
according to the order data, which means you come up with an example here that the developer
would recognize. First of all, the ID right here. We go back to our checkout page. And we see here, this is the order number
that I want to see inside of Google Analytics later, as the ID. I’m just gonna put this in here, or let’s
try this with Control Shift v. All right, then we want to have the revenue in here. Let’s see where the revenue is right here. I don’t want to have the dollar sign in there. And let me go through the rest of this document. And here, you can see that we need to have
the ID of the product itself. How would we would find that out? It always depends on your shop system, you
might want to look into the back end. We can just go back to this product here and
is the maybe I can find it in the HTML. I’m just going to go to inspect element here. And here we have product number 37. That should be the ID of the product. And by the way, you don’t have to include
all the different variables if they’re not necessary. So here is just name or ID are required, you
can get rid of these, but you would need to get rid of the whole line here with the comma
attached. Alright, we don’t need brand. Alright, now we have our data layer filled
out correctly. And hopefully, our developer will know what
to fill in here because he sees the product. He knows which order number for example, 6464. And he knows that these are actual products
from our store. Now what I would recommend is to also make
a copy of this in plain text, which is always a quick tricky thing with coding, as we have
different quotation marks, that could mess things up. So if you later put this into a PDF, you don’t
want to lose these. I’m going to copy this year. And I usually use GitHub for this to just
functionality. Put this in here and create a secret, just
don’t get this link, which I can also paste in here. All right, now that we have this ready, we
can send it off to our developer to and hopefully, after a short while he gives
us feedback, if this can be done, when it will be done. And at some point, if you can test this now
in the meanwhile, I want to play the developer here, just to show you what a developer would
need to do in order to implement this. Now, as you know, we are here on a WordPress
blog and the plugin that governs our ecommerce system is woo commerce. So in order to implement this, I would need
to have access to the backend, going to go to my WP admin section here. And from here, I can install the required
codes. A developer would probably do this a bit different
than I would do right now. And I wouldn’t recommend it to actually copy
these steps that I’m going through right now. I just want to demonstrate how you can implement
the datalayer manually and what would be involved in order to install a datalayer. So this next part will not be really applicable
to you, as you probably on a different shop system. But nonetheless, it will give you an idea
of how a developer would go about this. So first of all, he would see that he needs
to install this on a certain page, the checkout order receives page. Now this page is actually the page template
is something that is governed by our plugin, which is woo commerce. So we would need to alter some code in the
woo commerce plugin. Again, this is not something that is recommended
to do with a live plugin. So don’t try this at home. I’m going to go into our editor here. And we just turn off the preview mode and
choose our woo commerce plugin. From here, we’ll go to the templates and check
out and here we have our Thank you PHP. Now, this php file will be executed once you
get to the order receive page. And here is where we want to paste our code
at the bottom. Let’s put it in here. What is the code that we want to paste? Right here, we got it. So I’m going to copy this and put this into
our plugin right here. Let’s update this file and see what happens,
we can go to the checkout page and just reload this. And well, we would need to have the preview
and debug mode to see what happens. So I’m going to activate this again. And here we go. We have the transaction and the data layer
installed. This looks good exactly to our specifications. But I always caution you to develop might
have been not quite as alert, and have just pasted it in just like I did. You will need to see if these values are actually
dynamic. So in our case, 464464 that matches quite
nicely. What if I go through another conversion. So here, I get to the order receive page. And this doesn’t match at all, not the products
that I’ve bought, this is a static data layer will always push the same information into
the data layer. And therefore, we will need to go back to
the developer tell him these variables actually not dynamic there are just hard coded in. So please put in the right variable. So this will be dynamic. And this is where real back encoding comes
in. You will need to know your shop system pretty
well, the developer will need to know pretty well, in order for the ID to change dynamically
based on the user’s order. So for example, in woo commerce, you can get
the order details with a little bit of PHP right here. I echo out the order number from our order
variable and implement this into this field. So the ultimate medically be filled out. Let’s see if this actually works. Going to reload here, we have 465. And now in our data layer, we also have 465. The other variables obviously, are not correct
yet. Therefore, I will need to fill them out with
the correct code. I have something prepared here already, which
I’m going to copy paste in here. Now you see this is actually a bit more code
because it needs to be passed correctly. Also, the products depending on how many products
you have bought, you will obviously need to increase the different products that are these,
this product array to have 3,4, 10 or only one product. So we need to have some coding with for each
loop that goes through the different products. This might be an example of how the code might
look at. So I’m going to update this, go back to my
page, and then reload here as well. So we have our transaction data layer, let’s
see if it’s correctly built. And here we go, we can see that we have our
order ID, we have our revenue, which is hopefully correct. This is the subtotal would also need to include
the shipping costs. Now depends on you if you want to have the
revenue counted, including the shipping costs, including the taxes or without the taxes. And without the shipping costs as it’s the
case right here. I leave this up to you to decide how you want
to track your numbers within analytics. But this looks good to me. You might want to spot check certain values
that might not be the same in your template that you have created here. So other order IDs for the products, correct. Here we have a patient ninja should have the
product id 50. Let’s spotcheck this really quickly. And see if this is true. I see in the HTML. Yes, this is 50. So this should be the right product ID and
the implementation seems to work here just fine. So now we have the correct data layer available
to transfer data over to Google Tag Manager, picked us up with our tags, and then forwarded
on to our marketing tools. In the next lesson. We’re going to set up our tags and make sure
that data is received correctly. All right now we have the information that
we would need to transfer over to Google Analytics. But how do we do this? Well, with Google Tag Manager, you just need
to install the right tags, triggers and variables and this is what we’re going to do in the
next video which you can find up here. And if you haven’t yet, consider subscribing
to the channel as well because we bring you new videos just like this one every week. Now. My name is Julian. See you on the next video.

5 thoughts on “Ecommerce DataLayer Setup for Google Analytics | Part 2

  1. Thank you Julian! This is exactly the level of detail I was looking for. Only you have been able to consistently provided the information I need among all the videos out there! A++

  2. Excellent video as always Julian! Just mention that this code is only valid for sending over "purchase" event and other user-related actions that are pushed to the dataLayer. If I'm not wrong, you could deploy, say the "impressions" event, in the dataLayer declaration before the GTM container snippet, so that's a little caveat that developers should bear in mind. Other than that, kudos to MeasureSchool!

Leave a Reply

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