Module for enhanced Ecommerce tracking through Google Tag Manager.
The enhanced e-commerce tracking is complex and can consist of many different elements. We have therefore created a standard version building on these features:
- Impressions
- Product clicks
- Add to cart
- Remove from cart
- Checkout
- Transactions
https://github.com/marijorg and https://github.com/milosmalic
Start by installing NuGet package (use NuGet):
Install-Package Geta.GTM.Ecommerce
Step two is to add two partials to your Layout file (see details below). These partials wraps the two js-sections described in Google's Quick Start Guide. Make sure you replace GTM-XXXXXXX with your Google Tag Manger code (container id) - ideally by reading the tag code from an appSetting.
<!-- Add the following as close to the opening <head> tag as possible, replacing GTM-XXXX with your container ID -->
@Html.Partial("_GoogleTagManagerStart", "GTM-XXXXXXX")<!-- Add the following immediately after the opening <body> tag, replacing GTM-XXXX with your container ID. -->
@Html.Partial("_GoogleTagManagerNoScript", "GTM-XXXXXXX")Next step is to add the following at the bottom of your layout file (after jquery):
<!-- Add required script -->
<script src="~/Scripts/Geta.GTM.Ecommerce/geta.productImpressions.js"></script>Ecommerce is not part of real time tracking in Google Analytics. To save valueable time debugging you should install the Google Analytics Debugger chrome extension. It prints useful information to the Javascript console. These messages include error messages and warnings which can tell you when your analytics tracking code is set up incorrectly.
The implementation picks up product data by reading certain data attributes in the html. This way the module can be reused for different view model and view technologies (Razor view, Angular, React etc..)
Add the following script to track product impressions and product clicks:
<script>
<!-- Using the module - track product impressions and product clicks -->
var tracker = new GtmTrackingProduct();
tracker.trackImpressions();
tracker.trackProductClicks('.jsSearch'); // css container for product lists
</script>The implementation will look for attribute with name data-gtmproduct and expects the content of the attribute to be serlialized json product data. See quicksilver example code and refer to [Google developer documentation] (https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#ecommerce-data) for details about the different fields.
Example json:
{"id":"P-38426422",
"name":"Short Sleeve Crew Tee",
"price":30.5,
"category":null,
"brand":"Fruit of the Loom",
"variant":null,
"position":0,
"quantity":0}In addition, the implementation will look for two more attributes: data-gtmcurrency and data-gtmproduct-list:
<!-- the selected currency -->
<div data-gtmcurrency="NOK"><!-- the current list category name -->
<h1 data-gtmproduct-list="Womens">Womens</h1>By default, products visible on page load are sent as impressions to google. If you change the view based on filter or sorting, or add more items, typically through auto-scroll or paging functionality you can call the addImpressions util method.
var tracker = new GtmTrackingProduct();
tracker.addImpressions(newElements, counter); newElements - typically a selection of elements with data-gtmproduct
var newElements = $(result).find('[data-gtmproduct]');counter - nr of products already visible on the page (0 when sorting/filtering, >0 when paging/autoscroll)
var counter = $("*[data-gtmproduct]").length;Click here for an example based on the Episerver QuickSilver site.
When adding removing from cart you need to call sendCartEvent method:
sendCartEvent = function (products, eventName)products - parsed product json - remember to set quantity eventName - 'addToCart' or 'removeFromCart'
To avoid impression tracking of cart items I suggest using a different data attribute name for the cart items: "data-gtmcartitem". A simple example that assumes that your addToCart item has a class 'jsAddToCart':
$('.jsAddToCart').click(function () {
var dataAttributeName = 'data-gtmcartitem';
var tracker = new GtmTrackingProduct();
// use helper method to parse data
var product = tracker.parseDataAttribute(this, dataAttributeName);
if (product != null) {
product.quantity = 1; // could be set from input if possible to add more items at once
tracker.sendCartEvent([product], "addToCart");
}
});See QuickSilver for a complete example.
Transactions are typically tracked on your order confirmation page (at the bottom of the page). Note: The track() method uses a cookie in order to prevent duplicate transaction data.
<script src="~/Scripts/Geta.GTM.Ecommerce/geta.transaction.js"></script>
<script>
var products = @Html.Raw(transactionProducts);
var transaction = {
"id": "@Model.OrderId",
"affiliation": "Quick Silver demo site",
"total": "@Model.CartTotal.Amount.ToString("0.00", CultureInfo.InvariantCulture)",
"shipping": "@Model.ShippingTotal.Amount.ToString("0.00", CultureInfo.InvariantCulture)",
"tax": "@Model.TaxTotal.Amount.ToString("0.00", CultureInfo.InvariantCulture)",
"coupon" : ""
};
var gtmTransaction = new GtmTransaction();
gtmTransaction.track(transaction, products);
</script>Prerequsites: Google Analytics and Google Tag Manager Account. You can import predefined tags and events following this recipie:
- In GTM, Admin --> Import Container: Choose demo.gtm.container.json as container file
- Choose 'Existing' (DefaultWorkspace as Workspace and 'merge')
- In GTM, Workspace --> Variables --> Set value for GAUserId to your Google Analytics tracking id.
Here is how the 'Tags' overview should look like.
Note: If you don't want to import, you need to setup the required tags and event your self. If you do so, make sure you use the follow event names: 'impressions', 'addToCart', 'removeFromCart', 'checkout', 'productClick'
See examples for more hands on examples on using the module and generating json objects.