Skip to main content

Setting up Mixpanel

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

Two types of integration are available:

  • Kameleoon uses Mixpanel’s native Experiments module, letting you analyze any campaign's impact via Kameleoon in the Mixpanel native interface for experiments.
  • You can also automatically export Mixpanel cohort data into Kameleoon, where it can be used for further segmentation to personalize customers' journeys.

You can set up both according to your needs.

Key benefits:

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

Send your Kameleoon campaigns events data to your Mixpanel dashboards​

With the Kameleoon/Mixpanel bridge, you can retrieve data from your Kameleoon personalizations and experiments (exposure events) on your Mixpanel platform.

Enable Mixpanel integration in Kameleoon​

To use Mixpanel, you must activate it in the Integrations page. To do this:

  1. Log in to the Kameleoon app.
  2. Click Admin > Integrations > Install the tool.
  3. Select the projects on which you want to configure Mixpanel.
  4. Click Validate.

You will then see an ON toggle on the right of the tool’s line, and the number of projects the tool is configured on.

Campaigns' exposure events will be sent to Mixpanel automatically.

note

If you need to change the behavior of our native bridge, you can create a custom analytics bridge and use the Mixpanel sample code on our Github repository.

Associate Mixpanel as reporting tool in a Kameleoon campaign​

You can associate Mixpanel with a campaign in the campaign creation page. Select it from the list of REPORTING TOOLS.

Kameleoon will automatically transmit the data (Experiment name and Variant name) to Mixpanel using the Mixpanel Experiment API.

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

Enable Kameleoon integration on Mixpanel​

You must activate the Kameleoon integration in your Mixpanel account to enable cohort synchronization. You can refer to this Mixpanel documentation.

note

You will need a Kameleoon API-key. Ask your Kameleoon Customer Success Manager for the key.

Only identified user profiles get exported to Kameleoon (no anonymous users). If you’re using Mixpanel's identity merge feature then, since Mixpanel’s distinct_id for a given user may change over time, we strongly recommend you set an additional user property $kameleoon_mapping_id that contains our Kameleoon Visitor code or "your internal user ID" if you use one of our SDKs. Mixpanel will automatically add the kameleoon_mapping_id in each cohort export they send to Kameleoon.

You can set the kameleoon_mapping_id by using the Mixpanel people.set method, right after the identify method is executed. Here is an example of code you can use with the Mixpanel JavaScript API:

mixpanel.people.set({
     '$kameleoon_mapping_id': Kameleoon.API.Visitor.code
 });

Mixpanel uses our Data API map endpoint to send the cohorts to Kameleoon.

Create a custom data to target Mixpanel cohorts in your experiments​

To target Mixpanel cohorts, you must set up custom data within Kameleoon to retrieve the cohort names for each user.

Name your custom data "Mixpanel cohorts" and choose the Custom JavaScript code acquisition method if you're running a classic web experiment, or Kameleoon SDK method if you're running a server-side experiment or using a feature flag.

The custom data should be set to the list of and strings types, and the scope may be set to Page, depending on the scope being defined in Mixpanel. When set to Page, data is re-evaluated on every page load if the user belongs to a certain cohort Mixpanel identifies.

External Segment Sync for web experiments​

If you use the $kameleoon_mapping_id property as explained in the previous section, use the code below in the custom data acquisition method:

Kameleoon.API.Data.retrieveDataFromRemoteSource(Kameleoon.API.Visitor.code, function (data) {
 if (data?.mixpanel_cohorts) {
 data.mixpanel_cohorts.map(function (segment) {
 if (segment?.mixpanel_cohort_id) {
 Kameleoon.API.Data.setCustomData("Mixpanel cohorts", segment.mixpanel_cohort_id);
 }
 });
 }
});
return { "value": null}

If you'd rather use Mixpanel's default distinct_id method to set your own user ID, use the code below:

if (!window.mixpanel?.get_distinct_id) return null;  
let id = mixpanel.get_distinct_id();  
Kameleoon.API.Data.retrieveDataFromRemoteSource(id, function (data) {  
 if (data?.mixpanel_cohorts) {  
 data.mixpanel_cohorts.map(function (segment) {  
 if (segment?.mixpanel_cohort_id) {  
 Kameleoon.API.Data.setCustomData("Mixpanel cohorts", segment.mixpanel_cohort_id);  
 }  
 });  
 }  
});  
return { "value": null}

External segment sync for server-side​

To use Mixpanel cohorts in server-side experiments or feature flags, you can consult the guidelines outlined in each SDK's documentation. For instance, if you're using the GO SDK, you can refer to its documentation for detailed instructions.

The GO SDK, like our other SDKs, employs the getRemoteData() method. This method fetches data stored by Mixpanel on our servers and make it accessible within your backend code.

Fetch Mixpanel cohort names in Kameleoon​

Activate the Save the values for the targeting condition associated with the custom data point option, and insert this snippet into the dedicated field. Replace the value "ADD_YOUR_PROJECT_ID_HERE" by your project sitecode.

var xhr = new XMLHttpRequest();
 xhr.open("GET", 'https://customers.kameleoon.com/mixpanel/cohorts/ADD_YOUR_PROJECT_ID_HERE', false);
 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 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.forEach(function (segment) {
             if (segment.id && segment.name !== 'undefined')
             {
                 mixPanelSegments.push({value: segment.id, label: segment.name});
             }
         });
     }
 }
 xhr.send();
 return mixPanelSegments;

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. A list of every cohort name from Mixpanel will be displayed. Selecting one or multiple Mixpanel cohort(s) will enable targeting in personalizations and experiments.