TABLE OF CONTENTS

• Introduction
• Znode.Engine.Admin
  • Store.ts
  • CreateEditAnalytics.cshtml
• Znode.Engine.Webstore
  • ZnodeModel.ts
  • GoogleAnalytics.ts
  • CheckoutReceipt.cshtml

Introduction

As reported by Google, Google Analytics 4 is replacing Universal Analytics. On July 1, 2023, all standard Universal Analytics properties will stop processing new hits. Please read their articles on how to migrate from UA to GA4.

Note: If you are not utilizing Google’s Enhanced Ecommerce tracking, then you do not have to make the following code changes.

The following article outlines the changes and configurations required for Google Analytics 4 Enhanced Ecommerce Support in Znode version 9.6.0 - 9.7.3. Once the code changes in this article are complete, you will have to follow the steps outlined in this article to configure Google Analytics 4 and Google Tag Manager.

In order to make the theme changes, you can expect to modify C# and TS/JS files throughout the Znode theme. Following is a list of files in which changes are required.

Znode.Engine.Admin

This section provides changes needed for the Admin Application.

Store.ts

1. File Path:
   ZnodeMultifront\Projects\Znode.Engine.Admin\Scripts\Core\Znode\Store.ts
   1. DisableEnhancedEcommerce: Add a new method to disable the ‘EnableEnhancedEcommerce’ checkbox condition in Store.ts file.
   2. EnableEnhancedEcommerce: Add a new method to handle the EnableEnhancedEcommerce checkbox condition in store.ts file.
      
      
   3. EnableEnhancedEcommerce: Add a new method to handle the EnableEnhancedEcommerce checkbox condition in store.ts file.
      
      

CreateEditAnalytics.cshtml

1. File Path: ZnodeMultifront\Projects\Znode.Engine.Admin\Views\Store\CreateEditAnalytics.cshtml
2. The Onclick event onclick="Store.prototype.EnableEnhancedEcommerce()" has been added in the view for the enable in the input tag name=”TagManager.IsActive”.
    
3. The Onclick event onclick="Store.prototype.DisableEnhancedEcommerce()" has been added in the view for the enable in the input tag name=”TagManager.EnableEnhancedEcommerce”.
   
4. The following JS/jQuery script has been added to the bottom of the view (please refer to the screenshot below)
   
   

Znode.Engine.Webstore

This section provides changes needed for the Webstore Application.

ZnodeModel.ts

1. File Path: ZnodeMultifront\Projects\Znode.Engine.WebStore\Scripts\Core\Model\Znode.Model.ts
2. EcommercePurchaseActionFieldModel: New Property currency has been added in the model for passing the currency code to GA4 for getting the product item revenue for the purchase event.
   

GoogleAnalytics.ts

1. File Path: ZnodeMultifront\Projects\Znode.Engine.WebStore\Scripts\Core\Znode\GoogleAnalytics.ts
   1. SendProductDetailViews: The Event name has been modified from productDetail to view_item for GA4.
       
   2. SendProductClicks: The Event name has been modified from ProductClick to select_item for GA4
       
   3. SendProductAddToCarts: The Event name has been modified from addToCart to add_to_cart for GA4.
       
   4. SendAddToCartsFromQuickOrder: The Event name has been modified from addToCart to add_to_cart for GA4.
       
   5. SendAddToCartsFromMultipleQuickOrder: The Event name has been modified from addToCart to add_to_cart for GA4.
       
   6. SendRemoveFromCartsForAllCartItems: The Event name has been modified from removeFromCart to remove_from_cart for GA4.
       
   7. SendRemoveFromCartsForSingleCartItem: The Event name has been modified from removeFromCart to remove_from_cart for GA4.
       
   8. SendEcommerceCheckoutData: The Event name has been modified from checkout to begin_checkout for GA4.
      
   9. SendEcommercePurchaseData: A new Parameter currencyCode has been added to pass the currency code in the purchase event.
      
      

CheckoutReceipt.cshtml

1. File Path: ZnodeMultifront\Projects\Znode.Engine.WebStore\Views\Themes\B2B\Views\Checkout\CheckoutReceipt.cshtml.
2. Additional javascript logic has been added in the script code at the bottom of the page. The following is added to pass the currency code in GoogleAnalytics.prototype.SendEcommercePurchaseData -
   '@Helper.GetPortalCurrency()'