Tracking

To support advanced analytics and user engagement tracking, Koral provides a set of custom events that you can use to monitor how users interact with your visual search features. These events can be used to gather insights into user behavior, improve the search experience, and optimize product discovery.

Custom Events

The list of custom events that Koral supports includes:

Search frame open

This event is triggered when the search frame is opened. It can be used to track how often users initiate a search.

To track this event, you can use the following code snippet:

window.addEventListener('koral_open', (event: CustomEvent) => {
  // Your custom tracking logic here
});

Search frame close

This event is triggered when the search frame is closed. It can be used to track how often users actively closes the search frame.

To track this event, you can use the following code snippet:

window.addEventListener('koral_close', (event: CustomEvent) => {
  // Your custom tracking logic here
});

Click similar search

This event is triggered when a user clicks on the similar search icon. It can be used to track how often users engage with the similar search feature.

To track this event, you can use the following code snippet:

window.addEventListener('koral_similar_search', (event: CustomEvent) => {
  // Your custom tracking logic here
  console.log('koral_similar_search event received:', event.detail);
});

The event details contains the following properties:

• productId: the ID of the product that was clicked
• image: the URL of the image that was clicked
• filters: an array of filters applied to the search, if any

Click search result

This event is triggered when a user clicks on a search result. It can be used to track how often users engage with search results.

To track this event, you can use the following code snippet:

window.addEventListener('koral_product_click', (event: CustomEvent) => {
  // Your custom tracking logic here
  console.log('koral_product_click event received:', event.detail);
});

The event details contains the following properties:

• productId: the ID of the product that was clicked