---
title: Capture click events (Event Protocol)
slug: o1n92447
canonical_url: https://docs.coveo.com/en/o1n92447/
collection: coveo-for-commerce
source_format: adoc
---
# Capture click events (Event Protocol)

This article explains how to capture click events and send the information to [Coveo Analytics](https://docs.coveo.com/en/182/).

## When to capture a click event

A click event should be captured when a [visitor](https://docs.coveo.com/en/nbub9475/) clicks a product rendered using Coveo.
For example, results displayed on a search results page, [product listing page (PLP)](https://docs.coveo.com/en/m1sf3187/), a recommendations carousel, or a [search-as-you-type](https://docs.coveo.com/en/2068/) search box.
Tracking click events is a requirement for [Coveo Machine Learning (Coveo ML)](https://docs.coveo.com/en/188/) and [Coveo Analytics reporting](https://docs.coveo.com/en/266/).

## Click events and attribution

Coveo [attributes](https://docs.coveo.com/en/m7l98577/) transactions to [product discovery solutions](https://docs.coveo.com/en/o9cf0524/) by tracking [touchpoints](https://docs.coveo.com/en/o6ha0421/) along the user journey.
In a Coveo-powered commerce implementation, click events are the main [touchpoints](https://docs.coveo.com/en/o6ha0421/) used for [attribution](https://docs.coveo.com/en/m7l98577/).

Cart events don't count towards [attribution](https://docs.coveo.com/en/m7l98577/).
If your commerce implementation lets users modify the cart directly from the search results page, [product listing pages (PLPs)](https://docs.coveo.com/en/m1sf3187/), or [recommendation slots](https://docs.coveo.com/en/o9b80563/), you must [send an additional click event](#send-an-additional-click-event) along with the cart event.
This lets Coveo [attribute](https://docs.coveo.com/en/m7l98577/) transactions to the correct [solutions](https://docs.coveo.com/en/o9cf0524/).
You must send click events to track [attribution](https://docs.coveo.com/en/m7l98577/) on the [Coveo for Commerce Advanced Reports](https://docs.coveo.com/en/lbtf7260/).

For more information, see [Attribution at Coveo](https://docs.coveo.com/en/m1ae0440/).

**Example**

A user performs a query on a Coveo-powered commerce site.
They click a product to open its [product detail page (PDP)](https://docs.coveo.com/en/n8ad7392/), but they don't make a purchase and navigate away from the site.
Coveo tracks this [touchpoint](https://docs.coveo.com/en/o6ha0421/) as part of the user's journey.

Later, they revisit the site and see the same product in a [recommendation slot](https://docs.coveo.com/en/o9b80563/).
They click the product to open its [product detail page (PDP)](https://docs.coveo.com/en/n8ad7392/), creating another [touchpoint](https://docs.coveo.com/en/o6ha0421/) tracked by Coveo.
This time, the user adds the product to their cart and completes the purchase.
This product is [attributed](https://docs.coveo.com/en/m7l98577/) to the recommendation [solution](https://docs.coveo.com/en/o9cf0524/).

## How to capture a click event

Capturing the event depends on your implementation approach.
If you're using Headless to build your commerce interfaces, you can capture the event using the Headless controllers.
Otherwise, you can use the Relay library to capture the event.

[%header,cols="3*"]
|===
2+|Implementation approach
|Tracking approach

.3+|[Headless library](https://docs.coveo.com/en/lcdf0493/)
|[Client-side rendering](https://docs.coveo.com/en/o6r70022/)
|[Displaying products (CSR)](https://docs.coveo.com/en/o8ce0239/)

|[Server-side rendering](https://docs.coveo.com/en/obif0156/)
|[Displaying products (SSR)](https://docs.coveo.com/en/oc685393/)

|[Shopify Hydrogen](https://docs.coveo.com/en/p1oe2163/)
|[Displaying products (Shopify Hydrogen)](https://docs.coveo.com/en/p24a0093/)

2+|[Atomic](https://docs.coveo.com/en/lcdf0264/)
|[Automatically done by Atomic for Commerce components](https://docs.coveo.com/en/p9499444#tracking-click-events)

2+|[Relay library](https://docs.coveo.com/en/o9je0322/)
|[Capture a click event using Relay](#capture-a-click-event-using-relay)

|===

### Capture a click event using Relay

If you're using the [Relay library](https://docs.coveo.com/en/o1n90002/) directly, when a user clicks a product, you can run the following code to capture the click event and send the information to Coveo UA.

```js
const relay = createRelay({...}); <1>
relay.emit('ec.productClick', { <2>
    currency: 'USD', <3>
    position: 1,
    responseId: '35009a79-1a05-49d7-b876-2b884d0f825b',
    product: {
        productId: 'SP03929_00014',
        name: 'Blue Bottle',
        price: 16,
    },
});
```
<1> [Initialize a Relay instance](https://docs.coveo.com/en/o1n90002/).
<2> Use the `emit` function to send an event with Relay, specifying the event name.
For example, the value is `ec.productClick` since it's tracking a click event.
<3> Include the necessary event data, as outlined in the [reference documentation](https://docs.coveo.com/en/n9da0377#ec.productclick).

For a detailed description of the functions offered by the library, see the [Relay documentation](https://docs.coveo.com/en/relay/latest/usage/).
> **Note**
>
> When sending events with Relay, you don't need to include the `meta` object mentioned in the Event Protocol Reference documentation, as it's automatically added by the library.

## Validating the click event

It's important to verify that your event is valid and contains the correct payload.
Relay seamlessly integrates with _Coveo Explorer_, which can be used for event validation.

For more details on using _Coveo Explorer_ to validate events, see [Data validation](https://docs.coveo.com/en/o2170365#validating-single-events).