Integrate Kameleoon with Klaviyo

Written by Julie Trenque

Updated on 03/12/2024

2 min

Beginner

Manage your integrations

Analytics

Automation

CDP

CMP

CMS/CRM

Data Warehouses

Developers

Was this content useful?

Klaviyo is a marketing automation platform that automates sms and email marketing to help businesses acquire, retain and grow their customers.

Klaviyo stores all of your customer data, then allows you to build experiences across email and owned channels and measure the results in revenue — not just opens or clicks.

Key benefits

Send Kameleoon’s campaigns events data to Klaviyo in order to use them in segments and/or mailing lists.

Activate Klaviyo on Kameleoon

The first step is to enable Klaviyo.

Log in to your Kameleoon App, click on Admin and then Integrations in the sidebar.

For more information on this page, see our article about it.

By default, the tool is not installed. This is signaled by this icon:

By clicking on Install the tool, you will be able to select the projects on which you want to activate it, so that information can be correctly reported to Klaviyo.

Once you have configured the tool, click on Validate in the bottom-right corner: the configuration panel will close. You will then see an ON toggle to the right of the tool’s logo, as well as the number of projects the tool is configured on.

The data will be automatically pushed to Klaviyo if this is installed on your pages.

Please note that if you need to slightly change the behavior of our native bridge, you can create a custom analytics bridge and use our Klaviyo sample code you can take from our Github repository.

Associate Klaviyo with a Kameleoon campaign

In the Graphic/Code editor

When finalizing your experiment, click the Integrations step to configure Klaviyo as a tracking tool. 

Select Klaviyo.

Klaviyo will be mentioned in the summary pop-in before going live. Kameleoon will automatically transmit the data to Klaviyo and you will be able to view your results directly in the tool.

On the personalization creation page

In the same way as A/B testing, you can select Klaviyo among the reporting tools for a personalization.

On the results page

Once Klaviyo is set as a reporting tool for an experiment, you can select (or unselect) it via the Kameleoon results page. To do this, click on Reporting Tools in the panel on the right to open the corresponding menu.

The reporting tools associated with the experiment are displayed. Click Edit to edit this selection.

You can then select or unselect Klaviyo. Then click on Validate and continue to finalize or update your campaign.

Fetch Klaviyo segment data in Kameleoon

First you need to create a Private API Key for Kameleoon and provide it to your Kameleoon CSM/TAM. Here are Klaviyo’s guidelines for creating a Private API Key

Then you need to create a new custom data in Kameleoon.

Use the Custom Javascript Code acquisition method. This code should be placed in the custom code section of the custom data:

          if (window.localStorage.hasOwnProperty('_ply_visitor')) {
                 let { email } = JSON.parse(window.localStorage.getItem('_ply_visitor'));
                 let { siteCode } = 'q8qxwhag8x';
                 const xhr = new XMLHttpRequest();
                 xhr.onreadystatechange = function () {
                     if (this.readyState === 4) {
                         const k_response = JSON.parse(xhr.response).split(/;/g);
                         k_response.forEach((element) => {
                             if (element !== '') Kameleoon.API.Data.setCustomData('KlaviyoSegment', element);
                         });
                     }
                 };
                 xhr.open('GET', https://customers.kameleoon.com/kameleoon/klaviyoSegment/?sitecode=${siteCode}&id=${email}, false);
                 xhr.send();
             }
             return;
   

Please replace the variable “siteCode” by your Kameleoon project sitecode key.

In this example the information such as the customer’s email is in the localStorage. We will retrieve the email to make a call on our Webservice.

Optionally, you can insert this snippet into the Save the values for the targeting condition associated with the custom data point of the same custom data (last step).

const segmentKlaviyoList = [];
            const xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (this.readyState === 4) {
                    JSON.parse(xhr.response)
                        .forEach(element => {
                            segmentKlaviyoList.push({ value: element.list_name, label: element.list_name });
                        });
                }
            };
            xhr.open('GET', `https://customers.kameleoon.com/kameleoon/klaviyoSegment/list?sitecode=YOUR_SITECODE`, false);
            xhr.send();
            return segmentKlaviyoList;

Please replace “YOUR_SITECODE” by your Kameleoon project siteCode.

In this example, we will get the list of segments to create a drop-down menu.

Use a Klaviyo segment in a Kameleoon segment

After the custom data for the Klaviyo segments has been set up, you can build segments within the Kameleoon segment builder, by choosing the custom data and selecting is among the values, which will then show a list of every segment from Klaviyo. Selecting one or multiple Klaviyo segments will enable a targeting in personalizations and experiments.

External Segment Sync for Server-side

If you would like to use Klaviyo segment data with one of our SDKs, you will need to follow the guidelines provided in each SDK documentation and use the method retrievedatafromremotesource.

  • In this article :