Installation
The Mixpanel JavaScript SDK can be installed via CDN snippet or npm/yarn.
Paste this code snippet right before your closing </head> tag:<script type="text/javascript">
(function(f,b){if(!b.__SV){var e,g,i,h;window.mixpanel=b;b._i=[];b.init=function(e,f,c){function g(a,d){var b=d.split(".");2==b.length&&((a=a[b[0]]),(d=b[1]));a[d]=function(){a.push([d].concat(Array.prototype.slice.call(arguments,0)));};}var a=b;"undefined"!==typeof c?a=b[c]=[]:c="mixpanel";a.people=a.people||[];a.toString=function(a){var d="mixpanel";"mixpanel"!==c&&(d+="."+c);a||(d+=" (stub)");return d;};a.people.toString=function(){return a.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");for(h=0;h<i.length;h++)g(a,i[h]);var j="set set_once union unset remove delete".split(" ");a.get_group=function(){function b(c){d[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));a.push([e,call2]);};}for(var d={},e=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<j.length;c++)b(j[c]);return d;};b._i.push([e,f,c])};b.__SV=1.2;e=f.createElement("script");e.type="text/javascript";e.async=!0;e.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===f.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";g=f.getElementsByTagName("script")[0];g.parentNode.insertBefore(e,g)}})(document,window.mixpanel||[]);
</script>
mixpanel.init("YOUR_PROJECT_TOKEN", {
autocapture: true,
track_pageview: true,
record_sessions_percent: 100,
record_heatmap_data: true
});
The JavaScript library is named mixpanel-browser in npm/yarn to distinguish it from the server-side Node.js library.
npm install --save mixpanel-browser
import mixpanel from 'mixpanel-browser';
mixpanel.init("YOUR_PROJECT_TOKEN", {
autocapture: true,
track_pageview: true,
record_sessions_percent: 100,
record_heatmap_data: true
});
Track Events
Use mixpanel.track() to send events:
// Track a simple event
mixpanel.track("Played song", {
genre: "hip-hop"
});
Timing Events
Track how long an action takes:
// Start timer
mixpanel.time_event('Image Upload');
// 20 seconds later...
mixpanel.track('Image Upload');
// Duration property is automatically set to 20
Identify Users
Do not call identify() for anonymous visitors.
// User signs in
mixpanel.track('sign in');
// Identify the user
mixpanel.identify('12345');
Reset on Logout
Clear user data when they log out:
mixpanel.track('log out');
mixpanel.reset();
User Profiles
Set profile properties:
mixpanel.identify('12345');
mixpanel.people.set({
plan: 'Premium',
$email: '[email protected]',
$name: 'John Doe'
});
set_once()
increment()
append()
Set properties only if they don’t exist:mixpanel.people.set_once({
'First Login Date': new Date().toISOString()
});
Increment numeric properties:mixpanel.people.increment('age', 1);
mixpanel.people.increment('logins', 1);
Append to list properties:mixpanel.people.append('transactions', {
amount: 50,
item: 'Premium Subscription'
});
Super Properties
Register global properties included on all events:
mixpanel.register({
'source': 'web app',
'version': '2.1.0'
});
// Use register_once to avoid overwriting
mixpanel.register_once({
'First Visit': new Date().toISOString()
});
Group Analytics
Assign users to groups:
// Set user's company
mixpanel.set_group('company', 'Acme Inc');
// Events will include company: ["Acme Inc"]
mixpanel.track('some_event');
// Set group properties
mixpanel.get_group('company', 'Acme Inc').set({
name: 'Acme Inc',
plan: 'Enterprise',
employees: 500
});
Privacy Controls
Opt Out of Tracking
// Opt out
mixpanel.opt_out_tracking();
// Opt in
mixpanel.opt_in_tracking();
// Initialize with opt-out by default
mixpanel.init('YOUR_PROJECT_TOKEN', {
opt_out_tracking_by_default: true
});
EU Data Residency
mixpanel.init('YOUR_PROJECT_TOKEN', {
api_host: 'https://api-eu.mixpanel.com'
});
Disable Geolocation
mixpanel.init('YOUR_PROJECT_TOKEN', {
ip: false
});
Debug Mode
mixpanel.init('YOUR_PROJECT_TOKEN', {
debug: true
});
- Events are sent over HTTPS
- Data is batched and sent every 60 seconds or on page unload
- Cookies persist for 365 days by default
- Works across subdomains by default
- Session Replay requires additional configuration
Resources