Page History

Prerequisites 

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 GA4 Analytics 

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 an the ID is was entered , the functions are displayed. TIP - To capture the basic properties of the shopper journey, tick Digital Remarketing. To include fine-grained properties of a range of shopper  journeys, tick Enhanced eCommerce as well.
   Image Removed
   - Digital Remarketing -  use Analytics with Google Tag Manager in step 5, three functions appear. 
   Image Added
   
   1. Digital Remarketing -  this tags each page on your site with the remarketing event. This sends basic data from each viewed page to Google Tag Manager. These data can eventually be used for remarketing tools such as Google Ads
   or
   1. and can be used for dynamic remarketing, where after they leave your site, shoppers are shown personalised ads of the products they viewed.
   -
   1. Ecommerce -
   add this option to collect and send fine-grained data about
   1. this sends a range of data types from Google recommended GA4 events. See: GA4 recommended events. shopper behaviours and journeys
   . Use it
   1. that can be used in Analytics
   to produce more indepth reports
   1. for indepth reporting on user activity patterns, 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. The ecommerce section
   of
   1. in this guide lists the
   GA4
   1. standard events
   and data automatically included when the GA4 version is enabled
   1. data are collected for in terms of GA4 event structures. You can also deselect any of these events and data types you do not want to
   collect
   1. include.
     
   1.    
   - Enhanced
   1. Enhanced Rich Snippet -
   add
   1. this allows you to 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 supplied by CV ecommerce.

This 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 a global template that includes all users or 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.

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. You can then use that information to populate variables and activate triggers in your tag configurations.

Remarketing

Digital remarketing tags your site for online remarketing. Your store or products can be advertised The 'remarketing' option is an event that tags every page on your site to send certain data. This is when your store or products display as ads to shoppers after they have left your store. This could be your store and continue browsing, e.g., through Google Adwords or ads on Google-partnered sites as the shopper continues their online journey. You can also use dynamic remarketing, when ads are personalised to show products on pages visited by a shopper. . The data can also be used for dynamic remarketing - ads that are personalised with products from pages viewed while on your site.

By default, data from every page type is sent to Google. Some of these page types contain product value data based on products viewed and/or purchased by specific users.  YYou can untick any page types to be excluded from the remarketing event.

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 additional richer data about shoppers to Google Tag Manager. Instead of just basic transactional information, activities such as when shoppers add items to cart, when they remove items, when they abandon their carts and leave without purchasing, where they begin checkout, etc, are also collected. This data can be used to produce more insightful reports on site engagement, e.g., shopper behaviour patterns or conversion success rates on particular pages, search analytics, etc, as well as the ability to build more granular and complex audience segments for remarketing. 

Data can be collected and sent for nearly every user event type from your store. How CV data are matched to GA4 variable and value labels are outlined below. Default labels. Most events and data types (parameters) included are Google recommended events. 

Note the following:

• Event Name: the GA4 event name 

• Cart URL: /cart

• Product Pricing: inc  (Change to exc to exclude tax)

Options

Product Impression data is pushed whenever This event is logged when the user has been presented with a list of products items from a certain category or search is displayedresults, e.g., in from a search results, a category list , the or user's favourites. 

Event: view_item_list. Data sent include variables from the items event containing to specify each product with their details. 

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.

view_item_list

Anchor
item item

items

array (Product Details)

Event: The items This is an array [ ] that contains each product and its product details data.

It is added in events that typically include sending of specific products. These variables can be included.  

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

Anchor
list_type list_type

item_list_name (list type)

Lists are used for product impressions, product clicks and add to cart tracking.

Event: item_list_name 

The list type is included in the The variable item_list_name to track contains the list type that the shopper was viewing .  

Variable Name

as the value. It is included in a number of events, e.g., view_item_list

, item, select_item etc. The CV names are used as values.  

Prior Purchases

Product Details

item_list_name example:

	"view_item_list", {
  	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,
      }   ]
} 

Anchor
ecomclicks ecomclicks

select_item (Product Click)

Product Click data are 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., a product on a search results page or from the user's favourites list. Event: select_item. It contains It includes data from the items event array with the clicked product as the only product in the array.  

select_item

Select Item example:

 	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
    }
  ]
}

}

Anchor
ecomuser ecomuser

User_ID (User ID) parameter

The User_ID parameter 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 shoppersusers.

Event: User_ID 

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

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

Anchor
ecomquestion ecomquestion

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.)

Anchor
ecomcheckout ecomcheckout

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
    }
  ]
});

Anchor
ecomtrans ecomtrans

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
    }]
})

Anchor
ecomlogin ecomlogin

Login (

successful) 

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

login example:

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

Anchor
ecomlogout ecomlogout

Logout Success

Logout Success data is pushed on any successful user logout.  

• Event = "logout"

• method = 'widgetName' ( widget used to initiate the logout) logout 

{
	"event": "logout",
	"widgetNamemethod": "widget name"
}

Anchor
ecomaddtocart ecomaddtocart

add_to_cart  (Add to Cart)

Add To Cart data are pushed The add_to_cart event is triggered every time a shopper successfully adds a product to their cart. 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

("ecommerce",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 }
    }]
  ]}
});

Anchor
ecomremovefromcart ecomremovefromcart

remove_from_cart (Remove from Cart)

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.

Event	remove_from_cart
VariableParameter	Value	Notes
value	value	value of order line (product x quantity)
currency	currency code	currency code for the current account
eventarray	items [ ]	An array with containing each product removed . Standard product data with its details (e.g. name, id, category, quantity, brand, price) are   included. See: items event for product data values.

remove_from_cart example

Code Block
language js title Sample remove_from_cart event data collapse true
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push({ event: "remove_from_cart", ecommerce: { currency currency: "AUD", value: 2010.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: 21 } ] } });

Anchor
ecomcartupdate ecomcartupdate

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

Anchor
ecompromo ecompromo

Promotion Codes 

Promotion Code use automatically pushes event type and promotion code name: 

• successful promo code add - 'validPromoCode'

• failure of promo code add - 'invalidPromoCode'

• removal of promo code 'removedPromoCode'

{
	"event": "validPromoCode",
	"promoCode": "TWOFORONE"
}

{
	"event": "removedPromoCode",
	"promoCode": "XXXX"
}

Anchor
ecomvieworder ecomvieworder

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"
}

Anchor
ecomviewtemplate ecomviewtemplate

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"
}

Anchor
extend extend

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) 
       
       

       Code Block
       title 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

Anchor
richsnippets richsnippets

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

 Content by Label
showLabels
false
max
5
spaces
KB
showSpace
false
sort
modified
reverse
true
type
page
excludeCurrent
true
cql
label in ("google","analytics") and type = "page" and space = "KB"
labels
Google Analytics