Google Tag Manager for e-Commerce Stores

Google Tag Manager for e-Commerce Stores

For your website to be completely and properly tracked, you need a lot of tags. This is especially true for e-commerce stores and Google Tag Manager e-commerce tracking is top notch.

Google Tag Manager is Google’s solution for efficiently dealing with all of those tags.

FREE Download: Save yourself from the missed steps and trial + errors and get the SHORT GUIDE to tag types in Google Tag Manager. This is the guide we follow and keep in mind when creating tags.

Adding individual tags for tracking user interactions within the page (like tracking when users download PDFs or play videos) or e-commerce tags for Google Analytics e-commerce and Enhanced e-commerce reporting leads to cluttering the site code.

Cluttering your site code makes a mess on the backend and can also reduce site performance on the user’s side.

In Google Analytics, tag clutter can affect your user experience also.

As you work more in Google Analytics, that clutter will begin to pile high – and you’re going to need to clean it up.

How Tag Manager Takes Out the Trash

Once you set up Tag Manager, you’ll be able to insert tags in your site in a way that’s completely automated. No web developer needed. You can insert tags from within Google Tag Manager using a container code and easily add third-party tag codes to any page on your site. You can deploy and modify them without having to leave Tag Manager to dig around the backend.

How to Get Google Tag Manager Up & Running

First – create a Google Tag Manager account.

Google Tag Manager Account Creation Screen
Google Tag Manager Account Creation Screen

Follow the short process of registration, which is similar to registering for Google Analytics

Once that is complete, Google will provide you with the Google Tag Manager container code. Similar to the tracking code provided by Google Analytics (which we discussed here), you’ll need to insert the Google Tag Manager container code into target website code, typically right after the opening <body> tag in our code. Repeat for every page you want to track. Yep, every single one.

Google Tag Manager Container Code
Google Tag Manager Container Code

“That sounds like a pain in the neck. Why should I go to all this trouble?”

We hear you. You very well may have tracking set up on every page you want to track, and now we’re suggesting you go through that process yet again. It’s worth it. We promise. And here’s why.

Once you’re over the initial hurdle of setting up Google Tag Manager on every page, you can add any tag you want and track any action (ranging from users filling out a form to downloading a document or viewing a media content within your web site) in Google Analytics.

Tag Manager is especially useful in an e-commerce environment.

While Google Analytics offer e-commerce and Enhanced e-commerce tracking, both require extensive customization of the web page code. To properly deploy these capabilities, the web site must include snippets of Javascript code that enables Google Analytics to properly track e-commerce activity and report it accurately.

That’s a hot mess.

Without Tag Manager, each change you want to make in your web store requires a careful overhaul of the tags to ensure the reporting remains accurate. With Tag Manager, this process is easily managed, since the tags can be modified on every page simultaneously and updated live after verification, using the preview option.

You can even skip installing the Google Analytics snippet altogether (unless it is explicitly required by your e-commerce platform) and implement Google Analytics using Google Tag Manager. If you can do this, it will save you a lot of work in the future and, furthermore, this is a recommended way to implement Analytics by Google.

Implementing Analytics using Tag Manager is the simplest thing. Create a new tag and select Universal Analytics as tag type.

Google Tag Manager e-Commerce Create a New Tag
Google Tag Manager e-Commerce Create a New Tag

Insert your tracking Id in the appropriate field.

Google Tag Manager e-Commerce Tracking ID
Google Tag Manager e-Commerce Tracking ID

Leave Page View as track type and create a trigger that triggers on ‘All pages’ on ‘Page view’.

Google Tag Manager Trigger Configuration Screen
Google Tag Manager Trigger Configuration Screen

This is the trigger configuration screen.

Google Tag Manager Save Tag Screen
Google Tag Manager Save Tag Screen

All that is left to do now is to name and save this tag. Once you do this, Google Analytics is implemented and you should start seeing the data in your analytics reports.

Google Tag Manager also allows you to create conditions for when to trigger reports to Google Analytics. This way, all the transactions on the web site can be tracked and a report triggered every time a user hits the ‘Buy’ button. Google Analytics will receive the value of the transaction and the product sold. While this is possible to do with Google Analytics without the Tag Manager, with Tag manager simplifies and speeds up the process – a lot.

Next Step: Once Tag Manager is in place…

Now that you’ve got the container code on every page, it’s time to set up a data layer. A data layer is a simple script (a JavaScript array) used to store information and send it to the Tag Manager container.

Once it’s done, you data layer will look something like this, but your content will vary depending on your website.

Google Tag Manager Data Layer Script
Google Tag Manager Data Layer Script

Data layer is a simple concept, although it sounds complicated. What data layer does is create a sort of storage or a buffer where the values on your website are stored as the user interacts with the page. For example, they may add the product to the cart. That action causes the variable called amount in the cart to change and increase by one, for example. This data is ‘pushed’ to data layer and remembered for the duration of the session.

Google Tag Manager can access the data layer, ‘read’ the values of the variables stored there and use them to trigger the events. To continue using the example from above, you may use the changed value in the ‘quantity’ variable to trigger an event (event is just a different name for a hit) that will show up in your Google Analytics report. This report may, for example, be that a product has been added to the cart. Google Analytics will add up all those reports and you will have information how many of your visitors added a specific product to the cart.

This information can then be compared with the number of conversions (or actual purchases of the product), using much the same mechanics to track and record. And you can already tell this is a useful information to have, can’t you.

[We need to explain the image above – because unless the only people reading this are web devs, it’s going to freak people out. What does this specific data layer do? Where does everything in between <script> and </script> come from?]

As you can see, once you have a data layer, all you need is to add variables and triggers and the Google Analytics will start tracking the transactions by product names, transaction value and other metrics.

Variables are the conditions that Google Tag Manager uses to ‘estimate’ when to trigger an event. A variable can, for example, be a number, string (textual data) or any other recordable information on the state of something on your web page – how many times a button has been clicked, name of the element that was clicked or mouse over, link that is used or a constant.

Once the code on the web page assigns a value to the variable using dataLayer push command, Google Tag Manager will trigger an event.

Trigger is the threshold condition that literally triggers a report to be sent to Google Analytics. It is a vital part of every tag. You may add as many tags as you want to your web page, but without trigger definition, none of them will ever send any information to Google Analytics.

There are various types of triggers. For example an All Page trigger initiates an event on every page, once the trigger condition (or variable) has been met. Variables and trigger make up an integral mechanism that Tag Manager uses to create hits (or reports) to Google Analytics.

Tracking User ID (this is really cool)

The greatest advantage of Google Tag Manager is that it enables tracking of user ID, which means you can track users across multiple devices as they visit the target site.

Previously, Google Analytics would record every visit as a unique visit – regardless of who was behind the screen. With Google Tag Manager tracking User ID, Google Analytics can report the instances where the same user visited the site on different devices and count these as repeat visits.

How to put User ID tracking in place

The procedure is relatively simple. It involves identifying some unique user data and using it to track the user across multiple devices they might use. Most e-commerce platforms will not have problems with this, as they will have some sort of contact ID or user ID readily available, especially in case of the returning customers or people who have already bought something and established an account with the site. For the most part, those are the people we want to track and target with appropriate content.

To achieve this tracking, Google Tag Manager must insert a code that triggers every time a visitor with a unique ID is identified on the site and fires a report off to Google Analytics.

Google Analytics must have a Session unification activated in order to actually use this user ID and start tracking user specific sessions. Session unification is a feature that allows Google Analytics to recognize the visitor as they reach the website using different devices and browsers. It works by placing unique cookies and integrating available data on the visitor. The result is having a unique visitors even if they use mobile, tablet or a desktop device and avoiding inflating your user count by registering each device as a unique visit. You enable it in your Admin → Property → Property settings → User ID. There are detailed instructions how to enable it once you open the dialog box.

Google Tag Manager Session Unification Activated
Google Tag Manager Session Unification Activated

Once all this is in place, your Google Analytics reports will contain valuable information on the behavior of your returning customers.

Another way Google Tag Manager can be relevant to e-commerce is through tracking paid ads. While Google Analytics can automatically track Google adWords and adSense contributions to the web site traffic, the other providers of PPC cannot be easily tracked. Unless you choose to use Google Tag Manager.

You can create a specific tag that will fire a report to Google analytics every time the user arrives to a web site via a third party paid ad. This report can have all the properties and metrics you want to assign to it and allow Google Analytics to include it in the reports. The tag would use a trigger and variable that defines, for example a Bing Ad and attributes the visitor activities on the site to this channel.

Google Tag Manager + User ID Tracking =

The importance of User ID tracking to an e-commerce website can’t be underestimated. This is how you can identify your very best customers, and your new customers. From there, you can begin to create personalized experiences that nurture these relationships even further.

Google Tag Manager lets you create attribution models, track customer loyalty, and derive many other useful metrics you can use to drive conversion rates up.

More detailed instructions on how to set up triggers, variables and events for Google Tag manager are available on:

Guide to Google Tag Manager

Google Tag Manager Fundamentals on Google Academy

Checklist for implementing Google Analytics using Google Tag Manager:

Creating a Google Tag Manager account is easy. Go to Google Tag Manager web page and follow the instructions there. You will receive the Tag Manager ID code, similar to the UA id code of Google Analytics, and a container script.
Follow the instructions and implement the container on every page of your website. While you are at it, delete the Google Analytics snippet. You will now use Google Tag Manager to implement analytics instead.

To implement tracking through Google Tag Manager, do the following:

  1. Creating a Google Tag Manager account is easy. Go to Google Tag Manager web page and follow the instructions there. You will receive the Tag Manager ID code, similar to the UA id code of Google Analytics, and a container script.
  2. Follow the instructions and implement the container on every page of your website. While you are at it, delete the Google Analytics snippet. You will now use Google Tag Manager to implement analytics instead.
  3. To implement tracking through Google Tag Manager, do the following:
  4. Create a new tag
  5. Select Universal analytics as tag type
  6. Click on the building block icon on the right hand side of the first field, that has Tracking ID label above
  7. Click on the plus sign in the upper right corner to create a new variable and select ‘constant’
  8. Copy and paste your UA Id number into the Value field, name the variable ‘trackingCode’ and save it.
  9. Verify that Tracking ID field value contains {{name of variable}}, as this will be handled automatically by Tag Manager, once you save the variable
  10. The ‘track type’ field should read ‘Page View’
  11. Click on ‘Triggering’ at the bottom of the screen.
  12. Click on the plus sign in the upper right corner
  13. Select Page View as trigger type
  14. The radio button below ‘This trigger fires on’ should be on All Page views
  15. Save the trigger under the name ‘Page view’
  16. Name the tag ‘Analytics tracking’ or something similar and save it
  17. Click publish and select preview
  18. Check if the tag fires correctly when you open the website you want to track
  19. Open Google Analytics real time reports and check if you are receiving tracking data
  20. If everything works out, you have just replaced your standard Google Analytics tracking with tag Manager tracking. You are awesome.
  21. Ensure that you are not double tracking – verify that Analytics snippet is removed prior to implementing the Google Tag Manager snippet. The best time to remove the analytics snippet is while you are implementing Google tag manager snippet. If both remain on the page, your Analytics reports will record double traffic.
FREE Download: Save yourself from the missed steps and trial + errors and get the SHORT GUIDE to tag types in Google Tag Manager. This is the guide we follow and keep in mind when creating tags.
Series Navigation<< Advanced Google Analytics FeaturesGoogle Analytics Event Tracking >>

Published by

Edin is a Senior CRO Consultant. Edin is into Google Analytics and testing (any A/B testing tool really) and likes to write about it. You can follow Edin on Twitter.