Set up Your Tracking

The following article provides an overview of the JavaScript library installation process, event tracking, and profile creation. Although this article specifically addresses JavaScript implementation, this guide applies to 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 you place in the code snippet that initializes Mixpanel. You can find this by accessing 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

It is possible to track events after installation of the Mixpanel library. 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 inside the <script> tags of an HTML document. This indicates that this is a JavaScript function that executes when the web browser opens the page.
  • The mixpanel.track() function is called. This function call sends an event to Mixpanel.
  • The parentheses of the mixpanel.track() function contain the arguments of the 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 curly brackets contain the event properties tied to the event. In this example, the two properties are the song artist and song title. These values are 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).

An event is recorded by Mixpanel whenever you call a track function. 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 Mixpanel collects, stores, and displays events. This makes it easier to debug before fully implementing a tracking plan. Mixpanel’s Live View is a useful tool to that helps verify that events are being tracked properly.

Consider using a separate development project when testing a Mixpanel implementation. Once events are tracking successfully, switch the project token from the development project token to the production project token. This transfers 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 displays events in real-time as they occur. This is extremely useful when testing implementation.

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

LiveView1.png

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

LiveView2.png

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

LiveView3.png

Live view shows 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.

Calling the mixpanel.people.set() function stores People Profiles.

Note that you must call mixpanel.identify() before mixpanel.people.set() 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 people set call is inside the <script> tags of an HTML document. This indicates that this is a JavaScript function that executes when the web browser opens the page.
  • mixpanel.identify() identifies the user.
  • The mixpanel.people.set() function is called. This function sends a People profile to Mixpanel.
  • The arguments of the function are in the parentheses of the mixpanel.people.set() function. The first four values are Mixpanel reserved properties, as denoted by the ‘$’. The values are all 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 with the name “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 shows a new user after creation:

Prof_1.png

Clicking on the profile shows 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. Mixpanel’s unique identifier, the distinct_id, makes this possible.

Distinct_id

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

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, it is possible to capture a journey as a user move across devices, platforms, and sessions. Mixpanel accounts for this jump by using Identify and Alias.

Identify

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

Mixpanel assigns 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 argument replaces the randomly generated distinct_id.

For example, if a user is randomly assigned a distinct_id of “random_123” and you call mixpanel.identify(“JohnDoe”), 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 you call mixpanel.identify(), then the distinct_id connected to that event will be random hash.

did_1.png

If you call mixpanel.identify(“JohnDoe”) after the first event is triggered, then the distinct_id for the second event switches from the random hash to “JohnDoe”.

did2.png

As Mixpanel groups an 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 are 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?
83 out of 103 found this helpful

Comments

0 comments

Article is closed for comments.