Add Google Analytics eCommerce Tracking with Magento and Google Tag Manager
Today we’re going to learn how to add Google Analytics to a Magento site, and pimp it out with eCommerce conversion tracking.
Bonus fun: We’re going to do it all via Google Tag Manager.
Google Tag Manager is pretty cool. In a nutshell, what it does is take lots of the script tags you insert into webpages and refers to them into a single Google Tag Manager script tag (called a container). The big upside of this is that if you need to add/remove/edit any one of those tags, you don’t have to make changes to the code itself, you simply edit your settings in Google Tag Manager, and your changes get pushed to your site instantaneously.
There are four main steps:
- Create a container in Google Tag Manager
- Add the tags you want to the container
- Add the container tag to Magento (via a plugin)
- Add eCommerce tracking
Let’s get started…
Create a container in Google Tag Manager
Sign up/into Google Tag Manager.
Create a new Account:
Use your website as the container name so you can easily keep track of it, and select Web for web applications.
It will pop up with the code snippet to use on every page that you want to use the container. We’re NOT going to use this (as we’ll get Magento to add this for us), but it’s worth copying the container ID which looks something like this: GTM-57F4QP
Your container has now been created! Publish it and we’ll move on!
Add the tags to the container
Now we need to add the script tags that we want to include on our pages
Click on ‘Add a new tag’
Choose Product: select Google Analytics.
Choose a Tag Type: select Universal Analytics
Add in your Google Analytics Tracking ID -> You can find this in your Google Analytics account (Admin > Tracking Info > Tracking Code) and should look like UA-70308729-1
Track Type: select Page View
Sidenote: If you are developing locally, and you want to see your page views come through, go to More Settings > Fields to Set and add a field called cookieDomain, and set the value to none. When you go live, you will need to come back and remove this.
Fire On: All Pages
This tells our container to include our Google Analytics script on every page on our website (every page that has the GTM tag, which soon will be all of them).
Click Create Tag, give it a name (something like Google Analytics makes sense) and voila, the tag gets created!
Whoop whoop! We’ve created our first tag. Make sure you Publish the latest changes, and then let’s add it to Magento.
Add the container tag to Magento
You can add the container to each page manually yourself using some PHP / Magento wizardry, or you can just install the Google Tag Manager plugin by shopGo.
Do this now. I’ll wait…
Now let’s configure the plugin.
Go to System > Configuration > Sales > Google API
Select Enable and enter in the Container ID that we copied earlier (or get it again from Google Tag Manager).
Enable the datalayer so that Magento automatically populates the datalayer for us.
Click Save Config and it’s time to party!
Hang on, we should probably check that everything is working first, right? Yeah, probably.
Go to your website, and also open up Google Analytics. Under Real-Time > Overview you should be able to see 1 user on your site right now, you!
Woo! Google Analytics is now live on our site, thanks to trusty ol’ Google Tag Manager.
Adding eCommerce Tracking
Last step is to add eCommerce tracking to our site. The idea is that we send information to Google Analytics about every eCommerce transaction that occurs on our site. The tedious part about this is getting this information together into a key:value format (referred to as a datalayer) which makes it easy for Google Analytics to understand the details of the transaction.
Fortunately, our new favourite Magento plugin has already done the hard work for us. It automatically stores information about each page in the datalayer for us to use (if we wanted to).
Sidenote: There’s a good Chrome extension which allows you to see what tags Google is injecting into each page, and visualise the datalayer – it’s called Tag Assistant (by Google). Fire it up and navigate to any page on your website
Alright, we need to add a new tag to our container, one that gets the information from the transactions and sends it back to Google Analytics for analysis.
Log back in to Google Tag Manager and create a new tag.
Choose Product: Google Analytics
Choose a Tag Type: Universal Analytics
Configure Tag: Add your Google Analytics Tracking ID from before, and select Track Type: Transaction, and add the cookieDomain: none for localhost if appropriate.
Fire On: We’re going to select ‘Some Pages’ and define a new trigger to tell it when to use this tag.
Enter the URL for the success page (if you know it), or you use it across multiple environments by using a unique identifier like ‘/success/’ – assuming that your success page contains this in the url.
Save the trigger, create the tag, give it a name, publish the container, and we’re done!
Wait, what?! We’re done? Don’t we have to add it to the website?
Nope. That is the beauty of using Google Tag Manager. Once the container has been added to our website (via the plugin), we no longer need to mess with the website code at all. We can add/remove/edit tags from Google Tag Manager. Pretty neat right?
So if we go a fresh page on our website and open up the Tag Assistant extension (click Enable and Record then refresh the page), we can see that both of our tags have been included in the page, and if you click on Google Tag Manager, you can see more information about the tags, like the datalayer that it is picking up.
Here’s what our success page looks like now, with all the transaction data that is being sent to Google Analytics:
And in Google Analytics, under Conversions > Ecommerce > Overview you can see (after a couple of minutes) the transaction has come through and you can drill into the information:
There are a bunch of other tags like Crazy Egg, AdWords, AdRoll, LinkedIn etc, which are ready to go and you can simply select them when creating a new tag. Or you can even write your own.
Google Tag Manager is a great tool, removing the need for a developer to make changes to your website every time one of your script tags needs to be updated.
And that’s all there is to it. You’re now an expert at installing Google Analytics with eCommerce tracking into Magento sites via Google Tag Manager. NOW it’s time to party.
ps. Don’t forget to remove cookieDomain: none when you move from localhost to a production environment 🙂