Google Analytics In Znode

From Znode Knowledge Base
Jump to: navigation, search

Definition:

Google Analytics is a web analytics service offered by Google that tracks and reports website traffic, currently as a platform inside the Google Marketing Platform brand.

GA in Znode:

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

1. No. of new users
2. Top browsed keywords
3. Active Users (real-time)
4. Page Views
5. Top Browsers

Note: Additional data can be tracked by doing some simple customization at the theme level.

Admin users can follow the below steps to enable Google Analytics in Znode.

1. Login to Znode admin
2. Go to Stores
3. Manage/Add the store
4. Go to Analytics.
5. The Google tag manager Id needs to be entered once the Google Analytics ID is created. All the activities can be tracked only after entering this and checking the enable checkbox.
solid black circel

Note - Container Id and Analytic Id needs be enabled in terms of using GA and GTM.

Znode has incorporated the Google Analytics Id using the following script (refer image below) :

solid black circle

Znode pushes the data using the GTM datalayer to GA. Tracking is done for the webstore pages only.

Here are the sample GTM scripts which Znode has embedded within different pages to push data to GA :

Script examples are (From webstore theme folder):

1. For Product Listing Page, data layer gets pushed from _productgrid.cshtml page

solid black circle

2. For Product Details Page, data layer gets pushed from _productoverview page

solid black circle

3. For Add to Cart, data layer gets pushed from file product.ts in function BindAddOnProductSKU

solid black circle

4. To push final order details data layer gets pushed from checkout.ts (call from checkoutreceipt.cshtml page)

solid black circle

5. In order to create the data layer, we use the prepareDataLayer() function which is written in Checkout.ts file and it is being called from CheckoutReceipt.cshtml page.

6. In order to push the data in GA we use the PutDataIntoDataLayer() function which is written in Checkout.ts file and is being called from CheckoutReceipt.cshtml page.

solid black circle

7. We always render the GA and GTM script on _storeanalytics.cshtml page.

solid black circle

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 with Znode

In order to run the Google Tag Manager on the znode application, we need to do the following setup:
1. First, create an account and a container at tagmanager.google.com, --> https://tagmanager.google.com/#/home
2. Add the GTM code to the site on the layout.cshtml page of each theme.
3. To start sending data to Google Analytics, we need to set up a basic pageview tag in GTM along with the required triggers and variables. To learn how to create tags, triggers, and variables please visit the below link:
https://www.analyticsmania.com/post/ecommerce-tracking-with-google-tag-manager/#configure-google-tag-manager-ecommerce-tracking

4. There are three main things that need to be added to the layout.cshtml page so that it gets included in every web page of our site

a. the dataLayer variable declaration -> in the <head> section
b. the javascript part of the code -> in the <head> section as well
c. the NoScript part of the code -> immediately after the opening tag

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

solid black circle