Google Tag Manager with Google Analytics (v4)

Before You Begin 

1. Google Tag Manager and GA4 accounts

You will need to get your site's Container ID from Google Tag Manager. Before you start, your Tag Manager and GA4 accounts should be ready to go. Learn more at Google: Set up GA4; Google Tag Manager with GA4

2. CMS Analytics feature enabled in CMS

If Analytics is not enabled, contact Commerce Vision.

3. Templates/Widgets Setup

To trigger the product click (select_item) event in GA4, check these setups:

• Product List Grid widget: zoned layouts are enabled for Products and Categories.

  (Pages & Templates → Products → Product List Grid widget)

  

• Items Recently Viewed widget is added to Home Page
  (Pages & Templates → Home Page → Items Recently Viewed widget)

• CrossSell/Upsell widgets: are added to Product Detail
  (Pages & Templates → Products → Product Detail page → CrossSell/Upsell widget)

• Campaign Slider: is added to Home Page

  (Pages & Templates → Home Page → Campaign Slider widget)

4. Enable Favourites for Prior Purchases:

For each shopper and visitor role you want tracked:

1. Go to Ecommerce → Users → Roles.
   
2. Select the Role, then click the Functions tab.
   
   
3. Find and tick Enable Customer Favourites.
   
   
4. Click OK. 
   
   
5. Repeat steps 1-4 for each required role.

Configure CMS Analytics for GA4 

1. Select GA4 version

1. In the CMS, go to: Settings → Settings → Systems → Analytics.
   
   
2. With Analytics enabled on your site, click Configure.
   
   
3. In Analytics Feature Settings, toggle ON Enable Analytics.
   
   
4. In Analytics Version, select 'GA4'. TIP - GA4 should be selected if you are implementing Tag Manager for the first time.
   
   
5. In Google Tag Manager ID, enter the Container ID from your Google Tag Manager account. 
   Example: 
   
   
6. When the ID was entered in step 5, three options appear. 
   
   
   1. Digital Remarketing -  this tags each page on your site for the remarketing event. A set of default data from each viewed page is sent to Google Tag Manager. The data can eventually be used for remarketing tools such as Google Ads and for dynamic remarketing, where shoppers are shown personalised ads of the products they viewed.
   2. Ecommerce - this sends data from a range of triggered events. See: GA4 recommended events. These events capture shopper behaviours and journeys, e.g., how users interact with specific products, where they go to on your site and where they go next, when they abandon their carts and leave your site. This data is used in Analytics for reporting on user activity patterns and can enhance remarketing. Some event options and data types can be deselected.   
   3. Enhanced Rich Snippet - this allows you to add a code snippet that enhances search results visually, e.g., include ratings when a product's page is listed. See: Enhanced Rich Snippets
      
      
7. Click Save.  

2. Set template (optional)

This step is needed only if you do not want to use the default template and setup supplied by CV ecommerce.

The template contains the code that outputs the Google Tag Manager code snippet onto every page. You can however use a custom template, e.g., if you want to customise the data collected. 

Global or Role-based 

You can select to use it globally for all users or have specific role-based ones.

Set Global template

To set a custom global template, go to the default templates admin page. Set the Opening Body Template to the default template or another template you created.

Set Role-based template

To set a role-based template, go to the role management admin page (see Templates tab). Set the Opening Body Template to the default template or another template you created.

Remarketing

The 'remarketing' option enables an event that sends certain data from every page accessed. The data can also be used for remarketing or dynamic remarketing when the user leaves your site and continues browsing.

Page Type

By default, data from every page type is sent. Some of these page types contain product value data based on products viewed and/or purchased by specific users. Below is a list of named page types and data sent for each one.  

The data sent for page type are listed. 

ecomm_pagetype

ecomm_prodid

ecomm_totalvalue

google_conversion_value

Remarketing data sample for a 'purchase' page. 

    "event": "remarketing",
	"ecomm_pagetype": "purchase",
	"ecomm_prodid": ["ProductCode", "ProductCode"],
	"ecomm_totalvalue": "99.99",
	"google_conversion_value": "99.99"

See: Remarketing with Google Analytics 

Ecommerce

Ecommerce sends data collected from triggered events about user activities important for ecommerce stores, e.g., when users add items to cart, when they remove items, when they abandon their carts and leave without purchasing, when they begin checkout, etc. This data can be used to produce insightful reports on site engagement and user behaviours. Data can be collected and sent for nearly every user event type from your store. Most events and their parameters included here are from Google recommended events. 

Data Layer Testing

Google Tag Manager functions best when deployed alongside a data layer. A data layer is a JavaScript object that passes information from your ecommerce platform to your Tag Manager container. 

Ecommerce Settings

General Settings

1. Data Layer Name - system default: datalayer
   
   
2. Product Pricing (Tax Setting) - 'price' parameter defaults to option selected here. System default: inc  Change to exc to exclude tax.
   

   
   

3. Debug to Console - ? - not sure what this means.
   
   

Triggered Events

1. User - send user identifier data (userid) so that you so that you can connect a user with their behavior across different sessions and on various devices and platforms. User ID will be pushed on every page of the site. GA4 Name - User_ID You can exclude unlogged in users.
   
   
2. Login/Logout - these events include data on successful logins and logouts. I can't find Logout in Google documentation.
   
3. Questionaire - this event sends data whenever a questionaire is completed and submitted. For non-widget-based questionnaires only. Triggered when user reaches the 'questionaire submitted and thank you page. Default trigger page URL: /{0}/Thank-you/ 
   
   
4. Order Tracking - this event sends data on the order viewed whenever an order is viewed on the Order Tracking page. Default: triggered by user clicking on an order.
   
   
5. Template View - this event sends data when a saved template is viewed on the Order Templates page. The template name is sent. Default: triggered by user clicking on an order template.  Does this apply anymore?
   
   
6. Add to Cart - this event sends data on the product added to cart. Default: triggered by user adding an item to cart from any page.  NOTE - If Cart Updated is ticked, the activity of increasing quantity of a cart product is included.   
    
7. Remove from Cart - this event sends data whenever a product is removed from cart. Default: triggered by user removing an item from cart. NOTE - If Cart Updated is ticked, the activity of decreasing quantity in cart is included.   
   
   
   
8. Checkout Options - this event is triggered when the user starts the checkout process, i.e., reaches the checkout page. GA Event Name: begin_checkout There are two event names here. Is one for starting checkout, the other does not apply? 
   
   
9. Purchase - this event is not on this page. When an order is submitted, the purchase event sends the transaction details and details of each product. Untick to exclude product data. Also the Transaction Products checkbox does not apply anymore?  
   
   
   
10. Use/Removal of Promo Codes - note: not sure how these map to GA4 events
    1. Apply Promo Code Succcessful - this event is triggered whenever a user adds a promo code successfully.
    2. Apply Promo Code Failure - this event is triggered whenever a user adds a promo code but is unsuccessful.
    3. Remove Promo Code - this event is triggered whenver a user removes a successfully applied promo code.
       
       
11. Items Viewed in List (Product Impressions) - this event is triggered whenever the user is presented with a list of items from a certain category or search results, e.g., from a search results, a category list or user's favourites. Data sent includes each product and its details. See: items GA4 Event Name: view_item_list. Includes the item_list_name parameter.

    NOTE - When infinite scrolling is ON, some pages may load additional data after the initial page load. For this reason, impressions are pushed via an event. Infinite scrolling creates a new event, and therefore a new data push. This also pushes the data in blocks to ensure Google's object data limit is not reached.

    

    1. You can unselect to exclude from list types: Recently Viewed, Campaigns & Upsell/Cross-sell. 
    2. Untick Detail Impression Use From List to exclude data of specific products. (If this is what this field means, why would that be ever done?)


12. Select Item (Product Click) - this event is triggered whenever the user clicks on an item from a list of items. Data sent includes the items array, with the clicked product as the only product. See: items GA4 Event Name: select_item
    
    
13. Banner clicked - this event is triggered whenever the user clicks on a banner. Event name: ? Not sure how mapped to GA4

Reference Guide

view_item_list event (Production Impression from List)

This event is logged when the user has been presented with a list of items from a certain category or search results, e.g., from a search results, a category list or user's favourites. 

Data sent include items,to specify each product with their details. 

view_item_list

items

items exists an array [ ] that sends data on one or more specific products and its details. It is included in events where users view or select specific products. Item parameters below are included out-of-the-box.

item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve

item_list_name (list type)

item_list_name is a parameter that displays the list type name relevant to an event that involves a product list, e.g., view_item_list, item, select_item etc. List types included and values sent are listed below.  

Prior Purchases

Cart Lines

item_list_name example:

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "view_item_list",
  ecommerce: {
  	item_list_name: "Related Products",
 	 items: [
    {
      item_id: "SKU_12345",
      item_name: "CV Tee",
      currency: "AUD",
      index: 1,
      item_brand: "CV",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      price: 10.00,
      }
{
      item_id: "SKU_12222",
      item_name: "CV Jacket",
      currency: "AUD",
      index: 2,
      item_brand: "CV",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Jackets",
      item_category4: "Mens",
      item_category5: "Waterproof",
      price: 70.00,       }]
  }
});

select_item (Product Click)

The select_item event signifies an item was selected from a list, i.e., product was clicked. Data is pushed on any click on a product link, e.g., on a search results page or from the user's favourites list. It includes data from the items array with the clicked product as the only product.  

select_item

Select Item example:

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "select_item",
  ecommerce: {  
	item_list_name: "Related products",
	value: "20.00",
  	items: [
    {
      item_id: "SKU_12345",
      item_name: "CV Tee",
      currency: "AUD",
      index: 0,
      item_brand: "CV",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_name: "Related Products",
      price: 10.00,
      quantity: 2
   }
    ]
  }
});

User_ID (User ID)

User_ID feature allows you to send user identifier data (userid) so that you so that you can connect a user with their behavior across different sessions and on various devices and platforms. User ID is pushed on every page of the site.  You can select to send only data for logged in users.

This includes the user's unique identifier (CV database field = user.userid ) Learn more: User-ID feature

dataLayer.push({
  'user_id': 'USER_ID'
});

Questionnaire

Questionnaire data are only pushed for non-widget-based questionnaires.

Since the URL does not change post submission, a virtual URL is pushed. (In contrast, widget-based questionnaires have a URL redirect post submission.)

dataLayer.push({
  "virtualURL": "thank you URL"
});

begin_checkout (checkout steps & options)

NOTE - In GA4, you need only specify begin_checkout. This is effectively equivalent to UA's sending a checkout_progress event with checkout_step set to 1 ('Step 1' of checkout).

Event: begin_checkout  Tick 'Checkout Options' to include other details selected during checkout.

 begin_checkout example:

("begin_checkout", {
  currency: "AUD",
  value: 20.00,
  items: [
    {
      item_id: "SKU_12345",
      item_name: "CV Tee",
      currency: "AUD",
      index: 0,
      item_brand: "CV",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_name: "Related Products",
      price: 10.00,
      quantity: 2
    }
  ]
});

Event: purchase

When an order is submitted, the purchase event sends the transaction details and details of each product. Untick to exclude product data.

The purchase event has two events: transaction (monetary and payment details) +  items (array with the purchased products). There is no separate payment event.

Purchase example:

"purchase", "transaction" {
    transaction_id: "100000000",
    value: 25.99,
    tax: 4.90,
    shipping: 5.99,
    currency: "AUD",},
    items: [
     {
      item_id: "SKU_12345",
      item_name: "CV Tee",
      currency: "AUD",
      index: 0,
      item_brand: "CV",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_name: "Related Products",
      price: 10.00,
      quantity: 1
    },
    {
      item_id: "SKU_12346",
      item_name: "CV Grey Women's Tee",
      currency: "AUD",
      index: 1,
      item_brand: "CV",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_name: "Related Products",
      price: 10.00,
      quantity: 1
    }]
})

Login (successful) 

The login event is sent when a user successfully logs in. 

login example:

("login", {
  method: "login"
});

Logout Success

Logout Success data is pushed on any successful user logout.  

• Event = "logout"

• method = widget used to initiate the logout 

("logout", {
  method: "widget name"
});

add_to_cart  event

The add_to_cart event is triggered every time a user successfully adds items to cart. This is recommended for businesses with online sales. 

Learn more: add_to_cart 

These parameters are included in the default template.

add_to_cart example

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "add_to_cart",
  ecommerce: {
  currency: "AUD",
  value: 20.00,
  items: [
    {
      item_id: "SKU_12345",
      item_name: "CV Tee",
      currency: "AUD",
      index: 0,
      item_brand: "CV",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve", 
		item_list_name: "Related Products",
      price: 10.00,
      quantity: 2 }
    ]
  }
});

remove_from_cart event

The remove_from_cart event is triggered whenever a product is successfully removed from the shopper's cart.

NOTE - This can be a whole line deletion, or a decrease in quantity. Both actions are sent as 'Remove From Cart' data.

remove_from_cart example

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "remove_from_cart",
  ecommerce: {
  currency: "AUD",
  value: 10.00, 
  items: [
    {
      item_id: "SKU_12345",
      item_name: "CV Tee",
      currency: "AUD",
      index: 0,
      item_brand: "CV",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_name: "Related Products",
      price: 10.00,
      quantity: 1
    }
    ]
  }
});

Cart Updated

Cart Updates will push add_to_cart or remove_from_cart event event depending on product quantity changes:

• Quantity increase triggers an "add_to_cart" data push

• Quantity decrease triggers a "remove_from_cart" data push

Promotion Codes 

Promotion code events automatically sends the promotion code name when the event is triggered: 

• successful promo code add - 'validPromoCode'

• failure of promo code add - 'invalidPromoCode'

• removal of promo code -  'removedPromoCode'

dataLayer.push({
  event: "validPromoCode",
  	promoCode: "TWOFORONE"
})

dataLayer.push({
  event: "removedPromoCode",
  	promoCode: "TWOFORONE"
})

View Order

View Order data is pushed when an order is viewed on the Order History / tracking page. The sales order number is sent.

{
	"virtualURL": "/TrackOrder/ViewOrder/Order Number"
}

View Template

View Template data is pushed when a saved template is viewed on the Order Templates page. The template name is sent.

{
	"virtualURL": "/OrderTemplates/Template Name"
}

Extend or Override Pushed Data

To push custom data or to override out-of-the-box inclusions, consult Commerce Vision. 

For Commerce Vision internal use only:

1. Determine the type of custom data required to push:

   • User

   • Product

   • Order

2. Include the new data by adding the field to the relevant JSON field group. 

   Data Type	Dictionary Table	JSON Field Group
   User	Primary Table: User Additional Tables: Role Customer	SiteTrackerUserData (or SiteTrackerUserData_RoleNamefor role-specific changes)
   Product	Product	SiteTrackerProductData (or SiteTrackerProductData_RoleName for role-specific changes)
   Order	Primary Table: ProntoSalesOrder Additional Tables: ProntoSalesOrderLine Product	SiteTrackerOrderData (or SiteTrackerOrderData_RoleName for role-specific changes)

3. Finally, construct the tracking code per the format below.

   • First parameter is the data to manipulate (e.g. "userDetail" in sample code)

   • Second parameter is the type of manipulation:

     • extend

     • override

   • The third parameter is the function that will perform the manipulation (e.g. "EmailAddress: data.EmailAddress" in sample code)

     • The data is the raw data that can be used for manipulation (and includes the additional data from the JSON field groups described above) 
       
       

       Sample Data Extension code

       $.cv.css.tracker.track("userDetail", "extend", function(data) {
       	return { EmailAddress: data.EmailAddress };
       });

Possible extension methods:

• userDetail

• pageType (this is for Digital Remarketing)

• productImpressions

• productClick

• questionnaire

• checkout

• checkoutOption

• transactionProducts

• loginSuccess

• logoutSuccess

• addToCart

• removeFromCart

• promoCodes

• viewOrder

• viewTemplate

Enhanced Rich Snippets

You can add rich snippets to include key summary details about a website page when it displays in Google search results. An example might be to show ratings for a product's page on your site.   

Learn more: https://developers.google.com/search/blog/2009/05/introducing-rich-snippets

Related Resources

• Page:
  Google API Address Validation
• Page:
  Google Tag Manager with Google Analytics (v4)
• Page:
  Google Tag Manager with UA & GA4
• Page:
  Google Tag Manager & Analytics
• Page:
  Google Sign In