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 -->
    }


Note - Znode uses the Google Tag manager to push data to Google Analytics and both settings must be enabled from Admin.

Setting up Google Tag Manager:

In order to run the Google Tag Manager for 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 Ecommerce

Google Analytics with Enhanced Ecommerce 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 data layer in Znode

  1. Product Impressions - To measure 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 Enhanced Ecommerce Features: true
    Use Data Layer: true
    Trigger Name: Product View
    Trigger: event equals gtm.dom
    Elements passed in Data Layer: SKU, Product Name, Category Name, Brand Name, List Name, and Currency Code

  2. Product Views - To measure 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: Pageview
    Enable Enhanced Ecommerce Features: true
    Use Data Layer: true
    Trigger Name: Product Detail View
    Trigger: event equals gtm.dom
    Elements passed in Data Layer: SKU, Product Name, Category Name, Brand Name, Product Price, and Currency Code

  3. Product Clicks - To measure 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
    Enable Enhanced Ecommerce Features: true
    Use Data Layer: true
    Trigger Name: EEproductClick
    Trigger: event equals productClick
    Elements passed in Data Layer: SKU, Product Name, Category Name, and Currency Code

  4. Add to Cart - To measure the products added to 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 Enhanced Ecommerce Features: true
    Use Data Layer: true
    Trigger Name: Add To Cart trigger
    Trigger: event equals addToCart
    Elements passed in Data Layer: SKU, Product Name, Brand Name, Variant(if applicable), and quantity

  5. Remove from Cart - To measure 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 Enhanced Ecommerce Features: true
    Use Data Layer: true
    Trigger Name: Remove From Cart trigger
    Trigger: event equals removeFromCart
    Elements passed in Data Layer: SKU, Product Name, Brand Name, Variant(if applicable), and quantity

  6. Checkout Behaviour Report - To measure 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: Remove from Cart
    Enable Enhanced Ecommerce Features: true
    Use Data Layer: true
    Trigger Name: Remove From Cart trigger
    Trigger: event equals removeFromCart
    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.