Set up Your Tracking

The following article will provide an overview of the JavaScript library installation process, event tracking, and profile creation. Although this article specifically addresses JavaScript implementation, this guide can be used for all Mixpanel implementations, as the general process is similar across platforms. Mixpanel’s developer documentation contains the specific information for installing Mixpanel based on platform.

Start Your Mixpanel Journey

This article is part 2 of 5 of Mixpanel's ‘Start Your Journey’. Click the link to view the previous article covering planning a Mixpanel implementation.

Install the Mixpanel Library

Obtaining the Project Token

Mixpanel connects an application or website with its corresponding project through the use of a project token. This token is a unique string that will be placed in the code snippet that initializes Mixpanel. It can be obtained through the “Management” menu found in the “Project settings” tab of a Mixpanel project.

Install the JavaScript Library

Copy and paste the following code snippet in the inside of the  <head> and </head> tags to install the Mixpanel JavaScript Library. Note that you need to insert your project token in place of  "YOUR TOKEN" (do not delete the quotation marks) in the last line of the snippet.

Tracking Events

Events can be tracked after the Mixpanel library is installed by calling the Mixpanel track function. Event tracking is a key part of a competent Mixpanel implementation, so it is important to understand the components of the track function. An example of a JavaScript track call could look like:

<script type="text/javascript">  
mixpanel.track(
"Song Played", {
"Song Artist": "The Rolling Stones",
"Song Title": "Gimme Shelter"
});
</script>

Breaking this code into its components, it can be seen that:

  • The track call is being called inside the <script> tags of an HTML document. This indicates that this is a JavaScript function that needs to be executed when the web browser opens the page.
  • The mixpanel.track() function is called. Whenever this function is called, it will send an event to Mixpanel.
  • The arguments of the function are contained within the parentheses of the mixpanel.track() function. The first value, “Song Played”, is the event title. This will be the title of all events that occur whenever this function executes.
  • The values contained within the curly brackets are the event properties tied to the event. In this example, the two properties collected are the song artist and song title. These values are passed as key-value pairs, where the first value is the title of the property (Song Artist), and the second value is the value of the property (The Rolling Stones).

Whenever a track function is called, an event is recorded by Mixpanel. Events are the foundation of most Mixpanel reports, and are integral in understanding how users interact with a site or product.

Track one event before implementing your tracking plan to understand how events are collected, stored, and displayed in Mixpanel. This will make it easier to debug before fully implementing a tracking plan. Mixpanel’s Live View can be used to verify that events are being tracked properly.

 It is suggested that a separate development project is used when testing a Mixpanel implementation. Once events are being tracked successfully, switch the project token from the development project token to the production project token. This will transfer the implementation from the development project to the production project. 

Live View

Live view displays events that are being collected by Mixpanel in real time. Live View is a useful tool for testing or debugging implementation, QA testing, hypothesizing user stories before performing deeper analysis, or gathering quick perspective about product use.

 

Using Live View to Test Implementation

Live view will display events in real-time as they occur. This is extremely useful when testing implementation.

For example, if a mixpanel.track() call were called in a function when a song was played, then it will be viewable in Live View immediately:

LiveView1.png

Clicking on the event will expand it to show all of the event properties associated with that event:

LiveView2.png

Every time that this event fires, it will be viewable in Live View as a new event. All events will appear in Live View as they fire. As time goes on, these events aggregate in a list:

LiveView3.png

Live view will show all events in real time as they occur in an application, this includes the creation of people profiles, and the utilization of the People side of Mixpanel.

Create a Profile from Explore

An excellent way to understand Mixpanel People Profiles is to create a profile from the Explore report. This process highlights the concepts necessary in a building a scalable Mixpanel People implementation.

To create a people profile from the Mixpanel Explore report:

1. Click on Users in the top navigation

SUT1.png

2. Click on Explore in the dropdown. SUT2.png

3. Click on Create New Profile on the top of the Explore table.

SUT3.png

4. Fill out the Name and Email fields.

SUT4.png

5. Add any properties.

SUT5.png

6. Click Save Profile.

SUT6.png

Create a Profile Using Code

Scalable Mixpanel People implementations populate user profiles by including Mixpanel functions in the code base, as opposed to creating profiles individually from the UI.

People Profiles can be stored after the Mixpanel library is installed by calling mixpanel.people.set() function.

Note that Mixpanel.identify() must be called before mixpanel.people.set() in order to store a profile. The user management section of this article describes the identify function.

An example of a JavaScript mixpanel.people.set() call could look like:

mixpanel.identify("13487");
mixpanel.people.set({
    "$first_name": "Joe",
    "$last_name": "Doe",
    "$created": "2013-04-01T09:02:00",
    "$email": "joe.doe@example.com",
"Favorite Music Genre": "Rock" });

Breaking this code into its components, it can be seen that:

  • The track call is being called inside the  <script> tags of an HTML document. This indicates that this is a JavaScript function that needs to be executed when the web browser opens the page.
  • mixpanel.identify() identifies the user.
  • The mixpanel.people.set() function is called. Whenever this function is called, it will send a People profile to Mixpanel.
  • The arguments of the function are contained within the parentheses of the mixpanel.people.set() function. The first four values are Mixpanel reserved properties, as denoted by the ‘$’. The values are all stored as key-value pairs, where the first value is the name of the reserved property, and the second value is the value of that property.
    • For example, the value of the “$first_name” property is “Joe”.
  • The last property is a custom property named “Favorite Music Genre”. The value of this property is “Rock”.

Viewing Profiles From Explore

Newly created People Profiles are visible from the Explore report. The Explore report will show a new user after creation:

Prof_1.png

Clicking on the profile will show all of the details of the user profile. This includes an activity feed and the People properties associated with that profile:

Prof_2.png

As your Mixpanel project grows, it becomes increasingly important to manage your user base. Mixpanel suggests following certain principles and adhering to certain practices to achieve dependable identity management.

User and Identity Management

An end user’s journey can be unpredictable. Users might use different browsers, move from a mobile device to a laptop, or may periodically clear browsing data. Mixpanel offers several tools to account for this unpredictability. Understanding how to use these tools greatly expands the ability to glean actionable insight from event data. This is made possible by Mixpanel’s unique identifier, the distinct_id.

Distinct_id

As its name implies, the distinct_id is a unique identifier that is connected to every event as a property. A distinct_id is assigned to every user that is tracked, and it connects all of the events performed by an individual user.  

Mixpanel automatically assigns a distinct_id to a user when they first visit a website or an application that has Mixpanel installed. By default, the distinct_id is a random hash that is stored in the browser cookie of an end-user(JavaScript) or is linked to mobile identifiers(IFA in iOS and a random UUID in Android).

The value of the distinct_id is its ability to tell the story of individual users. If there are two different users performing the same events on a website, their unique distinct_id’s are what distinguish their events from one another. For example, if they perform the same “Log In” event, the distinct_id is what separates one user’s “Log in” event from the second user’s “Log in” event.

Seeing the distinct_id in Live View can illustrate how the distinct_id separates events by user:

distinct_id_Liveview.png

By the nature of storing the distinct_id in a cookie or by a mobile identifier, a journey can be segmented they move across devices, platforms, and sessions. Mixpanel accounts for this jump by using Identify and Alias.

Identify

Mixpanel’s identify function will replace the randomly assigned Mixpanel distinct_id with whatever argument is passed to it.

Mixpanel will assign a randomly generated distinct_id the first time a user accesses a website or application that has Mixpanel installed. If mixpanel.identify(“argument”) is subsequently called, then the randomly generated distinct_id will be replaced by the argument.

For example, if a user is randomly assigned a distinct_id of “random_123” and mixpanel.identify(“JohnDoe”) is called, then that user’s distinct_id is no longer “random_123”. It is now “JohnDoe”.

This change can easily be seen in Live View. If a user accesses an application and triggers an event before mixpanel.identify() is called, their distinct_id will be random hash.

did_1.png

If mixpanel.identify(“JohnDoe”) is called after the first event is triggered, then the distinct_id for the second event will be switched from the random hash to “JohnDoe”.

did2.png

As Mixpanel groups and individual user’s actions by their distinct_id, using mixpanel.identify() will connect a user’s actions as they move across platforms, devices, or delete cookies. For example, if John Doe is identified as “JohnDoe” on a web browser, then is later identified as “JohnDoe” on a mobile application, then all of John Doe’s actions will be connected.

mixpanel.alias() can be used in addition to mixpanel.identify() to track users on their journey by connecting the distinct_id with a user-determined alias.

Alias

The alias method connects the distinct_id to a different, user-specified unique identifier. This does not mean that the distinct_id will be replaced, but rather an additional identifier will be connected to the distinct_id.

For example, aliasing by email address means that the end-user’s distinct_id will be connected to the end user’s email address. The identify method will now work by using the new identifier, connecting the events in a user journey to an individual user by an identifier such as email.

User_Mgmt.png

Alias can be used to link pre-authenticated (i.e. before sign-up) activity with subsequent authenticated actions. It also enables the use of a unique identifier in place of Mixpanel’s automatically generated distinct_id.  The alias method continuously ties back the new unique identifier to the same distinct_id value in Mixpanel, which then attributes all actions to the same user when that user is logged in.

Next Step: Analyze Your Data

Is this article helpful?
30 out of 36 found this helpful

Comments

0 comments

Article is closed for comments.