Integrate Kameleoon with Klaviyo

portrait de l'auteur Julie Trenque

Written by Julie Trenque

Updated on 07/01/2022

2 min

Beginner

Manage your integrations

Analytics

CDP/DMP

CMP

CMS

Developers

Others

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 “Tracking and Goals” step to configure Klaviyo as a tracking tool. 

In the “Other tracking tools” tab, click on “Klaviyo” to move the toggle to “ON”.

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

You need to create a new custom data.

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 } = let { siteCode } = 'YOUR_SITECODE';
                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 “Advanced settings” of the same custom data.

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 key.

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 :