Measure Events on a Product Detail Page

The following image is taken from a product detail page view of the fictitious online store TheGym. It contains several elements that can trigger usage analytic events, such as a Product Detail View, Add to Cart, and Add Impression Data.

TheGym Complete Product Detail Page View

Tracking Commerce Events Prerequisites

Before each event, ensure that you’ve:

Product Detail View

A user viewed a product detail page and you want to measure this type of user interaction.

TheGym Product Detail View

First use the ec:addProduct command to include the relevant product data in the event you’re about to send:

coveoua('ec:addProduct', {
    'id': '037212201_DKBL',
    'name': 'backland 120',
    'brand': 'Atomic',
    'category': 'sport/ski_mountaineering/boots',
    'price': 447.20,
    'variant': '037212201_DKBL_22',
    'position': 1
});

When you structure your items with product grouping, ensure you add the group field to the product dataset. This will send all related items in the analytics payload.

Then, use the ec:setAction command to specify that the action done on this data is a product details view:

coveoua('ec:setAction', 'detail');

Finally, use the send command to send the event to Coveo UA:

If Then

The detail view action and product information is added before the pageview event is sent

There’s no need to send the pageview event. The pageview event you previously configured on the page will contain the action and product information.

The user interaction didn’t open a new page

Manually send the detail view action with a generic event.

For field reference information, see Product Data Fields Reference.

Add to Cart

The user has added a product to the cart and you want to measure this type of user interaction.

TheGym Add to Cart View

Since the page is already loaded and the pageview event is logged, the data must be sent using generic event.

First use the ec:addProduct command to include the relevant product data in the event you’re about to send:

coveoua('ec:addProduct', {
    'id': '037212201_DKBL',
    'name': 'backland 120',
    'brand': 'Atomic',
    'category': 'sport/ski_mountaineering/boots',
    'price': 447.20,
    'variant': '037212201_DKBL_22',
    'position': 1
});

When you structure your items with product grouping, ensure you add the group field to the product dataset. This will send all related items in the analytics payload.

Then, use the ec:setAction command to specify that the action done on this data is an addition to the cart:

coveoua('ec:setAction', 'add');

Finally, use the send command to send the event to Coveo UA:

coveoua('send', 'event');

It’s also possible to send that information in the next pageview event if the add to cart action redirects to a new page. There should only be one pageview event per page.

coveoua('send', 'pageview');

Add Impression Data

A product detail page may also include impressions, also known as product recommendations, that are based on similarly purchased items or on a user profile.

TheGym Product Recommendations View

The Coveo Search APIs log impressions automatically to Coveo. However, there are some scenarios where manually logging impressions is required or recommended:

  • When the list is powered by Coveo, and you have a proxy (or equivalent process) that adds client-side data to product data.

  • When the list is not powered by Coveo, and you would like to compare impressions with and without Coveo.

To send an impression manually, use the following command:

coveoua('ec:addImpression', <DATA>)

Where you replace <DATA> with the product impression object containing the relevant fields. For reference information, see Impression Data Field Reference.

// Add the relevant product data.
coveoua('ec:addImpression', {
  'id': '034177201_YB',
  'name': 'Specter 2.0',
  'brand': 'la_sportiva',
  'category': 'sport/ski_mountaineering/boots',
  'price': 423.15,
  'variant': '034177201_YB_22',
  'list': `<LIST_VALUE>`,
  'position': 1
});
coveoua('ec:addImpression', {
  'id': '035068801_PEOR',
  'name': 'Synchro',
  'brand': 'la_sportiva',
  'category': 'sport/ski_mountaineering/boots',
  'price': 503.15,
  'variant': '035068801_PEOR_22',
  'list': `<LIST_VALUE>`,
  'position': 2
});
coveoua('ec:addImpression', {
  'id': '035068801_PEOR',
  'name': 'S1 carbon',
  'brand': 'scott',
  'category': 'sport/ski_mountaineering/boots',
  'price': 553.68,
  'variant': '035141901_WHT_22',
  'list': `<LIST_VALUE>`,
  'custom' : {
      'onSale' : true
    },
  'position': 3
});

And where <LIST_VALUE> would be replaced by one of the following:

  • If your recommendations are powered by Coveo, use coveo:search:${searchUid} (e.g, coveo:search:9f5da2cc-11ad-11ec-82a8-0242ac130003). For information on how to fetch the searchUid, refer to Extract the SearchUid.

  • If your recommendations aren’t powered by Coveo, enter the name of your recommendations list (e.g., Similar Products).

The command captures visible items on the page the moment the user completes an action. For example, when they select a product, view a page, or receive recommendations.

When you structure your items with product grouping, ensure you add the group field to the product dataset. This will send all related items in the analytics payload.

Then, use the ec:setAction command to specify that the action done on this data is to send the impression data:

coveoua('ec:setAction', 'impression');

Finally, use the send command to send the event to Coveo UA:

If Then

The impression view action and product information is added before the pageview event is sent

There’s no need to send the pageview event. The pageview event you previously configured on the page will contain the action and product information.

The user interaction didn’t open a new page

Manually send the impression view action with a generic event.

What's Next for Me?