website logo
Product FeedCommunity Forum
API Docs
Template JS
Headless SDK
Navigate through spaces
⌘K
Introduction
Quickstart
Guide
Query Functions
Modifier Functions
Events (analytics)
Result Object
Filter Manager
Request caching
SSR result packing and hydration
Klevu Merchant Center Settings
Examples
Klaviyo integration with SDK
JavaScript (vanilla) Examples
React Examples
Vue Examples
Contributions, requests & issues
Reference
Docs powered by archbee 

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)
}


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
No
PREVIOUS
Examples
NEXT
JavaScript (vanilla) Examples
Docs powered by archbee