Examples
Klaviyo integration with SDK

3min
Sending Klevu Events to Klaviyo
For Klaviyo integration you need to build click event capturing and use Klaviyo libraries to send the data to Klaviyo. This example shows how to create integration similar to what TemplateJS implements.
Way the Klaviyo-Klevu TemplateJS integration works is that when user has searched something and then clicks a product then searched term and clicked product is sent to Klaviyo. For this to work we need to extract little bit more information about the product and search metadata for it to be easier to create rules in Klaviyo. For this we have implemented annotationsById() function to Result Object.
Here is generic pseudo code of how things should work in your code. 
JS
// first reference result object in your code somewhere. In state or context
let resultObject

// function to enable analytics for Klevu
let clickEvent

// then call basic search in your input
async function search() {
    const result = await KlevuFetch(search("hoodies", { id: "search" }))
    resultObject = result.queriesById("search")

    // its good idea to get Klevu analytical events at the same time
    clickEvent = result.queriesById("search").getSearchClickSendEvent()
}

// then in your click function
async function productClick(klevuProduct) {
    //annotations take productId from results and language which to use get annotations in 
    const annotations = await resultObject.annotationsById(klevuProduct.id, 'en')

    // here call the Klaviyo API JS with your custom event data
    // ...

    // Remember to send clickEvents to Klevu too!
    clickEvent(klevuProduct.id)
}
// first reference result object in your code somewhere. In state or context
let resultObject

// function to enable analytics for Klevu
let clickEvent

// then call basic search in your input
async function search() {
    const result = await KlevuFetch(search("hoodies", { id: "search" }))
    resultObject = result.queriesById("search")

    // its good idea to get Klevu analytical events at the same time
    clickEvent = result.queriesById("search").getSearchClickSendEvent()
}

// then in your click function
async function productClick(klevuProduct) {
    //annotations take productId from results and language which to use get annotations in 
    const annotations = await resultObject.annotationsById(klevuProduct.id, 'en')

    // here call the Klaviyo API JS with your custom event data
    // ...

    // Remember to send clickEvents to Klevu too!
    clickEvent(klevuProduct.id)
}
﻿
Now you can build a Klaviyo analytics event with this annotations data. Example of event that is used in TemplateJS can be found in vanillajs example in here.
Information on how to send event data to Klaviyo can be found from Klaviyo JavaScript API documentation.
Using Klaviyo for segmentation 
To enable the Klaviyo integration for segmentation in Klevu Recommendations using the SDK, set enableKlaviyoConnector to true in KlevuConfig.init.
JS
KlevuConfig.init({
  url: "https://eucs23v2.ksearchnet.com/cs/v2/search",
  apiKey: "klevu-160320037354512854",
  enableKlaviyoConnector: true, //To enable Klaviyo integration for segmentation in Recommendations
})
KlevuConfig.init({
  url: "https://eucs23v2.ksearchnet.com/cs/v2/search",
  apiKey: "klevu-160320037354512854",
  enableKlaviyoConnector: true, //To enable Klaviyo integration for segmentation in Recommendations
})
﻿
Setting enableKlaviyoConnector to true will make all the necessary internal configuration changes for Klevu Recommendations to work with Klaviyo segments.
You should consider using this feature with Data Protection settings if there is a need to meet any legal requirements. If Data Protection is enabled, then no user data will be stored unless the consent is given.
Check Data Protection﻿ for more information.
Updated 29 Apr 2024
Did this page help you?
Examples
JavaScript (vanilla) Examples