Community Tip: JavaScript Implementation Roundup - Mixpanel
Blog Post

Community Tip: JavaScript Implementation Roundup

This Community Tip will walk you through implementing Mixpanel using the JavaScript library. This walkthrough will cover not just how to insert Mixpanel code into your website, but also how to decide what events and properties to track.

Get acquainted with Mixpanel

You heard from your developer friends that Mixpanel is awesome, and you want to see it for yourself. But where to begin? A great place is our Live Introductory Webinar. The Webinar is specially aimed toward new Mixpanel users and it broadly covers Mixpanel’s capabilities, how to think about your analytics, and how to get started with your own data tracking.

Plan your implementation: It starts and ends with your business goals

Mixpanel is a highly customizable data-tracking solution that gives you the power to decide what actions to track and how to track them. With flexibility and power comes great responsibility, and oftentimes it can be overwhelming to get started.

Ask yourself the following questions:

  1. What are our key business goals?
  2. What do we want our users to do to reach those business goals?
  3. How can we measure whether users are doing those actions?

The answer to these questions will help you determine what data to track via Mixpanel. Think about all the members of your team who will be using Mixpanel and what information they need in order to do their job.

Here is an example of how I might apply the process described above to my implementation. Let’s start with our questions:

What are our key business goals?

  • Let’s say we have a free music-playing site, and we make money when users listen to songs, because we play ads. Our ultimate business goal is to get users to play more and more songs.

What do we want our users to do to reach those business goals?

  • In order to listen to songs, users have to sign up and pick a playlist.

How can we measure whether users are doing those actions?

  • We know that it’s important whether users sign up, whether they pick playlists, and whether they play songs. So we could have one event for each of those actions.

Many Mixpanel users like to create an implementation spec to translate their business goals into specific events and properties. Specs also make it easy to keep track of how you are going to track each of your events and what properties go along with each event.

You can download an implementation spec sample here

Events and Properties

You should make sure to understand the distinction between events and properties. An event is any meaningful action within your site that you will track in order to gain valuable insight. Properties describe either an event or the user who performed an event. Properties are the building blocks of detailed reports, and taking advantage of properties will allow you get the most value out of your implementation.

Select event names that are simple, action-driven, and easy to understand. ‘Purchase’ is a better name than ‘MXP_1234_XYZ.’ As the project owner, you might understand what ‘MXP_1234_XYZ’ means, but not everyone in your team will have such an easy time.

Further, rather than including specifics in the event name itself, move all details into your properties. If you have an event ‘Registration’ with a property that indicates whether the user registered through Facebook, Google, or Twitter, your data will be easier to aggregate than if you have one event called ‘Facebook Registration,’ one called ‘Google Registration,’ and one called ‘Twitter Registration.’

At this point, you may be wondering what sorts of details you should store in your properties. When in doubt, bring it back to your business questions. What do you want to know about your users that will help you make better product and marketing decisions? A good place to start is to look at the list of properties that Mixpanel registers by default.

The default properties described above are added to every single event fired by your users. You can create your own properties that persist across events. Those are called super properties. Need examples of relevant super properties? This community tip has you covered!

From the function to the form

Now that your whole team has discussed and approved what data you want to track, it’s time to add your code. The following video show you how to add the Mixpanel snippet and the track calls that will capture specific events.

Identity Management

Every single event sent to Mixpanel through the JavaScript library has a distinct_id that helps Mixpanel keep track of unique users within your project. Click here to learn about the many vital uses of distinct_ids.

In the case of JavaScript, random distinct_id values are assigned to all users who land on your site by default. This allows Mixpanel to track the actions of users before they even register.

Furthermore, you have the option of assigning users new distinct_ids or mapping your own database ids or emails to the original user distinct_ids. Whether or not you should be using these methods will depend on the nature of your registration flow and data tracking implementation. The easiest way to familiarize yourself with Mixpanel’s identity management best practices is to watch the following video:

Tap into communal wisdom through our community tips

If you are at a loss on how to track a specific event or property, check out other posts on our blog! Are you interested in comparing the behavior of first-time users to that of returning users? There’s a post about that. Perhaps you want to know how to add parameters to a url in order to later register them as super properties. There’s also a post about that!

Take Action

Each of the sections above represents a key aspect of your initial Mixpanel JavaScript implementation.

What are my business goals? What do I want my users to do?
What events can I use to determine whether or not I’m reaching those goals?
What properties will add relevant dimensions to my event data?
Where in my code will I insert the specific calls to track my events?
Am I consistently tracking my users with the appropriate distinct_id values?

If you can answer those questions, then you will be well on your way toward a successful implementation!

Any other questions? Email us at to speak with someone smart, quickly.

Get the latest from Mixpanel
This field is required.