Implement Enhanced Ecommerce with Google Tag Manager
Ecommerce analytics is the process of gathering data from all sources that affect your online store and using it to identify trends and shifts in consumer behaviour to make data-driven decisions that increase online sales.
In this article, I would like to explain to you how to implement a really useful function of Google Analytics, Enhanced Ecommerce.
What’s Google Analytics Enhanced Ecommerce?
In Google Analytics, the Standard and Enhanced eCommerce reports offer two different ways to analyse your revenue and optimise your customer journey. Traditional Ecommerce analytics relied on achieving a goal, which was usually a purchase, to generate data like:
- The conversion rate for a product.
- Total sales value of the product.
- Quantity sold.
- Total Impressions.
You don’t have to be constrained in terms of tracking using Enhanced Ecommerce. It enables you to keep track of even the tiniest facts, which serve as important queues for optimizing your store.
Through enhanced e-commerce tracking, you can send the following types of e-commerce data to GA:
- Impression data: Total number of the product shown to the user on the Home page or category page
- Product data: Product detail view. Product attributes like product name, product id, product variant, product colour, product brand.
- Promotion data: Internal Promotion ID, promotion creative, position, coupon code
- Action data: product view, add to cart, remove from cart, checkout, shipping method, transaction
In short, through the standard e-commerce tracking, you can only track users’ transactions on the order confirmation page. Whereas through enhanced e-commerce tracking you can also track all the steps (like product view, add to cart, remove from cart etc) that were taken by a user before the purchase.
What is Google Tag Manager?
Google Tag Manager, also known as GTM, is a free management platform that allows the user to add marketing tags, or snippets of code, to your website to track and collect marketing data.
GTM allows users to easily implement tracking tags without modifying the code, hence optimizing the information gathering process; this is a huge benefit for the marketers who can maintain the code on their own.
How to Setup Google Tag Manager on your Website
It’s incredibly simple to install Google Tag Manager.
This article will bring you through the steps to build your GTM account, which will allow you to quickly add tags to your website. Let’s get started by creating a GTM account. To set up a new GTM account, go to Google Tag Manager’s official website and click the main call-to-action.
A new container is created by default, and you can create additional containers within each account.
Fill in the Account Name field with the name of the business (e.g., your company or a client’s company). If you are an agency, it is a better practice to ask your client to create a GTM account and then shares the access with you.
Enter the name of your website in the Container Setup section, it can be a domain (e.g. example.com) or just a name (e.g. My website).
After you create a container, you’ll get two codes that must be added to a website.
Give these two snippets to a developer and tell him or her to carefully follow the instructions, the first code should be added somewhere in the <head> of a website, while the second should be added right after the opening <body> tag.
How to enable Enhanced Ecommerce on Google Analytics
After you’ve installed the code, go to your Google Analytics dashboard and toggle the switch (see the screenshot below). The path is Account > Admin > Ecommerce Settings > Ecommerce set-up.
The next step is to create the Data Layer. Data Layer is a JavaScript object which stores information in a certain format; it’s a layer of data. Users cannot see the Data Layer (unless they look at the source code or use a tool), but it can be read by Google Tag Manager and, if certain parameters are used, that same information can be pulled into Google Analytics and other tools. Here you can find the complete documentation about all types dataLayer implementation and how you can push for track enhanced e-commerce data.
An example of dataLayer implementation for measuring Purchases:
Push your transaction details into the Data Layer using the purchase action, along with an event that will fire an enhanced ecommerce-enabled tag. In this example, the transaction details are known at the time the page loads and will be sent with a pageview when the gtm.js script returns:
<script>
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'purchase': {
'actionField': {
'id': 'T12345',
'affiliation': 'Online Store',
'revenue': '35.43',
'tax':'4.90',
'shipping': '5.99',
'coupon': 'SUMMER_SALE'
},
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1,
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'quantity': 1
}]
}
}
});
</script>where:
- “ecommerce.purchase.actionfield.id” is transaction ID. It’s required for purchases and refunds.
- “ecommerce.purchase.actionfield.revenue” is total transaction value, incl. tax and shipping.
- “ecommerce.purchase.products” are the list of products purchased.
- “ecommerce.purchase.products.name” name or id of product. It’s required.
Finally: How to test implementation?
To test the implementation seen above, in Google Tag Manager click on “Preview mode” to allow you to bring up the Google Tag Assistant widget on your website. Go to the tab with your website and go through the transaction journey and check the “Transaction’” event fires on the page where the code has been placed. You should also check your Google Analytics property’s “Realtime” page to see if data is being captured under events.
