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):
- Kameleoon uses Mixpanel’s native Experiments module to enable you to analyze the impact of any campaign run 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.
Key benefits
- Observe how your Kameleoon campaigns impact the way in which users interact with your websites
- Easily identify and replicate effective experiments 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 events data to your Mixpanel dashboards
Thanks to the Kameleoon/Mixpanel bridge, you can retrieve data from your Kameleoon personalizations and experiments (exposure events) 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 App. Then use the left-hand menu, click on Administrate 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:
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 Mixpanel.
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.
Campaigns exposure events will be sent to Mixpanel automatically.
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 Mixpanel sample code you can take from our Github repository.
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 Mixpanel Experiment API.
Target visitors on Kameleoon based on their belonging to a Mixpanel cohort
Enable Kameleoon integration on Mixpanel
The first step is to activate the Kameleoon integration in your Mixpanel account to enable cohort synchronization. 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.
You will see that only identified user profiles get exported to Kameleoon (ie. no anonymous users). If you’re using Mixpanel’s identity merge feature and as Mixpanel’s distinct_id for a given user may change over time as the user’s Canonical ID shifts, 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 exports they will send to Kameleoon.
You can set it 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
});
Underneath, Mixpanel uses our Data API map endpoint to send the cohorts to Kameleoon.
Create a custom data to target Mixpanel cohorts in your experiments
In order to be able to target Mixpanel cohorts, you will need to set up a custom data within Kameleoon to retrieve the cohort names for each single user.
Please name your custom data “Mixpanel cohorts” and choose the acquisition method Custom JavaScript code if you run a classic web experiment or Kameleoon SDK method if you run a server-side experiment or use a feature flag.
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 re-evaluated on every page load, if the user is within a certain cohort being identified by Mixpanel.
External Segment Sync for web experiments
If you use the $kameleoon_mapping_id property as explained in the previous section, please 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 rather use Mixpanel default distinct_id method to set your own user ID, please 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 the documentation for each respective SDK. 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, which is accessible across all our SDKs. This method enables you to fetch data stored by Mixpanel on our servers and make it accessible within your backend code.
Fetch Mixpanel cohort names in Kameleoon
In the last step of custom data creation, 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, which will then show a list of every cohort name from Mixpanel. Selecting one or multiple Mixpanel cohort(s) will enable targeting in personalizations and experiments.
