Mixpanel
Mixpanel is the classic Analytics tool for event tracking, segmentation, and reporting. After sending Freshpaint data to Mixpanel, you'll be able to analyze the data and produce charts and graphs of your product data.
Text | Client-side | Server-side |
|---|---|---|
Web | ||
Mobile | ||
Server |
Follow these steps to set up the Mixpanel integration.
In Mixpanel, go to your Project Settings page and navigate to the Access Keys section to find your Project Token and API Secret:
Next, go to the Mixpanel configuration page in Freshpaint and click Configure for Credentials. Then, configure the app credentials by copying and pasting your Project Token and API Secret into Freshpaint:
Mixpanel is now ready to be used as an event destination.
It is important to first identify your users so Mixpanel knows who they are and associates events to their user record in Mixpanel:
Here is an example of an identify call:
freshpaint.identify("[email protected]", {
/* user properties */
"email": "[email protected]",
"name": "Ada Lovelace",
"role": "mathematician",
"specialty": "computer languages"
});
When you call freshpaint.identify, Freshpaint will create or update a user profile in Mixpanel by calling Mixpanel's identify method. Any user properties you pass in will be forwarded directly to Mixpanel.
By default, any properties set in an Identify call will be passed on as Super Properties in the Mixpanel cookie and in subsequent event properties while using client-side connection mode.
In client-side connection mode, you may want to enable the Use Freshpaint ID for Device ID option in order to make the Mixpanel javascript web SDK use the Freshpaint device ID. This improves data consistency. You can read more about that here.
When the Merge Anonymous option is enabled, Freshpaint will send a server-side identify call to Mixpanel using their Create Identify endpoint. To set an anonymous id with an identify call, you can specify a value for the
$device_id property.When you call freshpaint.identify, Freshpaint will create or update a user profile in Mixpanel by sending a call to Mixpanel's identity endpoint at: https://api.mixpanel.com/track#create-identity. To set an anonymous id with an identify call, you can specify a value for the
$device_id property.Once the Mixpanel integration is enabled, you can now set it as an event destination:
Events sent from Freshpaint to Mixpanel will show up as standard Mixpanel events. From there you can use your events in any of the Mixpanel reports.
As Freshpaint's client-side javascript library loads Mixpanel's javascript library in the background, any UTM parameters captured as built-in event properties are passed into Mixpanel as UTM properties.
When using server-side connection mode, UTM parameters will need to be explicitly passed in as an event property, for example:
freshpaint.track("Test Event", {
"UTM Campaign": "testing",
"UTM Source": "testing",
"UTM Medium": "web",
"UTM Term": "testing",
"UTM Content": "testing"
});
If you plan on using Mixpanel's Group Analytics feature, you should set up a group key in Mixpanel by clicking Add Group Key and entering in the name of the property you want to use (e.g. company_name). Then, copy the name of the group key you are using into Freshpaint as the Group Identifier Trait.
Enable this option if your application has multiple subdomains and you want the Mixpanel cookie to persist across those subdomains. This allows the user to be tracked across subdomains. This setting is not enabled by default.
Use Local Storage instead of a Cookie to persist Mixpanel SDK state. Local Storage can support more User Property data than a cookie. This setting is not enabled by default.
Please note that users cannot be tracked across Subdomains when using Local Storage.
When enabled, Freshpaint will send your events to Mixpanel's EU endpoint. In Mixpanel, be sure to enable Data Residency under Project Settings > Data Residency. Make sure you've followed Mixpanel's help article to set up EU data. This setting is not enabled by default.
Enabling this option will utilize a secure cookie that will only be transmitted over HTTPS. This setting is not enabled by default.
This will send a Loaded a Page event to Mixpanel for all
page() method calls. The Page call is transformed to Mixpanel events. This setting is not enabled by default.This option only applies to Freshpaint's client-side SDKs and do not affect events originating from other sources such as React Native, Android, iOS, or when server-side connection mode is enabled.
When enabled, Mixpanel will track all events, regardless of if the browser has "Do Not Track" enabled. Learn More About DNT and how it relates to GDPR and CCPA policies. This setting is enabled by default.
This setting merges anonymous users with identified users when a server-side identify call is performed. This setting is enabled by default.
Enable this setting to make the Mixpanel javascript web SDK use the Freshpaint device ID. This improves data consistency - you'll see the same device id for data streamed from your customers' web browsers as for data backfilled from Freshpaint's servers. This setting is not enabled by default.
Changing this setting for an existing project will break historical data, so only enable this if you're setting up a new Mixpanel project.
Enable this setting to apply a default set of transformations from Freshpaint User Properties to Mixpanel Properties when making Identify call's.
Freshpaint User Property | Mixpanel Property |
|---|---|
email | $email |
first_name | $first_name |
last_name | $last_name |
phone_number | $phone |
state | $region |
city | $city |
Changing this setting will break historical data, so only enable this if you're setting up a new Mixpanel project.
Set up transformations to modify your data before it's sent to your destination. Read more about transformations here.
Events user's web browser will be sent directly to Mixpanel. Events from other sources, including mobile and server, will be sent first to Freshpaint's servers and then on to Mixpanel.
When available, geo-location data is appended to an identified user's record in Mixpanel.
All events will be sent to Mixpanel from Freshpaint's servers. Your website will not send data directly to Mixpanel. Instead, your website and all other sources will send data to Freshpaint, which is translated then sent to Mixpanel. As mentioned above, sources such as React Native, Android, and iOS send data server-side.
By default, Freshpaint will provide the IP address of the browser to Mixpanel. You can also provide a custom IP address by providing a
$ip property.Geo location information is derived from the IP address of the original agent, the web SDK, or embedded SDK. That IP address is then passed through to Mixpanel where it is resolved to a geo location.
When you call freshpaint.group, Freshpaint will create or update a group profile in Mixpanel. Unlike other destinations, Mixpanel supports multiple group keys. That means one user can belong to multiple groups and the group a user is counted towards changes depending on which group key you are using. As an example, for the
company_name group key, a user could belong to the group Google, while at the same time for the department_name group key, the user belongs to Software Engineering. Due to Mixpanel's support of multiple groups per user, there are some slight differences when using Mixpanel group compared to other destinations.Before using Mixpanel Group Analytics, you will need to configure the Group Identifier Trait in Freshpaint. The setting can be found in the configuration options for the Mixpanel integration.
The Group Identifier Trait is the name of the group key you want to use. When calling
freshpaint.group you will need to pass in the group key and the corresponding group id as group properties. As an example, if you are using company_name as your Group Identifier Trait, you'll want to call freshpaint.group like so:freshpaint.group("Google", {
"company_name": "Google"
});
Additionally, for events to be attributed to the right group, you'll need to pass in the group key as an event property with the group id as the value. This can be done by using freshpaint.addEventProperties. For this reason, we recommend after calling
freshpaint.group, you also make a call to freshpaint.addEventProperties with the group key and group id like so:freshpaint.addEventProperties({
"company_name": "Google",
"department_name": "Software Engineering"
});
This will automatically attach the group key and group id to all events going forward.
Last modified 1mo ago