JavaScript SDK

Track events from web browsers with the Mixpanel JavaScript SDK

Installation

The Mixpanel JavaScript SDK can be installed via CDN snippet or npm/yarn.

CDN Snippet

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>

Then initialize Mixpanel with your project token:

mixpanel.init("YOUR_PROJECT_TOKEN", {
  autocapture: true,
  track_pageview: true,
  record_sessions_percent: 100,
  record_heatmap_data: true
});

npm/yarn

The JavaScript library is named mixpanel-browser in npm/yarn to distinguish it from the server-side Node.js library.

Install the package:

npm

npm install --save mixpanel-browser

Import and initialize:

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.

Identify users when they sign in:

// 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: '[e-mail]',
  $name: 'John Doe'
});

set_once()

Set properties only if they don’t exist:

mixpanel.people.set_once({
  'First Login Date': new Date().toISOString()
});

increment()

Increment numeric properties:

mixpanel.people.increment('age', 1);
mixpanel.people.increment('logins', 1);

append()

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
});

Platform Considerations

• 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

• Full API Reference
• GitHub Repository
• Example Application