Setting up Mixpanel

3

min

quiz

Mixpanel is a leading user-behavior analysis solution for product teams.

Two types of integration are available (you can set up both, depending on your needs):

Key benefits

  • Observe how your Kameleoon campaigns impact the way users interact with your websites
  • Easily identify and replicate effective A/B tests and personalizations
  • Focus on your segments’ most relevant behavioral characteristics and more quickly find new insights to advance your testing roadmap
  • Gain access to cohort data to personalize visitors’ web experience and enhance the performance of campaigns by using Kameleoon

Send your Kameleoon campaigns data to your Mixpanel dashboards

Thanks to the Kameleoon/Mixpanel bridge, you can retrieve data from your Kameleoon personalizations and A/B tests on your Mixpanel platform.

Enable Mixpanel integration on Kameleoon

To use Mixpanel, you must activate it on the Integrations page.

Log in to your Kameleoon back-office. Then use the left side menu, click on “Configuration” and then on “Integrations”.

For more information on this page, please read our dedicated article.

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

With a click on “Install the tool”, you will be able to select the websites on which you want to activate it, so that information can be correctly reported to Mixpanel.

Click on the “Validate” button to add Mixpanel to your reporting tools.

Associate Mixpanel as reporting tool in a Kameleoon campaign

On the page for creating a new campaign, once Mixpanel is activated on the Integrations page, you can select it as a reporting tool for your campaign.

Kameleoon will automatically transmit the data (Experiment name and Variant name) to Mixpanel, by using the Experiment API of Mixpanel. To know more on how to use Kameleoon’s experiment data to analyse the impact of each variant on your KPIs, please read this documentation.

Target visitors on Kameleoon based on their belonging to a Mixpanel cohort

Enable Kameleoon integration on Mixpanel

The first step is to activate Kameleoon in Mixpanel. You can refer to this Mixpanel documentation.

Please note that you will need a Kameleoon API-key, ask your Kameleoon Customer Success Manager for it.

Create a custom data to exploit Mixpanel data

In order to be able to use the data from Mixpanel, you will need to set up a custom data within Kameleoon to read the cohort names for each single user. With the deep custom data bridge, it is also possible to receive the cohort names and IDs, to create individual segments in Kameleoon based on the cohort names from Mixpanel.

Please use the “Custom Javascript Code” acquisition method. This code should be placed in the custom code section of the custom data.

Kameleoon.API.Core.runWhenConditionTrue(function(){

return typeof mixpanel !== "undefined";

}, function(){

Kameleoon.API.Core.runWhenConditionTrue(function(){

return typeof mixpanel.get_distinct_id === "function";

}, function(){

let id = mixpanel.get_distinct_id();

Kameleoon.API.Data.retrieveDataFromRemoteSource(id, function(data) {
 if(data && data.mixpanel_cohorts){
 data.mixpanel_cohorts.map(function (segment) {
 if (segment.mixpanel_cohort_id !== 'undefined') {

Kameleoon.API.Data.setCustomData("Mixpanel",
segment.mixpanel_cohort_id);

}
 });
 }
 });
 });
});

The custom data should be set to the “list of” and “strings” types, the scope may be set to Page, depending on the scope being defined in Mixpanel; when being set to page it is reevaluated on every page load, if the user is within a certain cohort being identified by Mixpanel.

 

Fetch Mixpanel cohort names in Kameleoon

The cohort names are being made available by Mixpanel via a REST-API, which will need your credentials. The credentials are a BASE64 encoded string of the API-Key being provided in the Mixpanel Backend. Please talk to your Mixpanel Customer Success Manager to get this information and replace it within this snippet:

var xhr = new XMLHttpRequest();

xhr.open("POST", 'https://mixpanel.com/api/2.0/cohorts/list', false);

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.setRequestHeader('Authorization', 'Basic ADDYOURCREDENTIALSHERE')

var mixPanelSegments = [];

xhr.onreadystatechange = function() { // Call a function when the state changes.

   if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {

     var mixpanel = JSON.parse(xhr.response);

     mixpanel.map(function (segment) {

       if (segment.id && segment.name !== 'undefined') {

         mixPanelSegments.push({value: segment.id, label: segment.name});

       }

     });

   }

}

xhr.send();

return mixPanelSegments;

Then insert this snippet into the “Advanced settings” of the same custom data.

Use Mixpanel cohort names in a Kameleoon segment

After the custom data for the Mixpanel cohort names 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 cohort name from Mixpanel. Selecting one or multiple Mixpanel cohort(s) will enable a targeting in personalizations and A/B tests.