TABLE OF CONTENTS

• Introduction
• Google Tag Manager Setup
• Tags, Triggers, Variables & Templates
  • Add Template
  • Add Variable Templates
• Add Variables
  • Add EEC Products -> GA4 Items Variable
  • Add Currency Code Variable
  • Add Product Value Variable
  • Add to Cart Value Variable
  • E-commerce Transaction Variable
  • E-commerce Value Variable
  • E-commerce Currency Variable
• Add Tags & Triggers
  • Google Analytics All Page Tracking
  • Product Views
  • Product Clicks
  • Add to Cart
  • Remove from Cart
  • Checkout Behavior Report
  • Purchase

Introduction

This article outlines the Google Tag Manager configuration for implementing Google Analytics 4 Pageview tracking and Enhanced Ecommerce tracking on a Znode storefront.

Note - The details outlined in this document are for versions starting with Znode 9.7.4.

Google Tag Manager Setup

You will need to create a Google Tag Manager and Google Analytics 4 account before proceeding with the rest of this article.

1. First, follow this article to add your Google Tag Manager Container ID to your Znode store.
2. With the container created, the necessary Templates, Triggers, Tags, and Variables can then be created. 
   1. If this is a new Znode install without any existing analytics or tracking, there is an option to import the necessary configuration using the linked JSON file at the bottom of this article.
      
   2. Once imported, a valid Google Analytics Measurement ID will need to be added in order for any tracking data to be recorded.
      
   3. Below are the steps to manually create and configure each tag, trigger, variable, and template needed to track page views and eCommerce data for a storefront. This can be used to add to an existing container used on a Znode store.
      
      

Tags, Triggers, Variables & Templates

Add Template

Add Variable Templates

Select Search Gallery and add the following variable template to the workspace:

EEC Products -> GA4 Items

Add Variables

Add EEC Products -> GA4 Items Variable

Variable Name: EEC Products -> GA4 Items

Variable Type: Select EEC Products -> GA4 Items under Custom Templates

Map Source: Map e-commerce object automatically (default option)

Add Currency Code Variable

Variable Name: Currency Code

Variable Type: Data Layer Variable

Data Layer Variable Name: e-commerce. currency code

Data Layer Version: Version 2 (default option)

Add Product Value Variable

Variable Name: Product Value

Variable Type: Data Layer Variable

Data Layer Variable Name: ecommerce.detail.products.0.price

Data Layer Version: Version 2 (default option)

Add to Cart Value Variable

Variable Name: Add to Cart Value

Variable Type: Data Layer Variable

Data Layer Variable Name: ecommerce.add.products.0.price

Data Layer Version: Version 2 (default option)

E-commerce Transaction Variable

Variable Name: E-commerce Transaction

Variable Type: Data Layer Variable

Data Layer Variable Name: ecommerce.purchase.actionField.id

Data Layer Version: Version 2 (default option)

E-commerce Value Variable

Variable Name: E-commerce Value

Variable Type: Data Layer Variable

Data Layer Variable Name: ecommerce.purchase.actionField.revenue

Data Layer Version: Version 2 (default option)

E-commerce Currency Variable

Variable Name: E-commerce Currency

Variable Type: Data Layer Variable

Data Layer Variable Name: ecommerce.purchase.actionField.currency

Data Layer Version: Version 2 (default option)

Add Tags & Triggers

Google Analytics All Page Tracking

For general page tracking the tag configuration is as follows:

Tag Name: Google Analytics 4 - Pageview

Tag type: Google Analytics: GA4 Configuration

Measurement ID:  Enter the measurement ID provided in Google Analytics Admin settings.

Send a page view event when this configuration loads: true

Trigger Name: All Pages

Trigger Type: Page View

This Trigger Fires on All Page Views

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: Product Detail View

Tag type: Google Analytics: GA4 Event

Configuration Tag: Select the previously created Google Analytics GA4 tag

Event Name: view_item

Event Parameters > Parameter Name & Value: items {{EEC Products -> GA4 Items}}

Event Parameters > Parameter Name & Value: currency {{Currency Code}}

Event Parameters > Parameter Name & Value: value {{Product value}}

More Settings > E-commerce > Send E-commerce data: true

More Settings > E-commerce > Data source: Data Layer

Trigger Name: Product Detail View Trigger

Trigger type: Custom Event

Event name: view_item

This trigger fires 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: Product Click

Tag type: Google Analytics: GA4 Event

Track type: Event

Configuration Tag: Select the previously created Google Analytics GA4 tag

Event Name: select_item

Event Parameters > Parameter Name & Value: items {{EEC Products -> GA4 Items}}

More Settings > E-commerce > Send E-commerce data: true

More Settings > Ecommerce > Data source: Data Layer

Parameters: Item

Trigger Name: Product Click Trigger

Trigger Type: Custom Event

Event name: select_item

This trigger fires on All 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 cart) the tag configuration and data layer elements tracked are as follows: 

Tag Name: Add To Cart

Tag type: Google Analytics: GA4 Event

Configuration Tag: Select the previously created Google Analytics GA4 tag

Event Name: add_to_cart

Event Parameters > Parameter Name & Value: items {{EEC Products -> GA4 Items}}

Event Parameters > Parameter Name & Value: currency {{Currency Code}}

Event Parameters > Parameter Name & Value: value {{Add to cart Value}}

More Settings > E-commerce > Send E-commerce data: true

More Settings > E-commerce > Data source: Data Layer

Trigger Name: Add To Cart Trigger

Trigger Type: Custom Event

Event Name: add_to_cart

This trigger fires 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: Google Analytics: GA4 Event

Configuration Tag: Select the previously created Google Analytics GA4 tag

Event Name: remove_from_cart

Event Parameters > Parameter Name & Value: items {{EEC Products -> GA4 Items}}

More Settings > E-commerce > Send E-commerce data: true

More Settings > E-commerce > Data source: Data Layer

Trigger Name: Remove From Cart Trigger

Trigger Type: Custom Event

Event Name: remove_from_cart

This trigger fires on All Custom Events

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

Checkout Behavior Report

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

Tag Name: Checkout Tag

Tag type: Google Analytics: GA4 Event

Configuration Tag: Select the previously created Google Analytics GA4 tag

Event Name: begin_checkout

Event Parameters > Parameter Name & Value: items {{EEC Products -> GA4 Items}}

More Settings > E-commerce > Send E-commerce data: true

More Settings > E-commerce > Data source: Data Layer

Trigger Name: Remove From Cart trigger

Trigger Type: Custom event

Event name: begin_checkout

This trigger fires on All Custom Events

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

Purchase

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

Tag Name: Purchase Tag

Tag type: Google Analytics: GA4 Event

Configuration Tag: Select the previously created Google Analytics GA4 tag

Event Name: purchase

Event Parameters > Parameter Name & Value: transaction_id {{Ecommerce Transaction}}

Event Parameters > Parameter Name & Value: value {{Ecommerce Value}}

Event Parameters > Parameter Name & Value: items {{EEC Products -> GA4 Items}}

Event Parameters > Parameter Name & Value: currency {{Ecommerce Currency}}

Send E-commerce data: true

Data source: Data Layer

Trigger Name: Purchase Trigger

Trigger Type: Page View - DOM Ready

This trigger fires on Some DOM Ready Events

Fire this trigger when an Event occurs and all of these conditions are true:

Page URL - Contains - /checkout/ordercheckoutreceipt (Enter Order checkout receipt URL)

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