The Ecommerce dataLayer is a crucial part of our Enhanced Ecommerce Transaction Tracking we are installing with GTM. In the 2nd installment of our series, we will go through the process how to write a dataLayer Specification for your developer and I’m going to show you how a Dev would install this. Once the dataLayer is installed you’ll be able to pull the data into GTM for further processing.
? Links:
Google Analytics Ecommerce Tracking with Google Tag Manager (Part 1) https://www.youtube.com/watch?v=xgLGWvhOyHU
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 received 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.
Leave a Comment