Learn how to install enhanced eCommerce transaction tracking onto your purchase pages. All the more coming up.
This video is brought to you by our premium membership MeasureMasters. If you truly want to master the art of analytics and data, then become a member today and get access to over 70 hours of premium video content, exclusive tools and mingle with other fellow MeasureMasters in our community. And if you ever get stuck, I’m there for you to answer your questions and support you along the way to measure mastery. Join today and become a MeasureMaster.
Hey there measuregeeks, Julian here. Back with another video for you. Today, we want to talk about eCommerce tracking. A topic that I have avoided over the years to actually put on the channel because it’s so much more complex than what you think about as there are many different platforms out there like Shopify or Magento. And for every platform, it’s differently installed. So I always tend to stay away from it as a bred a lot of questions. I have a whole video series inside of our membership site measuremasters. But today, I want to take a little attempt at solving this issue for you the eCommerce tracking as we’re going to install, and I’m going to show you how to install enhanced eCommerce transaction tracking onto your purchase pages. This is just a tiny bit of the enhanced eCommerce tracking feature set of Google Analytics. But I wanted to show it so you know how this process would go along. Because we need to install an extensive data layer. And then we can transfer that information on to Google Analytics, and also to our Facebook Pixel or our Google Ads conversion tracking.
Now, as I mentioned at the beginning, this is more complex than it seems. And therefore I wanted to take my time and I’ve split this up into three parts. In this first part, we’re going to cover what we actually going to install and what we need to prepare in order for us to go the next step, which is setting up the data layer, which we’re going to do in this second video. And then in the third video, we are actually going to set up our tags. So we can take that sweet information that we have now in the data layer and forward it on to our tools to Google Analytics, Facebook Pixel, and Google Ads conversion tracking. Now, as I said, we got lots to cover. Let’s dive in. All right, welcome back to our demo shop. On this demo shop, we want to install Google Analytics eCommerce tracking today. So just to demonstrate what this would look like, I’m going to go through a quick order here.
And once I get to the thank you page, we can see that we have several tags firing here. At the heart of all of this is our Google Analytics event enhanced eCommerce that sends our data over to Google Analytics. This is done in form of an event. So in Google Analytics, under the real-time reporting, we should be able to see our event information that just came in. Here we go, our transaction information and this sends with it data from our data layer that we have implemented. So what products were bought, transaction ID and so on. We also have an extension available for our Chrome browser. So if you go into the developer tools, you should be able to see what data got sent over. The extension is called the GTMGA debugger which you can install onto your browser. We’re going to reload this here. And here we have a tab called enhanced eCommerce that you can click and this is where it was sent to and all the information that was sent over with our order. Later on, we should be able to see this inside of Google Analytics under our conversion reports, here under eCommerce. And then we should have our sales performance, for example, filled with the information that we have retrieved from our data layer.
Additionally, as you might have seen, I also fire a Facebook purchase event and a conversion purchase event to Google Ads. But that’s something we’re going to set up in the end. So how will this implementation go down? At the heart of all of this is a special kind of data layer. This is an enhanced eCommerce tracking data layer that we need to implement onto our page. This is not something that we presumably be able to do ourselves unless we use a plugin, or it’s already pre installed. But I’m going to show you a way to write specification for your developer to get this implemented correctly. Once this is there will be able to configure our tags, we’re going to go through this step by step but also going to give you a container download in the description below. So you can install this easily to your Google Tag Manager container. Last but not least, we should be able to see our data in Google Analytics, Facebook and Google ads and have our tracking correctly set up. Now what do you need in order for this implementation to work? First of all, you would need to have Google Tag Manager installed, which we obviously have here already. If you’re not sure, if Google tag manager has installed correctly, go went to your Google Tag Manager account and click on the Preview button to see if on your page then your preview mode pops up. This is an indication that Google Tag Manager is correctly installed.
Then on the Google Analytics side, we also need to prepare something in the admin section. You will need to go under the view that you send the data to under the eCommerce settings here and enable eCommerce and also enable enhanced eCommerce reporting. Save this and we have our Google Analytics prepared to receive that data. Last but not least, you probably want to figure out a way that you can do test conversions easily on the shop that you’re working on. Either offline on your local machine. Or if this is a live site, you might want to get a coupon code setup or test credit card because we will be working with this order receive page, which obviously only can get to want to go through the whole checkout flow. So this will not be a one-time thing. So best is to get something set up that you can do this more often in order to see if your data is coming through correctly. Now with this in place, let’s get started setting up our data layer in the next lesson. All right, this is it with the first part of this three-part video series. If you haven’t yet, then maybe subscribe as the video is not yet out, but maybe you can already find it here. So follow along in the next video and I’ll see you over there.
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.
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.
In the final video of this E-Commerce tracking series, we’ll setup our tags in Google Tag Manager
We have gathered our important information and it’s ready to be used in our tools like Google Analytics, the Facebook Pixel and the Google Ads Conversion tracking code. But how can we get the data from the dataLayer to these tags? With Google Tag Manager! In this final video of our eCommerce tracking series, we will go through how we can setup all the triggers, variables and tags in GTM to properly transfer our data to these tools and ultimately track our conversions.
GTM Container Download: https://measureschool.com/wp-content/uploads/2019/09/EcommTransactionTracking.json
In this third video of our three part video series on ecommerce tracking with Google Analytics and Google Tag Manager, we are going to talk about how we can take that sweet information that we have now gathered in the last videos and transfer it onto our tools like Google Analytics, the Facebook Pixel and Google Ads. We just need to set up the right variables, triggers and tags to do this, and this is what we’re going to cover in this video. Now, we got lots to cover. Let’s dive in. In this lesson, we’re going to set up our tags in Google Tag Manager and forward the data on to our analytics tools. So let’s get started.
First of all, let’s look at this data layer. We have information available here. And on the left side, we see our events when the data is available. So on the page view right here, the data is not at the data layer. On the next event, this is a transaction event, which we have coded into the data layer, we have that information available. Now we are able to send on the ID and all the product names and so on to our tools, such as Google Analytics. So this is very important because we can base our trigger of that. So let’s head over to Google Tag Manager into our trigger section first, and create a custom trigger. So go to new here. And this will be a custom trigger for our transaction. And as the configuration we don’t want to fire this on page view, we want to fire it on the transaction event, which is part of this menu. But we can choose the Custom Event right here, where we put in transaction. We don’t need to fill out any filters here because this transaction event only happens once on the order receive page. So we can go with all custom events. And save this.
So now we have a distinctive point, when to send off the data. And we can proceed with creating our text. Now I have already a Google Analytics pageview tag installed and a variable, a Google Analytics settings variable that Google Analytics knows where to send the data to. So just to show you how I set this up. This is my Google Analytics settings terrible, I just pasted my tracking ID from my account in here. Now this page view will not send our enhanced ecommerce tracking data over. We will need to set up a tag that transports that data over. So let’s go over to new. And let’s give this a name. This is a Google Analytics event tag for our transaction data. And as a tag configuration will choose our Universal Analytics. And the track type, you might be tempted to choose transaction. But this is actually not the right track type to choose as this is connected to the classic ecommerce tracking, which you could still do. But nowadays, I would straight jump to enhance ecommerce tracking to implement. Now for enhanced ecommerce tracking, there’s no track type that sends over transaction data particularly. You would need to have other tags such as a pageview tag or an event tag to send that data with your event. So we go with event tag here as we can not make it inflate our pageviews. And as a category, we’ll just go with enhanced ecommerce. And as the action would simply choose our event here which pertains to the event key that we have right here. We can leave the label and value empty. Or if you want, you could add let’s add the page path to our label. The non interaction hit I would turn to true as it fires after the pageviews. And we’ll choose our Google settings variable. So Google Analytics knows where to send that data to. Now the last setting we need to set is to actually pull that data from the data layer and transfer with our event. So go to enable override settings in this tag and under more settings we’ll choose our ecommerce settings right here. And now we want to choose enable enhanced ecommerce features. Yes, we want to do this so true. And we want to utilize the data layer because we have the information available here already. Last but not least, let’s add our trigger which we have pre-configured and save this. Let’s refresh and go back to our page. Let’s reload that
and we see our Google Analytics event transaction has fired. We should also be able to see this in our tag assistant, we have one event here. And obviously also inside of Google Analytics under the real time reporting in events. And here we saw an event just happened. It will be under the events last 30 minutes as as it is a non interaction hit event. And here we go. We have our enhanced ecommerce transaction data. Here we go. Now what data gets sent over will later be seen inside of the conversions. Ecommerce reports here under sales performance. So we should be able to see this later on. This sometimes takes a while. So on the other end, let’s look up with our GTMGA debug extension enabled. Let’s go over to our developer tools. Here we have our GTMGA debugger. We would need to reload the page. And here we go. We have our enhanced ecommerce tracking. We click on our container. We see what data got sent over. And we also see the different products right here. So again, this is something you can check and see if is the right data that you have actually bought. But this is just pulled out of the data layer. If you don’t see anything in the enhanced ecommerce tracking tab right here, then this data might not have been correctly sent to Google Analytics, your tag might be not configured correctly.
And we’ll choose the data layer variable, we need to set up the right key here. So we’re going to go back to our order receipt page. Under transaction, we have our data layer available. And here see the revenue right here. This is what we want to pull out. How can we get to this? It’s a bit more complicated than just typing in revenue because we need to first get the ecommerce key within the ecommerce key the purchase object and then within the purchase object, the action field and then the revenue. So how would you go about this in the data layer variable? You would choose the dot notation. So we go with ecommerce.purchase.actionfield.revenue. Let’s save this and see if this works, refresh here, refresh there. And our new variables should now be available in this variable menu. So under transaction variable dlv revenue is now 70. So this is what we want to import into our facebook pixel. So I’ll go back to tags. In our Facebook section here. You’re gonna replace this with our variable which are two curly brackets. And this little menu opens and here we have our variables available, go with our DLV revenue variable, USD can stay as this and as a trigger, I choose again, all custom transaction trigger. So really easy already because we have set it up beforehand. It is now something we can reuse in our other tags.
So as you can see our transaction event, our Facebook event now fires and transfers this over to Facebook. So we have set up correctly our facebook pixel for conversion tracking. One more tag is left. This is our Google Ads tag. So I’m going to go over to the conversion section of my Google Ads account. If you don’t know where to find this, this is under measurement. And then here conversions. And here I have a purchase pixel. You can also set this up from new, but I have already set this up. And on here I have the tag setup. And we’re going to use Google Tag Manager and here is our conversion ID and our conversion label. So let’s go over to Google Tag Manager. I’ve just copied this. And we’re going to go with a new Google Ads conversion tracking on our purchase event. We’ll choose our Google Ads conversion tracking here, enter our conversion ID, enter our conversion label. And now we need to have the value of the actual conversion. And since there is a brick icon here, we can just click it and choose dlv revenue.
We also might want to enter the order ID just to avoid counting a duplicate because this will deduplicate all our orders if they are sent twice. So I can click on the spread icon here, we don’t have a variable set up right here. So I’m going to do this right from this menu. So let’s go with new variable dlv order ID. The variable will be a data layer variable. And here again, we need to find out what is the right key to choose ecommerce purchase action field and then ID. Let’s save that. And as a currency code, we can also hard code this, as you see, the trigger as always will be our custom transaction. And now we have that setup. for completion sake, I would say if you don’t have it set up yet, he would also need the conversion link attack for Google Ads. So don’t forget this, this must be simply deployed on all pages. Let’s set this up and refresh our page. Now let’s go back to our order receive page. And as we can see, we have now on the transaction event fire our Facebook Pixel, our Google Analytics event and ecommerce tracking, and then Google Ads conversion tracking. You could even set up more conversion tracking if you have any other quotes that you want to send that data to. Our tagging system tells us that we have our Google Ads conversion tracking installed as well with our conversion value and the currency. So this all seems to work just fine. I would always recommend to do a little bit more testing just so you know that this is all correct here, you might want to go through another test order better to check twice rather than have faulty data later on. But I’m pretty satisfied right now with our implementation. The last step in this whole process is always publishing a version. So it goes live to your users. You will do this by going into Google Tag Manager, clicking the submit button, giving your version and name and then publishing this to all your users. This video is brought to you by our premium membership MeasureMasters. If you truly want to master the art analytics and data, then become a member today and get access to over 70 hours of premium video content, exclusive tools and mingle with other fellow MeasureMasters in our community. And if you ever get stuck, I’m there for you to answer your questions and support you along the way to measure mastery. Join today and become a Measure Master.
All right, you made it till the end of our three part video series on Google Analytics ecommerce tracking with Google Tag Manager. Congratulations. Now I must let you know that this is just a tiny part of the enhanced ecommerce tracking feature set where there are so many more things that you could install more data layers and more tracking. So I’d encourage you to discover for yourself in the documentation of Google of how you can set this up. I hope this little video series set you up for the right steps already. And now I want to hear from you if you have set up ecommerce tracking successfully with this video series or you have any more questions, please leave me a comment down below. I love to hear from you. And if you haven’t yet, then maybe consider subscribing to our channel. Also don’t forget to give us a thumbs up and you will be rewarded with another video next week. My name is Julian, till next time