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:
Number of new users
Top browsed keywords
Active users (real-time)
Page Views
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:
Log in to the Znode admin application
Navigate to Stores > Manage Store > Analytics tab
Add and enable Google Tag Manager - Container Id
Add and enable Google Analytics- Analytics Id
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:
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 });
};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]
}
}
});
}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
]
}
}
});
}- 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 }); 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:
Create an account and container at tagmanager.google.com
Add the GTM code to the site on the layout.cshtml page of each theme.
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-trackingAdd the below three main things to the layout.cshtml page so that they are included in all the web pages of the web store:
the dataLayer variable declaration -> in the <head> section
the javascript part of the code -> in the <head> section as well
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:
GA with Ecommerce setup in Znode:
Standard E-commerce
Google Analytics with Enhanced E-commerce is used to track the following Purchase reports:
Total orders
Total tax cost
Total shipping cost
Total revenue
Products purchased
Coupons used in orders
Conversion Rate
Tag Manager Configurations
The tag manager configurations required to send the Standard eCommerce data to Google Analytics are as follows:
Enable Ecommerce Reports in Google Analytics -
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:
Select Enable Ecommerce to Yes using the toggle button to enable eCommerce features.
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:
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:
Purchases Reports
Total orders
Total tax cost
Total shipping cost
Total revenue
Products purchased
Coupons used in orders
Conversion Rate
Products Reports
Product Detail Views
Product List Clicks
Product List Views
Product Impressions
Cart Reports
Products added to cart
Number of products added to cart
Products removed from cart
Number of products removed from cart
Products Checked out
Product List Performance Report
Checkout Behaviour Report
Shopping Behaviour Report
Tag Manager Configurations
The tag manager configurations required to send the Enhanced eCommerce data to Google Analytics are as follows:
Enable Enhanced Ecommerce Reports in Google Analytics -
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:
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.
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
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
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
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
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
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
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:
Log in to the Znode admin application
Navigate to Stores > Manage Store > Analytics tab
Select Enable Standard And Enhanced Ecommerce
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
the dataLayer variable declaration -> in the <head> section
the javascript part of the code -> in the <head> section as well
the ‘NoScript’ part of the code -> immediately after the opening body tag
The above changes are available in _StoreAnalytics.cshtml view file