How to track your first event on Mixpanel

Log into your Mixpanel account and navigate to Project Settings by clicking the gear icon in the top right. Copy your Project Token from the overview page - you'll need this to initialize the Mixpanel library in your code.

For web applications, add the Mixpanel JavaScript snippet to your HTML head section:

<script type="text/javascript">
(function(c,a){if(!a.__SV){var b,d,h,e;window.mixpanel=a;a._i=[];a.init=function(b,c,f){function d(a,b){var c=b.split(".");2==c.length&&(a=a[c[0]],b=c[1]);a[b]=function(){a.push([b].concat(Array.prototype.slice.call(arguments,0)))};}var g=a;"undefined"!==typeof f?g=a[f]=[]:f="mixpanel";g.people=g.people||[];g.toString=function(a){var b="mixpanel";"mixpanel"!==f&&(b+="."+f);a||(b+=" (stub)");return b};g.people.toString=function(){return g.toString(1)+".people (stub)"};h="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(e=0;e<h.length;e++)d(g,h[e]);var j="set set_once union unset remove delete".split(" ");g.get_group=function(){function a(c){b[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));g.push([e,call2])}}for(var b={},c=0;c<j.length;c++)a(j[c]);return b};a._i.push([b,c,f])};a.__SV=1.2;}})(document,window.mixpanel||[]);

For npm-based projects, install via: npm install mixpanel-browser

Add the initialization code after including the Mixpanel library:

mixpanel.init('YOUR_PROJECT_TOKEN', {
  debug: true,
  track_pageview: true,
  persistence: 'localStorage'
});

Replace YOUR_PROJECT_TOKEN with the token you copied from step 1. Set debug: true to see tracking events in your browser console during development.

Use the mixpanel.track() function to send your first event. Add this code where you want to track user actions:

mixpanel.track('Button Clicked', {
  'button_name': 'Sign Up',
  'page': 'Homepage',
  'user_type': 'visitor'
});

The first parameter is the event name, and the second parameter is an object containing event properties with additional context.

Open your browser's Developer Console (F12) and perform the action that should trigger your event. With debug mode enabled, you should see a message like Mixpanel track: Button Clicked in the console. You can also check the Network tab for HTTP requests to api.mixpanel.com.

Go to your Mixpanel dashboard and click on Events in the left sidebar. Select Insights and you should see your tracked event listed in the event dropdown. Click on your event name to view the data and properties you sent.

To track events for specific users, call mixpanel.identify() when a user logs in or signs up:

mixpanel.identify('user123');
mixpanel.people.set({
  '$email': 'user@example.com',
  '$name': 'John Doe',
  'plan': 'premium'
});

This associates future events with the identified user and enables user profile tracking.