Community Tip: How to keep properties consistent across client and server libraries - Mixpanel
Uncategorized

Community Tip: How to keep properties consistent across client and server libraries

To unlock the full power of Mixpanel reporting when using multiple integration libraries, super properties should be maintained across each Mixpanel library. In this Community Tip we discuss how to pass data from the client-side to your server for custom super properties and Mixpanel’s default client-side properties.

Passing custom super properties

As a refresher, super properties are client-side properties that are automatically attached to every event that a user sends to your Mixpanel project. Super properties make working with Mixpanel data much more convenient because you can create custom global properties that are omnipresent on all of your events. These super properties will be attached to each and every event provided the memory location (cookies in a browser, device memory in a mobile phone) of the super properties is not cleared. However, since custom super properties live in local memory, they aren’t immediately available to be sent along with server-side events since there is no direct link to the user’s device.

The solution here is to grab the super properties you wish to append to your server-side events from the local memory using built-in Mixpanel library methods. In JavaScript this would be the mixpanel.get_property() call; in iOS the currentSuperProperties call; in Android the getSuperProperties() call. For the purposes of this example we will be using the JavaScript library, but this process works similarly on mobile devices with the above methods.

In the specific case of the JavaScript library, it is important to note the library loads asynchronously to prevent Mixpanel from blocking other processes from running on your web application. Thus, in order to get a proper return from mixpanel.get_property(), you must wait until the Mixpanel library is fully loaded. To do this, you will want to place any mixpanel.get_property() calls within the “loaded” callback of your Mixpanel initialization “mixpanel.init” function so that the call is only fired once the library completely loads. You should modify your mixpanel.init method on any page where you will be grabbing a super property from the cookie to look as follows:

mixpanel.init( "YOUR TOKEN", {'loaded': function() {
    var superProperty = mixpanel.get_property("SuperProperty");
  }
});

Once you’ve grabbed the variables from local memory you can transmit them to your server and begin using these properties with your server-side events!

Passing Mixpanel default super properties

In addition to the custom super properties you can send with events, Mixpanel also tracks a set of default super properties in our client-side libraries. Mixpanel stores these default properties in two ways: by storing data in local memory (exactly like custom super properties) as well as by parsing and interpreting the user’s user agent.

For the properties set in local memory, such as utm_source, you can use the exact same steps outlined above to grab these super properties and pass them to your server. For the other default super properties, though, you cannot pass the user agent directly into Mixpanel and have it automatically parsed. Instead, in order to keep consistency across your event reporting, you’ll want to apply the same parsing logic on your backend that we use to interpret the user agent. This will ensure that you don’t have conflicting property keys and values between your client-side and server-side events in Mixpanel.

Below you can find a breakdown of all our default JavaScript super properties, which location they are stored in, and links to the explicit logic we use to parse the user agent so that you can mimic this behavior in your own implementation:

Stored in the Mixpanel cookie:

  • distinct_id (returned with mixpanel.get_distinct_id())
  • Initial Referrer ($initial_referrer)
  • Initial Referring Domain ($initial_referring_domain)
  • All UTM properties (utm_campaign, utm_source, etc.)

Queried on the user agent for each event:

You’ll notice that this list notably does not include any geolocation properties. Those properties (City, Region, Country) are handled differently than all the rest in that they are actually set on our backend. We gather our geolocation data based on the IP address of the request – when the request hits our servers we route it through a third party lookup service (MaxMind), which then returns our location-based property values. In the case of server-side integrations, we allow you to manually append this IP address of your user so that Mixpanel doesn’t think all your requests are coming from a single location (where your server is located).

As an important note, assigning location by IP address is handled differently for event tracking and people updates. For events, IP address is treated as a regular property within the array. You would simply include a property “ip” with your user’s client IP address, as you can see below in PHP:

$mp -> track("Event", array("Property" => "Value", "ip" => "Insert Client IP"));

For a People request, however, IP address is appended after the properties dictionary as another argument to the people update. You would thus want to pass the client IP address to Mixpanel as an additional argument of the request, as follows:

$mp -> people -> set($distinct_id, array("Property" => "Value"), "Insert Client IP");

These steps will ensure that Mixpanel uses the IP address that you manually pass in to determine geolocation information, and will ignore the address of the actual request from your server. You can find more information about server side updates in general here.

Have further questions about how to pass super properties from the client-side to your server? Reach out to support@mixpanel.com to speak to someone smart, quickly.

Get the latest from Mixpanel
This field is required.