Incremental Super Properties

This article shows you how to create incremental super properties using Mixpanel’s JavaScript SDK.  

Creating incremental properties can help you tally how often a user takes specific actions on your site or in your app. You can then segment any event by count.

Defining Super and Incremental Super Properties

Super properties are client-side properties that are automatically attached to every event that a user sends to your Mixpanel project.

Mixpanel data is much easier to manage with super properties because they act as global properties that are present in all your events, if your cookie is not cleared.

Super properties only apply to events, such as ad campaign, signup date, paid account type, and so on. Super properties do not apply to user profiles.

Incremental super properties is a way to create a tally to count the number of times a user has performed a specific action in your app. For example, if you have an e-commerce site and want to track how many times a user has viewed an item, how many items they’ve added to their cart, or how many purchases they’ve made.

It could be very useful to look at other events in association with those metrics. Perhaps the majority of purchases come from users who’ve viewed an item more than three times.

Implementing Incremental Super Properties

In this section, you’ll create a custom snippet that:

  • Grabs the super property you want to increment from the cookie.
  • Updates its current value by the increment amount.
  • Registers it as a super property again.

Initialize the property and grab it from the cookie with mixpanel.get_property(). Then add it and use mixpanel.register() to overwrite the property with the new values.

Here’s an example of a custom Javascript snippet that illustrates this process.

You insert the snippet adjacent to the Mixpanel library in the head of your site.

Define the incrementing function:

incrementer = function(property) {  
value = mixpanel.get_property(property);

update = {} 
if(value && typeof(value) == 'number') {  
update[property] = value +1;  } 
else { 
update[property] = 1 


The last step is to use the mixpanel.get_property()function. You’ll need to use the Mixpanel library’s loaded callback to ensure the library is fully loaded.

The Mixpanel JavaScript library loads asynchronously to prevent the script from blocking other processes from running on your web application.

This asynchronous load is important because the mixpanel.get_property() method is not available until the Mixpanel library is fully loaded.

As a preventative measure, you’ll need to pass a configuration object to the method with a loaded parameter and a callback function that executes immediately after the library loads.

Here is an example of a loaded callback:

mixpanel.init("YOUR TOKEN", {
'loaded' : function() {
incrementer('incremented property');

Once you have the incremental super property set, you can leverage this property across all your Engagement reports.

When you’re tracking how many times a user has viewed an item, how many items they’ve added to their cart, and how many purchases they’ve made, you could create a Funnel report that examines the process when: users search, add items to their cart, purchase an item, and see the number of times users performed each step before moving to the next.

Or perhaps, you want to create a Retention report that shows how well users move from adding an item to their cart to actually purchasing–specifically for first time users and seasoned users.

Incremental super properties are a great tool to explore how your users engage differently with your app as they become more familiar with firing specific events.

Example Implementation

The following code block is an example of a super property implemented in a web-based JavaScript application. 

//wait until Mixpanel is loaded
//alternatively you may use the loaded callback in the init() or set_config():
function waitUntilLoad(func) {
if (mixpanel.__loaded) func();
else setTimeout(function() {
}, 10);

//a wrapper which acts a superIncrement method accepting a 'property' and 'amount'
function superIncrement(property, amount) {
waitUntilLoad(function() {
superIncrementLogic(property, amount);

//increment the user property and setup the event incrementory
function superIncrementLogic(property, amount) {
increment(property, amount);
mixpanel.people.increment(property, amount); //comment this line out if you do not wish to add a 'user profile property'

//wrapper for the incremental event logic
function increment(property, value) {
waitUntilLoad(function() {
incrementLogic(property, value);

//the actual increment logic
function incrementLogic(property, value) {
var prop = {};
prop[property] = 0;
prop[property] = mixpanel.get_property(property) + value;

// Track an event called 'Read Article' with a super/user prop for '# of article read'
superIncrement('# of articles read', 1)
mixpanel.track('Read Article')
Did this answer your question?



Article is closed for comments.