Guide
Events (analytics)

6min
Klevu collects and processes user interaction data through machine learning to drive search, category, and recommendation results. 
There are 4 types of events available in the Frontend SDK:
Result Object Events
Event handler functions returned by search requests made through KlevuFetch.
Search Modifier Events
Events that are submitted when searches are being made within KlevuFetch.
DOM Events
Events that are fired by the Frontend SDK to trigger your event handler code.
Custom Events
Low level interface to send your events to Klevu
In typical application you should use Result Object events to pass data to Klevu, Search Modifier Events to send information about user views and listen DOM events for changes made by SDK. Lastly if you are not using Shopify, Magento or BigCommerce connectors you need to pass checkout event to Klevu.
Result Object Events
View the Result Object﻿ page to learn more about Result Object click events.  It is the easiest way to implement data passing to Klevu.
Search Modifier Events
Result Object has events for sending click information to Klevu. On top of this information Klevu requires view events. These events should be sent when user views search result, merchendising page or recommendation banner. 
Typically requests should be implemented to all KlevuFetch calls. Only exception is that when implementing "Quicksearch" bar (a search bar on top of page that shows results right away) it should not  send these events. It should be sent only when user clicks into search results page and this is done by the getSearchClickSendEvent()   helper in result object. 
﻿sendSearchEvent(): Modifier that should be used on KlevuFetch on search result page.
﻿sendMerchendisingViewEvent(): Modifier that should be sent when merchendising page is displayed. 
﻿sendRecommendationViewEvent(): Modifer that should be sent with recommendation request like "kmcRecommendation" or "similarProducts"
DOM Events
SDK Core sends a DOM events that any browser library could listen and act on the events. All events are attached to document. KlevuDomEvents enumeration is exposed from the library and it's quite simple to listen. For example:

JS
TypeScript
import { KlevuDomEvents } from "@klevu/core"

// Function to run when filter selection is updated
const handleFilterUpdate = () => {
  console.log("Filter updated")
}

// Attach event listener
document.addEventListener(
  KlevuDomEvents.FilterSelectionUpdate,
  handleFilterUpdate
)

// Don't forget remove event listener in your component destructor
document.removeEventListener(handleFilterUpdate)
import { KlevuDomEvents } from "@klevu/core"

// Function to run when filter selection is updated
const handleFilterUpdate = () => {
  console.log("Filter updated")
}

// Attach event listener
document.addEventListener(
  KlevuDomEvents.FilterSelectionUpdate,
  handleFilterUpdate
)

// Don't forget remove event listener in your component destructor
document.removeEventListener(handleFilterUpdate)
﻿
Global custom document events that @klevu/core sends
Event Type
Description
LastSearchUpdate
When list of last searched terms update
FilterSelectionUpdate
When filter manager selection has changed
ClickEventSent
When any click event has been fired on the page
Custom Events
KlevuEvents class is low level solution to pass events to Klevu backend.
Custom events in the Klevu Headless SDK represent events that are not tied to the Result Object returned by a call to KlevuFetch or dispatched via DOM Events. 
These events include:
Search done
Search product click
Merchendising view
Merchendising product click
Recommendation view
Recommendation product click
Buy/Purchase
﻿
Event Type	Description
LastSearchUpdate	When list of last searched terms update
FilterSelectionUpdate	When filter manager selection has changed
ClickEventSent	When any click event has been fired on the page
Updated 30 Oct 2023
Did this page help you?
Modifier Functions
Result Object