Page History

Prerequisites 

1. Google Tag Manager and GA4 accounts

This guide only documents any steps needed to get credentials You will need to get your site's Container ID from Google Tag Manager. Your Before you start, your Tag Manager and GA4 accounts should be set up alreadyready 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 ID is 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.
   
   - Digital Remarketing -  use Analytics with Google Tag Manager for remarketing tools such as Google Ads or for dynamic remarketing. In dynamic remarketing,  after where after they leave your site and continue to browse the internet, shoppers can be are shown personalised ads based on of the products they purchased or viewed.
   - Ecommerce - add this option to collect and send fine-grained data about shopper behaviours and journeys. Use it in Analytics to produce more indepth reports 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 this guide lists the GA4 events and data automatically included when the GA4 version is enabled. You can also deselect events and data types you do not want to collect.  
   - Enhanced Rich Snippet - 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 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. 

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.

Digital Remarketing

Digital remarketing tags your site for online remarketing. Your store or products can be advertised to shoppers after they have left your store. This could be 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. 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.  You can untick any page types to be excluded from remarketing.

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

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

(Enhanced) ecommerce data is pushed Data can be collected and sent for nearly every user event type on the websitefrom your store. How CV data fields match GA4 parameters and values are matched to GA4 variable and value labels are outlined below. 

Default value labels:

• Event Name: use the GA4 event names name 

• Cart URL: /cart

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

Options

Product Impression data is pushed whenever a list of products from a search is displayed, e.g., in search results, a category list, the user's favourites. 

In GA4, this is the Event:view_item_list event. Data sent include the items object event containing each product listedwith 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 event (Product Details)

In GA4, product details data are in the 'items' event/object, with each product added in the array [ ]Event: items This is an array [ ] that contains each product and its product details data.

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 item_list_name variable to track the list the shopper was viewing.  

Product Details

Product List

Search Results

Items Recently Viewed

Campaign

CrossSell

Upsell

User Favourites

Prior Purchases

Prior Purchases

Product Details

Product Details

item_list_name example:

("event": "ecommerce", 
	"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 pushed on any click of on a product link, e.g., a product on a search results page or from the user's favourites list.

In GA4, the event is called Event: select_item. Details of a It contains the items event with the clicked product are from the Product/Item event parametersas the only product in the array.  

select_item

Select Item example:

("ecommerce", "select_item", {
  	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)

A shopper's data is pushed on every page of the site.  You can select to send only data for logged in shoppers.

Event: User_ID

This includes the user's unique identifier (CV database field = user.userid ) 

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 name is ': begin_checkout'.  checkout  Tick 'Checkout Options' to include other details selected during checkout.

 begin_checkout example:

("ecommerce", "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

Tick to include data about the products purchased.

Event: purchase

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

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

Purchase example:

"ecommerce", "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

Event: Login (successful) 

Login

Success

data

are

pushed

on

any

successful

user

login. 

• event = "login"

• method = name of the widget used to initiate the login 

Event:  login

login example:

("ecommerce", "login", {
  method: "widget namelogin"
});

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) 

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

Anchor
ecomaddtocart ecomaddtocart

add_to_cart 

(Add

to

Cart)

Add

To

Cart

data

are

pushed

every

time

a

shopper

successfully

adds

a

product

to

their

cart. 

List type

list type determined by the list type from which product was added . See: List Names. 

add_to_cart example

("ecommerce", "add_to_cart", {
  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)

Remove

From

Cart

data

are

pushed

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

 ("ecommerce", "remove_from_cart", {
  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
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