A Guide To E-Commerce Conversion Tracking Using Google Tag Manager

So, I came up with this fantastic idea to setup the script management of one of the clients I manage with Google Tag Manager, which is quite a fantastic idea for normal tags like Google Analytics, Remarketing tags and so on.

But then came the fun part: Conversion tracking with the GTM isn’t exactly what I expected; what I thought was Plug & Play came out to be just not compatible. The original Google Analytics e-Commerce tracking snippet doesn’t seem to speak the magical language of the Google Tag Manager wizard, which disappointed me quite a bit. Needless to say I went on a fantastic journey trying to decode the oh-so-simple-and-elaborate Google documentation relating to e-Commerce tracking with the Google Tag Manager. After achieving what was told to me like impossible by some of my peers, I thought I would setup a guide to e-Commerce Tracking using Google Tag Manager just in case someone else would be looking to go the same route.

If you are not familiar with what the Google Tag Manager is all about, it’s pretty simple. The Google Tag Manager is a snippet manager where you can manage where and when you show these snippets on pages using triggers. Sounds fun? Read on.

DISCLAIMER: Although these steps have proven to give good results for my clients, everything presented here must be seen as a proof of concept and may harm your Magento installation if things go wrong in some way. Therefore, the author, Pier-Yves C Valade, and Ludis Media discharge themselves from anything that could happen to any website by following the steps described in this article. The employment of a Magento specialist is highly recommended.

Setting Up The Google Tag Manager Account

If you don’t already have your Google Tag Manager account setup and ready, go on and create one. I recommend you take a look at this step-by-step guide from Big Daylight so that you can setup everything properly.

Make sure to put the Google Tag Manager snippet right after the opening of the <body> tag so that everything works as it is supposed to. Here’s what it looks like once on your page:

Adding the Google Tag Manager Snippet to your Magento Installation

Here’s a way to update your Magento install in order to make the GTM pop right in place. Simply make your way to this file and make it look exactly the same as this and save. Beware that this will remove any classic Google Analytics tag that would’ve been present.

Once it’s done, make your way in the Magento Admin Backend to System -> Configuration -> Sales -> Google API and expand the Google Analytics section. Make sure to Enable the feature and add your Google Tag Manager container ID to the Account Number field. Hit save and you should have your GTM tag up and running on all your pages.

Make sure to do the other steps below BEFORE making this change. Otherwise, this change will result in Google Analytics data loss during the process.

Creating The Google Analytics Conversion Tag

Once you have your Google Analytics tag setup in GTM, what you will want to do is create another Google Analytics tag, made for transaction tracking this time, that will be able to see the data we will be serving it. Make sure to set the track type to “Transaction” instead of “Page View”!

Once this tag is setup, we will need to trigger it on the right thank you page.

Triggering The Google Analytics Conversion Tag

Triggering the tag we just created is quite easy, just click on the right on the button to add a triggering rule.

Once you get to the popup, the next step is to name the rule to something like “Transaction Thank You Page” and make it trigger only on the url containing the exact path to your thank you page, let’s say “/checkout/success”. Make sure to also add an event listener to “gtm.dom”, a built-in event that triggers once the page is fully loaded, so that you also fetch everything coming after the Google Tag Manager’s script.

Then, save both the rule and the tag and publish your container.

Adding The dataLayer Object Magic To The Thank You Page

Now, you should have everything properly setup on the Google Tag Manager’s side. It is time to compute the transaction data and serve it to your freshly made tag.

Maybe you are already familiar to the _gaq object and the _trackTrans method which is the old method of when you weren’t using Google Tag Manager. It looks quite the same but it is named dataLayer instead of _gaq. You can also use the datalayer.push() method with it, but that’s another topic.

There’s many ways to fill and use the dataLayer object but here’s what mine looks like with the required variables filled in and how I managed to get to it with the Magento backend.

Allowing some time to testing

Once you manage to setup everything right, the next thing you will need to do is test things up! The last thing you would like to do is stop tracking data in you Google Analytics eCommerce profile. So, go on and make a test purchase or wait until you have some purchases you know you can check if they got through the whole process. If everything works as planned, you should have data flowing through in the next 24 hours.

So, it’s as simple as that! Now, go on and enjoy the magic of the dataLayer!

I'm currently an SEO, PPC and Analytics specialist here at Ludis Media!
Always looking for new challenges, I am a leader who’s not afraid of anything! I am in constant improvement in all facets of my life and aims at every moment to excel.
I am an excellent communicator and also have an open mind.
On a more personal side, I am fond of scotch, cars, bikes and great food!
I love Hans!

By default, Magento will use the Google Analytics block which will output the _trackTrans code. You need to override the function to output the dataLayer instead of the default gaq.push() by copying the file from “/app/code/core/Mage/GoogleAnalytics/Block/Ga.php” to “/app/code/local/Mage/GoogleAnalytics/Block/Ga.php” and replacing the default _getOrdersTrackingCode() function for the one supplied in the article.

You will then need to do a test purchase and look into the code if everything works okay for you.

And remember, I am not responsible for any trouble you may get by playing around applying this. If you’re not comfortable editing code, please make it done by a specialist.

Quick question: in CE1.9, the GA core block has two protected functions – one at line 151 and one at 203. The first one looks like a universal analytics that writes the standard ecommerce data to GA using ga(ecommerce:send) and the second one is using the push method.

I am using GTM to encapsulate GA snippet, AdWords conversion AND transaction data per this post, so want to make sure the suggested change still lets Magento’s GA.php scripts send visitor and ecommerce info.

Content que vous aimiez this article! 😉 As you might have noticed, I took your 3 comments and made them into 1!

As per the dataLayer.push() method instructions, I should indeed update the post to use it instead, you’re right.. I’ve been having this in my todo list for too long! To answer your other question about keeping data in GA, using dataLayer.push() will keep your visitor data as you would like.

To use push() instead, just use dataLayer.push({…}); instead of dataLayer = [{…}].

For the function you need to replace in GA.php, you should replace the one using the Universal Analytics “ga(ecommerce:send)” method probably but I would have to look into it myself to make sure. It would be the one you currently see when you do a transaction and land on the TY page.

As always, go make the changes and allow some time to testing to make sure you don’t lose data!

I see the screenshots in your article are somewhat dated as GTM now has a new interface.

As I am a complete newbie in GTM – could you please explain exactly what settings need to be done also in Google Analytics and possibly update the screenshots too?

Also – is it necessary to edit any Magento code? I see the extension has added the GTM code without issues.

Another thing which bothers me – setting tracking to Transaction. Does that actually limit GA to track only sales and not visitor page views? I need a complete statistics for both sales and visitor behavior on the site.

I made this article with GTM v1. The version 2 of GTM just came out recently and it would be a good idea for me to update this how-to indeed. The new interface moves things around a bit but follows the same principles.

In order to use GTM, you will have to edit some code or use a plugin for that. I prefer the first method, as the how-to describes!

In GTM, you will indeed need 2 tags in order to track both visits AND transactions. One for visits and one for transactions.

Hi, it is best suited to implement this with the help of a Magento programmer in order so that you do not break anything. I guess that a Magento programmer will understand what to do by reading this article without any major problem! Hope this helps.

Prior to doing the change, did the function returned the conversion gaq.push()? If not, the problem is not in the function, but in your config! You need to have your built-in Google Analytics integration activated in Magento.

A very good and interesting read. We are looking to implement GTM on our eCommerce site which is on megento. Before we simply put the GA tracking code in megento and it did all the rest. What is worrying us is the Data Layer, but reading above most people are too. I have found a plug in http://www.magentocommerce.com/magento-connect/google-tag-manager-3.html. Not sure if you have seen this one, but wondered if you think this good solution to a tricky problem?

The plugin you proposed seems like a solution that wasn’t available at the moment I wrote this. I would try it if I were you. Keep in mind that this plugin is not compatible with magento 1.8 as we write those lines, meaning you could have problems using it with a Magento 1.8 install.

Hi Marcelo, this is an interesting question. The truth is, using Universal Analytics or not, the dataLayer is sort of “future proof”. What I mean by that is that, the dataLayer speaks to the Google Tag Manager, not Google Analytics, ensuring that the GTM will do it’s magic and adapt your data to whatever is needed in order for the tracking to work.

That being said, the only thing that should change in the procedure is to choose “Universal Analytics” instead of the “Classic version” in the tag type dropdown.

We all know that the Google’s seemless isn’t always as seemless as we would’ve thought in the first place so make sure to validate your data after this massive change, even though everything should go just right. Take note that Google seems to already have thought about this and gives you the chance to come back to an earlier version of your containers, just in case things do work as planned.

Sure, you could do some sort of black magic macros in GTM in order to fetch your conversion values directly from HTML tags that you would have on your Thank You page without sending any dataLayer object to the GTM, but that’s a way more advanced technique.

I’m glad you point it out as it will be the subject to an entirely new how-to article soon!

I’m working on a music site with 6 albums and ~60 individual songs for sale. Is there a way to dynamically populate these values with what was in the user’s shopping cart? I suspect there is, I just can’t find it.

Hi Eric! Are you using Magento? If so, this blog post will help you with every steps. Otherwise, you should be able to retrieve this info from your eCommerce platform by adapting the PHP script section with the help of a programmer. There is also a way to do so with advanced macros directly in GTM. Stay tuned, as I will publish an article on that somewhere next week! Thanks.

Very nice tutorial. One question though: In the first step “Setting up Google Tag Manager”, it says “put the Google Tag Manager snippet right after the opening of the tag” (as is anyway recommended by Google).

I’m wondering though how this can be correctly set-up in Magento? Via backend “System – Configuration – Design”, snippets can only be added either at the END of head or END of body – but not after the opening body.

In order for this to work, you will need to have your theme modified. You can either modify your header directly through your theme or adapt the Google Analytics module to do so. I prefer the second option. Please have a look at this section of the article, you’ll have the steps towards doing this.

Thanks for the quick response. Okay, now I see – when following/reading the tutorial, I didn’t make the connex from you mentioning “it should be added at the beginning of the body”, to your actual description “Adding the Google Tag Manager Snippet to your Magento Installation” of how to do so.

I gave this a try now – however, I didn’t have the ga.phtml file in my template directory, therefore I copied it from the base template. After modifying as described above, it is still injecting the wrong code though (still injecting a GA snippet instead of the GTM snippet – seems it doesn’t use my newly created ga.phtml).
In case u have any ideas on that, happy to hear your feedback.

tried that already before, didn’t work either though.
Nothingtheless, if I only activate Google Analytics in Backend (as in your screenshot above), I would assume it shld also be placed right at the beginning of , no? In my case, it is also still embedded somewhere withing head section (therefore, changing the snippet to include GTM instead of GA wld not pop up in the right place anyway, would it?)

If it wasn’t just me, maybe it wld make the article even clearer if you were to clarify that “Here’s a way to update your Magento install in order to make the GTM pop right in place.” refers to “right place (:= beginning of body section).

My questions, how should you fire the ecom tag in GTM with this new syntax? It obviously don’t fire with the rule above. However, when only using the Universal tracking code (GTM disabled) ecom data flows to Analytics.

I know that Google issued a whole lot of new functions along with the Universal Analytics switch. It is good that you pointed it out as it’s a must have for non-GTM users.

Now for the GTM part: I’m happy to tell you that there is nothing to change to the dataLayer object. The only thing that will change is your GTM tags. Instead of being “classic Analytics” tags, your just change them to “Universal Analytics” tags. You will still need the “transaction” and “page view” type tags though. The macros stay the same.

Hi Niel, What do you mean by code example? There’s actually no code change from what is described in the article itself (above). The only thing that changes is the GTM tag type. So, under the “Creating The Google Analytics Conversion Tag” section, all you need to change is the type: From “Google Analytics” to “Universal Analytics”. Hope this helps!

Kindly check the below code, which we have updated now and its working and tracking in our local server, But If it comes to live data’s are not fetching. But our site has SSL secured server, so is this a cause for tracking problem?

I have been asked to develop an ecomm layer for a client’s partner in sales. Site ABC sells insurance and when a user clicks ‘view plans’ they are taken to Site DEF to view plans and make a purchase.
Site ABC and DEF will have the same GTM container code. However since we want to track ecomm transactions on site DEF we need to tell them what data layer code to add to their site (since we do not have access to it)

I am a bit confused as to what dataLayer code to provide them. My confusion stems from the example provided to me on https://support.google.com/tagmanager/answer/3002596?hl=en – for the info provided for ‘transactionId’ is ‘1234’ and for ‘transactionTotal’ is ‘38.26’ and so on but the purchase data is variable so what do i put for these?

The data of the dataLayer is variable indeed. You will need to provide the good values of the transaction with variables, as stated in the article at the PHP section of it. “1234” and “38.26” are just samples and must be replaced by valid data.

I have successfully setup ecommerce tracking according to your very helpful guide above.

After some weeks of observations, we realized that not all transactions are properly tracked (about 25 % of all successful transactions never fire). The problem here is that apparently those users do not navigate to the Thank you page (/checkout/onepage/success). As far as I understood and observed, this page is only opened AFTER a successful payment, and when the user decides to (usually manually) navigate back to our shop. If a user doesn’t navigate back, the ThankYou page is never called, thus we can’t track this one.

Q: how could we make sure the ThankYou page is always hit? Is there another/better place to fire the transaction-success?
(PS: this happens randomly across all our 3 different payment providers…indicating that it depends on the behavior of the user after purchase is through).

I’m glad this tutorial made it for you too. Does the 25% of failed transactions come from Paypal? If so, you will need to have a Paypal Express checkout in order to complete the transaction from your Website instead of on Paypal.

In fact, the only difference is that Paypal express finishes the transaction in Magento. If you use Paypal Standard, you will need your customer to come back on your thank you page after he does his payment (the will be a thank you page in paypal telling they will be redirected to the website). If they do not come back, they will never see the Thank you page, so does your dataLayer.push().

Hi,
I am using the HTML code to measure e-commerce transactions on a website. Do I have to generate any Macro on GTM to capture e-commerce information with the dataLayer? Thought that this Macro was necessary so GTM could read the information of the dataLayer values… I did it so with the custom dimensions.
Thanks

I am trying to implement eCommerce tracking for one of my clients. The website does not support dataLayer, how do i implement the eCommerce tracking using custom javaScript. Would appreciate if you could help me here or guide me to a place where i can read this up.

I suggest you read the article entirely. It should provide you with instructions to do so but you might need to tweak things a bit. Just replace the Magento file paths with your application’s and it should be a good starting point.

All you’ll need different is to put the dataLayer object on your eCommerce thank you page.

I understand that the variables such as ‘Acme Clothing’, ‘T-Shirt’, ‘Apparel’, etc. can be changed as well as the prices when we ‘push’ info into the datalayer.

I also understand that the transactionProducts is basically an array of products.

How would I go about ADDING new products (arrays) to the array of products in the data layer? For instance, if I have 2 or 3 or 5 products? I know I will write a loop, but can someone provide me with a vb.net example on how to do this and change/modify the .aspx GTM data layer script from code behind? Is my data layer in the .aspx correctly setup?

How would I go about modifying/pushing data into the data layer from the vb.net (.aspx.vb) code behind? Any short examples or hints will be greatly appreciated.

Wow, nice! Thanks!
And if i have configurable products, how can i add in the datalayer the sku for the single “option” product?
i think it is needed another “for each” for check the skus inside the product.
Thanks.

Fantastic stuff. It seems with version 2 of GTM most data layer code can be managed from the GTM interface. I’ve replaced analytics with tag manager in my magento installation as a result lost magento’s own onepage checkout reporting, I dont see where users are dropping out of the checkout process anymore, do have any plans to write an article about that? most stuff available online relates to GTM version 1 so i’m finding it difficult to learn about version 2!

Contact us

Phone number: (819) 200-0244

E-mail: info@ludismedia.com

9, Wellington S. #101

Sherbrooke, Quebec, J1H-5C8

Canada

Blog subscriptions

Photo

Who are we?

Ludis Media is a digital marketing agency, based in Sherbrooke, Canada. Our expertise covers the central aspects of internet marketing, from SEO to content strategy and inbound marketing.Proactive and personalized service to each of our customers is our promise!