Web
You can use Mixpanel's JavaScript SDK to track events from your website or web application.
Step 1: Install the SDK
<!-- Paste this 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>Step 2: Track your first event
You'll need your Project Token for this step, which you can get here (opens in a new tab).
// Uncomment if you used npm or yarn in Step 1
//import mixpanel from 'mixpanel-browser';
mixpanel.init(<YOUR_TOKEN>, { debug: true, track_pageview: true, persistence: 'localStorage' });
// Set this to a unique identifier for the user performing the event.
mixpanel.identify(/* \"<USER_ID\"> */)
// Track an event. It can be anything, but in this example, we're tracking a Sign Up event.
mixpanel.track('Sign Up', {
'Signup Type': 'Referral'
})🎉 Congratulations, you've tracked your first event! You can see it in Mixpanel via the Events page (opens in a new tab). For more options, see our JavaScript reference.
You can also follow our video walkthrough here (opens in a new tab).
FAQ
Does Mixpanel automatically track page views?
Yes, if you pass track_pageview: true in the mixpanel.init() call, Mixpanel will automatically track a "Page View" event every time a new page is loaded. Learn more here.
Why aren't my events showing up in Mixpanel?
Make sure you've disabled ad blockers and your Do Not Track (DNT) browser settings are set to false when testing your JavaScript implementation. If the DNT setting is set to true, then Mixpanel won't collect information from that Mixpanel instance.
We recommend setting up a proxy server so that you don't lose events due to ad-blockers.
Does Mixpanel use third-party cookies?
No, our Mixpanel JavaScript SDK does not set or use any third-party cookies. If you wish to disable cookies entirely, you can set the disable_persistence option to true when initializing your Mixpanel JS instance. Note that disabling persistence will disable the use of super properties and anonymous -> identified user tracking.
What are the recommended configuration options?
We recommend using localStorage instead of cookies for persistence:
mixpanel.set_config({'persistence': 'localStorage'})This prevents getting a "Cookie Too Large" error and in general is a more reliable way to persist state on the browser.