Klaviyo integration with SDK

2min
For Klaviyo integration you need to build click event capturing and use Klaviyo libraries to send the data to Klaviyo. This example shows how 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.
Updated 03 Mar 2023
Did this page help you?
Yes
Examples
JavaScript (vanilla) Examples
Docs powered by archbee