Sign Up
  1. Znode
  2. Solution home
  3. Developer Documentation
  4. Extending Znode

Working with Google Analytics

TABLE OF CONTENTS

Google Analytics is a web analytics service used to track website traffic. 

General Google Analytics Details

Google Analytics is used to track the following data in Znode:

  1. Number of new users

  2. Top browsed keywords

  3. Active users (real-time)

  4. Page Views

  5. Top Browsers

Note - Additional data can be tracked with simple theme-level customizations.

Administrators can follow the below steps to enable Google Analytics in Znode:

  1. Log in to the Znode admin application

  2. Navigate to Stores > Manage Store > Analytics tab

  3. Add and enable Google Tag Manager - Container Id

  4. Add and enable Google Analytics- Analytics Id

  5. Save the changes


Note - Container Id and Analytics Id needs to be enabled to use GA and GTM.

The Google Analytics Id is incorporated in Znode using the following script:

@if (applyGoogleAnalytics)
{
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=@googleAnalyticsTrackingId"></script>
    <script>
        window.znodeDataLayer = window.znodeDataLayer || [];
        function gtag() {
            znodeDataLayer.push(arguments);
        }
        gtag('js', new Date());
        gtag('config', '@googleAnalyticsTrackingId');
    </script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
}

Znode application pushes the data using the GTM data layer to GA and the tracking is done for the webstore pages only.

Here are the sample GTM scripts examples (from web store theme folder) which are embedded in different pages to push data to GA:

  1. For the Products List Page, the data layer gets pushed from the function call of GoogleAnalytics.ts file from _PLPTracking.cshtml page

     //Send the product list ecommerce data to Google Analytics through data layer
        SendProductListDataImpressions(data: any, currencyCode: string) {
            var ecommerce = {};
            var impressions = [];
            $.each(data, function (v, e) {
                var listName: string;
                if (e.SearchKeyword != null && e.SearchKeyword != "") {
                    listName = "Search results for " + e.SearchKeyword;
                }
                else {
                    listName = e.CategoryName;
                }
                var product: Znode.Core.EcommerceProductListDataModel = {
                    id : e.SKU,
                    name : e.Name,
                    category: e.CategoryName,
                    brand: e.BrandName,
                    list: listName,
                    price: e.ProductPrice
                };
                impressions.push(product);
            });
            ecommerce["currencyCode"] = currencyCode;
            ecommerce["impressions"] = impressions;
            znodeDataLayer.push({ "ecommerce": ecommerce });
        };

  2. For the Product Details Page, the data layer gets pushed from the function call  of GoogleAnalytics.ts file from _PDPTracking.cshtml page

    //Send the product detail views ecommerce data to Google Analytics through data layer
        SendProductDetailViews(data: any, currencyCode: string) {
            var product: Znode.Core.EcommerceProductDataModel = {
                id: data.SKU,
                name: data.Name,
                category: data.CategoryName,
                brand: data.BrandName,
                price: data.ProductPrice
            };
            znodeDataLayer.push({
                "event": "productDetail",
                "ecommerce": {
                    "currencyCode": currencyCode,
                    "detail": {
                        "products": [product]
                    }
                }
            });
        }

  3. For Add to Cart, the data layer gets pushed from AddToCartAjaxRequest  for a Product if the Ecommerce Tracking is enabled. A function of GoogleAnalytics.ts file is called from the request and used to send the ecommerce data to data layer.

    var brand: string = "";
            var quantity: string = "";
            var price: string = "";
            var name: string = "";
            if ($(control).closest('form').children("#dynamic-productname").val() != undefined) {
                name = $(control).closest('form').children("#dynamic-productname").val();
            }
            else { name = $(".product-name").html() };
            if ($("#lnkProductBrand").html() != undefined) { brand = $("#lnkProductBrand").html().trim() };
            if ($("#spnProductPrice").html() != undefined) { price = $("#spnProductPrice").html().trim() };
            if ($("#Quantity").val() != undefined) { quantity = $("#Quantity").val(); } else { quantity = $(control).closest('form').children("#dynamic-quantity").val() }
            var cartItem: Znode.Core.EcommerceCartItemDataModel = {
                id: $(control).closest('form').children("#dynamic-sku").val(),
                name: name,
                brand: brand,
                variant: $(control).closest('form').children("#dynamic-configurableproductskus").val(),
                quantity: quantity,
                price: price
            }
            znodeDataLayer.push({
                'event': 'addToCart',
                'ecommerce': {
                    'currencyCode': currencyCode,
                    'add': {
                        'products': [cartItem
                        ]
                    }
                }
            });
        }
  4. To push the purchase details data layer gets pushed from GoogleAnalytics.ts file (call from checkoutreceipt.cshtml page)
    var ecommerce = {};
            var purchase = {};
            var actionField: Znode.Core.EcommercePurchaseActionFieldModel = {
                id: data.OrderNumber,
                affiliation: storeName,
                revenue: data.Total,
                tax: data.TaxCost,
                shipping: data.ShippingCost,
            }
            if (data.CouponCode != "" && data.CouponCode != null) {
                actionField["coupon"] = GoogleAnalytics.prototype.GetEcommerceOrderCouponCode(data.CouponCode);
            }
            purchase["actionField"] = actionField;
     
            var purchasedProducts = new Array();
            $.each(data.PurchasedProducts, function (v, e) {
                var purchasedProduct: Znode.Core.EcommercePurchaseItemsDataModel = {
                    id: e.Id,
                    sku: e.Sku,
                    name: e.ProductName,
                    quantity: e.Quantity,
                    price: e.Price,
                    total: e.Price * e.Quantity,
                    description: e.Description
                }
                purchasedProducts.push(purchasedProduct);
            });
     
            purchase["products"] = purchasedProducts;
            ecommerce["purchase"] = purchase;
            znodeDataLayer.push({ "ecommerce": ecommerce });

  5. The GA and GTM script is rendered on _storeanalytics.cshtml page

    @if (applyTagManager)
    {
        <!-- Google Tag Manager -->
        <script data-cfasync="false" type="text/javascript">
            window.znodeDataLayer = window.znodeDataLayer || [];
        </script>
        <script data-cfasync="false" type="text/javascript">
            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window, document, 'script', 'znodeDataLayer', '@tagManagerContainerId');
        </script>
        <!-- End Google Tag Manager -->
    }
     
    @if (applyGoogleAnalytics)
    {
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=@googleAnalyticsTrackingId"></script>
        <script>
            window.znodeDataLayer = window.znodeDataLayer || [];
            function gtag() {
                znodeDataLayer.push(arguments);
            }
            gtag('js', new Date());
            gtag('config', '@googleAnalyticsTrackingId');
        </script>
        <!-- Global site tag (gtag.js) - Google Analytics -->
    }


Notes - 

  • Znode uses the Google Tag manager to push data to Google Analytics and both settings must be enabled from Admin.
  • The value of the event key of the ZnodeDataLayer in the GoogleAnalytics.ts file should match the event name of the custom tags in the google tag manager

Setting up Google Tag Manager:

To run the Google Tag Manager for the Znode application, the below setup steps should be performed:

  1. Create an account and container at tagmanager.google.com

  2. Add the GTM code to the site on the layout.cshtml page of each theme.

  3. To start sending data to Google Analytics, set up a basic pageview tag in GTM along with the required triggers and variables.
    Note - The following link can be referred to learn about creating tags, triggers and variables-https://www.analyticsmania.com/post/ecommerce-tracking-with-google-tag-manager/#configure-google-tag-manager-ecommerce-tracking

  4. Add the below three main things to the layout.cshtml page so that they are included in all the web pages of the web store:

    1. the dataLayer variable declaration -> in the <head> section

    2. the javascript part of the code -> in the <head> section as well

    3. the NoScript part of the code -> immediately after the opening tag

The following screenshot explains the necessary script to be included in the layout file:

solid black circle

GA with Ecommerce setup in Znode:

Standard E-commerce

Google Analytics with Enhanced E-commerce is used to track the following Purchase reports:

  1. Total orders

  2. Total tax cost

  3. Total shipping cost

  4. Total revenue

  5. Products purchased

  6. Coupons used in orders

  7. Conversion Rate

Tag Manager Configurations

The tag manager configurations required to send the Standard eCommerce data to Google Analytics are as follows:

  1. Enable Ecommerce Reports in Google Analytics - 

    1. Log in to the Google Analytics account and navigate to the Admin section (Click on the gear icon in the bottom left corner to open Admin section) and select Ecommerce Settings on the view-level:

    2. Select Enable Ecommerce to Yes using the toggle button to enable eCommerce features.

  2. Create a Google Analytics Transaction tag which will send the purchase data over to Google's servers. In theGoogle Tag Manager container, go to Tags > New and choose the Universal Analytics tag template. In Tag Configuration, enter all the required details:



  1. Create a trigger that will fire that Transaction Tag. Since the eCommerce dataLayer.push code is added below the GTM Container, a DOM ready trigger is created. Go to Triggers (in your GTM container) and click New, then choose Page View -Window Loaded trigger type.

Triggers

Triggers are used in Znode to display purchase data is - Order Confirmation Page

Elements in Data Layer

The following elements are passed in data layer for Purchase tracking; OrderId, Store Name, Order Total, TaxCost(if applied), Shipping Cost, Coupon code(if used), Ordered Items with their LineItemId, SKU, Product Name, Sales Price, Quantity, Total price, Description.

Enhanced Ecommerce

Google Analytics with Enhanced Ecommerce is used to track the following reports in Znode:

  1. Purchases Reports

    1. Total orders

    2. Total tax cost

    3. Total shipping cost

    4. Total revenue

    5. Products purchased

    6. Coupons used in orders

    7. Conversion Rate

  2. Products Reports

    1. Product Detail Views

    2. Product List Clicks

    3. Product List Views

    4. Product Impressions

  3. Cart Reports

    1. Products added to cart

    2. Number of products added to cart

    3. Products removed from cart

    4. Number of products removed from cart

    5. Products Checked out

  4. Product List Performance Report

  5. Checkout Behaviour Report

  6. Shopping Behaviour Report

Tag Manager Configurations

The tag manager configurations required to send the Enhanced eCommerce data to Google Analytics are as follows:

  1. Enable Enhanced Ecommerce Reports in Google Analytics - 

    1. Log in to the Google Analytics account and navigate to the Admin section (Click on the gear icon in the bottom left corner to open Admin section) and select Ecommerce Settings on the view-level:

    2. Select Enable Ecommerce to Yes using the toggle button to enable eCommerce features and select Enable Enhanced Ecommerce Reporting to Yes using the toggle button to enable eCommerce features.

    3. Add the conversion funnel steps for tracking conversions with Checkout Behaviour Report.

Triggers and Tags used and elements passed in the data layer in Znode

  1. Product Impressions -

    For measuring the product impressions(eg. Product List Page, Search Results page, etc) the tag configuration and data layer elements tracked are as follows: 

    Tag Name: GA - PageView 

    Tag type: Universal Analytics

    Track type: Pageview

    Enable override settings in the tag: true

    Tracking ID: enter the tracking ID variable which contains the GA tracking ID constant

    Enable Enhanced Ecommerce Features: true

    Use Data Layer: true

    Trigger Name: Product View

    Trigger type: Page View - DOM ready

    Fire the trigger on all DOM-ready events

    Elements passed in Data Layer: SKU, Product Name, Category Name, Brand Name, List Name, and Currency Code

  2. Product Views -

    For measuring the product impressions(eg. Product List Page, Search Results page, etc) the tag configuration and data layer elements tracked are as follows: 

    Tag Name: PDP View

    Tag type: Universal Analytics

    Track type: Event

    Event Category: Ecommerce

    Event Action: Add to Cart

    Enable override settings in the tag: true

    Tracking ID: enter the tracking ID variable which contains the GA tracking ID constant

    Enable Enhanced Ecommerce Features: true

    Use Data Layer: true

    Trigger Name: Product Detail View

    Trigger type: Custom Event

    Event name: productDetail

    Fire tag on all custom events

    Elements passed in Data Layer: SKU, Product Name, Category Name, Brand Name, Product Price, and Currency Code

  3. Product Clicks -

    For measuring the product clicks(eg. When a product is clicked from PLP or SRP) the tag configuration and data layer elements tracked are as follows: 

    Tag Name: GA - Product Click

    Tag type: Universal Analytics

    Track type: Event

    Event Category: Ecommerce

    Event Action: Add to Cart

    Enable override settings in the tag: true

    Tracking ID: enter the tracking ID variable which contains the GA tracking ID constant

    Enable Enhanced Ecommerce Features: true

    Use Data Layer: true

    Trigger Name: Product Click

    Trigger Type: Custom Event

    Event name: ProductClick

    Fire tag on all the custom events

    Elements passed in Data Layer: SKU, Product Name, Category Name, and Currency Code

  4. Add to Cart -

    For measuring the product add to the cart (eg. When a product is added to the cart) the tag configuration and data layer elements tracked are as follows: 

    Tag Name: Add to Cart

    Tag type: Universal Analytics

    Track type: Event

    Event Category: Ecommerce

    Event Action: Add to Cart

    Enable override settings in the tag: true

    Tracking ID: enter the tracking ID variable which contains the GA tracking ID constant

    Enable Enhanced Ecommerce Features: true

    Use Data Layer: true

    Trigger Name: Add To Cart trigger

    Trigger Type: Custom Event

    Event Name: addToCart

    Fire tag on all custom events

    Elements passed in Data Layer: SKU, Product Name, Brand Name, Variant(if applicable), and quantity

  5. Remove from Cart -

    For measuring the product removed from the cart, the tag configuration and data layer elements tracked are as follows: 

    Tag Name: Remove From Cart

    Tag type: Universal Analytics

    Track type: Event

    Event Category: Ecommerce

    Event Action: Remove from Cart

    Enable override settings in the tag: true

    Tracking ID: enter the tracking ID variable which contains the GA tracking ID constant

    Enable Enhanced Ecommerce Features: true

    Use Data Layer: true

    Trigger Name: Remove From Cart trigger

    Trigger Type: Custom Event

    Event name: removeFromCart

    Fire tag on all custom events

    Elements passed in Data Layer: SKU, Product Name, Brand Name, Variant(if applicable), and quantity

  6. Checkout Behaviour Report -

    For measuring the product checkout and its various steps, the tag configuration and data layer elements tracked are as follows: 

    Tag Name: Checkout Tag

    Tag type: Universal Analytics

    Track type: Event

    Event Category: Ecommerce

    Event Action: Checkout

    Enable override settings in the tag: true

    Tracking ID: enter the tracking ID variable which contains the GA tracking ID constant

    Enable Enhanced Ecommerce Features: true

    Use Data Layer: true

    Trigger Name: Remove From Cart trigger

    Trigger Type: Custom event

    Event name: checkout

    Fire tag on all custom events

    Elements passed in Data Layer: SKU, Product Name, Brand Name, Variant(if applicable), and quantity

Enable Standard And Enhanced Ecommerce Setting for a Store

Administrators can follow the below steps to enable Google Analytics in Znode:

  1. Log in to the Znode admin application

  2. Navigate to Stores > Manage Store > Analytics tab

  3. Select Enable Standard And Enhanced Ecommerce

  4. Save the changes

When Enable Standard And Enhanced Ecommerce is disabled for any store, the Enhanced Ecommerce data will not be tracked in Google Analytics for the selected store and the scripts and data layer will not be initialized in the layout file and other script files.

When Enable Standard And Enhanced Ecommerce is enabled for any store, then the following will be executed in the layout page of every theme

  1. the dataLayer variable declaration -> in the <head> section

  2. the javascript part of the code -> in the <head> section as well

  3. the ‘NoScript’ part of the code -> immediately after the opening body tag

The above changes are available in _StoreAnalytics.cshtml view file


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

Extending Znode