https://github.com/geta/geta-gtm-ecommerce
https://github.com/geta/geta-gtm-ecommerce
analytics commerce marketing
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/geta/geta-gtm-ecommerce
- Owner: Geta
- Created: 2015-04-22T13:21:29.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T20:40:33.000Z (over 3 years ago)
- Last Synced: 2025-02-08T17:44:49.107Z (over 1 year ago)
- Topics: analytics, commerce, marketing
- Language: JavaScript
- Size: 377 KB
- Stars: 1
- Watchers: 20
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Geta.GTM.Ecommerce
,branch:master/statusIcon)
## Description
Module for enhanced Ecommerce tracking through Google Tag Manager.
## Features
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
## Package maintainer
https://github.com/marijorg
and
https://github.com/milosmalic
## Installation - How to get started?
Start by installing NuGet package (use [NuGet](http://nuget.episerver.com/)):
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](https://developers.google.com/tag-manager/quickstart). Make sure you replace **GTM-XXXXXXX** with your Google Tag Manger code (container id) - ideally by reading the tag code from an appSetting.
```C#
@Html.Partial("_GoogleTagManagerStart", "GTM-XXXXXXX")
```
```C#
@Html.Partial("_GoogleTagManagerNoScript", "GTM-XXXXXXX")
```
Next step is to add the following at the bottom of your layout file (after jquery):
```html
```
### Pro tip: Google Analytics debugger - a time saver
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](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna). 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.
## How does it work
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:
```html
<!-- Using the module - track product impressions and product clicks -->
var tracker = new GtmTrackingProduct();
tracker.trackImpressions();
tracker.trackProductClicks('.jsSearch'); // css container for product lists
```
### Product impressions and clicks
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](QuickSilver%20examples/examples.md) 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:
```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**:
```html
```
```html
Womens
```
#### Sorting, filtering and paging/autoscroll
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.
```js
var tracker = new GtmTrackingProduct();
tracker.addImpressions(newElements, counter);
```
**newElements** - typically a selection of elements with data-gtmproduct
```js
var newElements = $(result).find('[data-gtmproduct]');
```
**counter** - nr of products already visible on the page (0 when sorting/filtering, >0 when paging/autoscroll)
```js
var counter = $("*[data-gtmproduct]").length;
```
Click [here](/QuickSilver%20examples/examples.md#handling-autoscroll-sorting-and-filtering) for an example based on the Episerver QuickSilver site.
## Add/Remove from cart
When adding removing from cart you need to call **sendCartEvent** method:
```js
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':
```js
$('.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](/QuickSilver%20examples/examples.md#handling-autoscroll-and-product-impressions) for a complete example.
## Transactions (purchase)
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.
```js
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);
```
## Setting up Google Tag Manager
Prerequsites: Google Analytics and Google Tag Manager Account.
You can import predefined tags and events following this recipie:
1. In GTM, Admin --> Import Container: Choose demo.gtm.container.json as container file
2. Choose 'Existing' (DefaultWorkspace as Workspace and 'merge')
3. 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'
## More examples
See [examples](QuickSilver%20examples/examples.md) for more hands on examples on using the module and generating json objects.
## Changelog
[Changelog](CHANGELOG.md)