Tracking Nosto with Google Analytics Enhanced Ecommerce

Search…
Outline
This document describes how to implement basic Enhanced Ecommerce tracking (product list impressions, product clicks and add to cart events) for Nosto recommendations using Google Analytics. This guide has been written with the assumption that your store uses Google Tag Manger (GTM) and dataLayer.
The basic idea of the implementation is that product lists are created in Nosto’s templates, then moved to the global scope (_targetWindow) and finally pushed to the dataLayer via GTM and tracked with Google Analytics (GA).
You should have basic knowledge about javascript and GTM in order to use this guide efficiently.
Configuration
GTM must be installed into your store. Also make sure the Enhanced Ecommerce is enabled in your GA account.
Implementation - Nosto
Initialize javascript variables and list name
Place the following snippet into the recommendation template just before the product loop (#foreach($product in $products))
1
#set($gtmListName =  "Nosto - $!divId")
2
<script>
3
var productDataForGtm = {
4
    impressions: [],
5
    listName: "$gtmListName"
6
};
7
var nostoCurrency = '';
8
</script>
Copied!
Push product data into productDataForGtm variable
This snippet must be placed inside the product loop, for example right in the beginning of the product loop .
Important! In order to keep you tracking and reporting consistent make sure you use the same source value for the id of the product for all tracking events
1
#set($jsonProduct = "{name: '$!product.name',id: '$!product.productId',price: '$!product.price',brand: '$!product.brand',category: '', variant: '', url: '$!product.url', position: $!velocityCount}")
2
<script>
3
        productDataForGtm.impressions.push({
4
            name: "$!product.name",
5
            id: "$!product.productId",
6
            price: "$!product.price.asNumber",
7
            brand: "$!product.brand",
8
            position: $!velocityCount
9
        });
10
        nostoCurrency = '$!product.currencyCode';
11
</script>
Copied!
Add onClick event to links
Each link to a product page needs to call nostoTrackRecoClick($jsonProduct, '$gtmListName'). A link to a product page should look something like below.
1
<a onClick="nostoTrackRecoClick($jsonProduct, '$gtmListName')"  href="$!product.url" class="nosto-product-brand">$!product.brand.truncate($!props.display.truncateBrandNameAfter)</a>
Copied!
In order to track cart additions from the recommendations you must call nostoTrackAddToCart($jsonProduct, '$gtmListName');.
1
<button onclick="Nosto.addProductToCart('$!product.productId', this); nostoTrackAddToCart($jsonProduct, '$gtmListName'); return false;" class="nosto-btn">$!props.display.buyButtonCopy</button>
Copied!
Expose the impression data to the _targetWindow
The impression data must be available in javascript's window object for the GTM to be able to read the data. In order to expose productDataForGtm to window you need to use _targetWindow object. Place the following snippet to the end of the template just before closing #end condition.
1
<script>
2
    (function(){var name="nostoGtmQueue";_targetWindow[name]=_targetWindow[name]||function(cb){(_targetWindow[name].q=_targetWindow[name].q||[]).push(cb);};})();
3
    _targetWindow.nostoGtmQueue(productDataForGtm);
4
​
5
    if (typeof _targetWindow['nostoCurrency'] == "undefined" || !_targetWindow['nostoCurrency']) {
6
        _targetWindow['nostoCurrency'] = nostoCurrency;
7
    }
8
</script>
Copied!
Google Tag Manager
You will need one custom tag and three trigger tags in GTM for the tracking to be complete.
Nosto - tracking tag
Add following javascript snippet as a custom html tag and configure the tag to be triggered in all pages on page view.
1
<script>
2
nostoTrackAddToCart = function(product, list) {
3
    dataLayer.push({
4
        'event': 'nostoAddToCart',
5
        'ecommerce': {
6
            'currencyCode': 'EUR',
7
            'add': {                                // 'add' actionFieldObject measures.
8
                'products': [{                        //  adding a product to a shopping cart.
9
                    'name': product.name,
10
                    'id': product.id,
11
                    'price': product.price,
12
                    'brand': product.brand,
13
                    'quantity': 1
14
                }]
15
            }
16
        }
17
    });
18
}
19
nostoTrackRecoClick = function(product, list) {
20
    dataLayer.push({
21
        'event': 'nostoProductClick',
22
        'ecommerce': {
23
            'click': {
24
                'actionField': {'list': list},      // Optional list property.
25
                'products': [{
26
                    'name': product.name,                      // Name or ID is required.
27
                    'id': product.id,
28
                    'price': product.price,
29
                    'brand': product.brand,
30
                    'position': product.position
31
                }]
32
            }
33
        },
34
        'eventCallback': function() {
35
            location = product.url;
36
        }
37
    });
38
}
39
​
40
nostojs(function(api){
41
    api.listen("postrender", function(postRenderElements){
42
        if (typeof nostoGtmQueue != "undefined" && nostoGtmQueue != null && typeof nostoGtmQueue == "function" && typeof nostoGtmQueue.q == "object" ) {
43
​
44
            var impressions = [];
45
            for (i = 0; i < nostoGtmQueue.q.length; i++) {
46
                var slotQueue = nostoGtmQueue.q[i];
47
                  if (slotQueue.impressions != null && typeof slotQueue.impressions == "object")                     {
48
                    for (x = 0; x < slotQueue.impressions.length; x++) {
49
                          var product = slotQueue.impressions[x];
50
                              product.list = slotQueue.listName;
51
                        impressions.push(product);
52
                    }
53
                }
54
            }
55
            var currency = 'EUR';
56
            if (typeof nostoCurrency != "undefined" && nostoCurrency != null) {
57
                currency = nostoCurrency;
58
            }
59
​
60
            var nostoEcomData = {
61
                'ecommerce' : {
62
                    'currencyCode' : currency,
63
                    'impressions': impressions
64
                },
65
                'event': 'nostoEcomImpression'
66
            }
67
            dataLayer.push(nostoEcomData);
68
        }
69
    });
70
});
71
</script>
Copied!
gtm_nosto_tracking_tag
Nosto - trigger product list view
Create new tag with following configuration
Tag type: Universal Analytics
Category: Ecommerce (or whatever you prefer)
Action: Product list impression (or whatever you prefer)
Non-interaction hit: True (product list impression will not be treated as interaction)
Google Analytics Settings: your GA account (it's highly recommended to configure GA account as a variable)
Enable overriding settings in this tag: checked
More settings > Ecommerce > Enable Enhanced Ecommerce Features: True
More settings > Ecommerce > Use Data Layer: checked
google_tag_manager
Triggering
Trigger type: Custom event
Event name: nostoEcomImpression
This trigger fires on: All Custom Events
gtm_nosto_trigger_for_impressions
Nosto - trigger product click
Create new tag with following configuration
Tag type: Universal Analytics
Category: Ecommerce (or whatever you prefer)
Action: Product list click (or whatever you prefer)
Google Analytics Settings: your GA account
Enable overriding settings in this tag: checked
More settings > Ecommerce > Enable Enhanced Ecommerce Features: True
More settings > Ecommerce > Use Data Layer: checked
Triggering
Trigger type: Custom event
Event name: nostoProductClick
This trigger fires on: All Custom Events
Nosto - trigger cart addition
Create new tag with following configuration
Tag type: Universal Analytics
Category: Ecommerce (or whatever you prefer)
Action: Product list add to cart (or whatever you prefer)
Google Analytics Settings: your GA account
Enable overriding settings in this tag: checked
More settings > Ecommerce > Enable Enhanced Ecommerce Features: True
More settings > Ecommerce > Use Data Layer: checked
Triggering
Trigger type: Custom event
Event name: nostoAddToCart
This trigger fires on: All Custom Events