Integrating Mixpanel Analytics into your Xamarin.iOS app

Share the joy

Earlier this year, we took a look around at mobile analytics packages with the aim of integrating one of their SDK’s into the JustGiving iOS app. We knew we had a lot of users using the app but didn’t feel like we had the kind of detailed insight required to make meaningful assessments of what users were finding valuable, and what they wanted next.

After trying several packages out, we settled on one of the industry’s old favourites, Mixpanel. In addition to wanting the standard analytics features of custom event tracking (with custom properties) we knew we also wanted to experiment with:

  • Push notifications (sent to users potentially customized to their in-app profile characteristics and behaviour).
  • A/B testing “light” (where app administrators can use the Mixpanel web dashboard to make light changes like button sizes, colours and copy without the need for developer involvement or an app release. These changes are then applied to the app through Mixpanel’s SDK).
  • A/B testing “deep” (using Mixpanel’s Developer Tweaks feature)
  • In-app notifications (custom view content rendered by the Mixpanel SDK)

However, creating a working Xamarin.iOS binding to facilitate some of these features was what we developers like to call “non-trivial” and I’d like to share the lessons learnt so that you can take full advantage of Mixpanel’s great mobile analytics features in your Xamarin.iOS app.

In-app Notifications and Surveys:

The Mixpanel SDK provides a feature whereby app administrators can create surveys and in-app notifications in the Mixpanel dashboard and make them appear for a certain subset of users. For example, we recently ran a survey asking our users a few short questions, including this one:

Mixpanel survey question

Users get the survey pop up the next time they open the app, and can quickly and easily answer our questions through a pleasant UI provided by the Mixpanel SDK, with minimal fuss.

In-app notifications and surveys require the Mixpanel SDK to be bundled with specific UI resources. However, you may find them missing if you are using one of the several Mixpanel Xamarin bindings available out there (like this (otherwise fine) one from softlion) or if you created your own using Xamarin’s excellent ObjectiveSharpie tool.

To get functional surveys and in-app notifications, your Xamarin binding project requires compiled versions of the relevant storyboard files found in the Mixpanel source code.

Once you clone the source code, to obtain compiled versions of the Xcode storyboards used to show the content, simply navigate to the /Mixpanel folder and use ibtool (interface builder tool) as follows:

(We only support portrait mode in the JustGiving app, so I’m simplifying things here and leaving out the landscape storyboards).

Now copy the newly created .storyboardc files over to your Xamarin binding project’s /Resources folder. Also take this opportunity to copy over all the images from the /Mixpanel/images folder, or you might end up with some missing buttons and icons!

Once done, your /Resources folder should look something like this:

Resources folder

Now your in-app notifications and surveys should appear when your users next open the app!

Developer Tweaks:

Mixpanel’s Developer Tweaks feature facilitates a deeper version of A/B testing by requiring developers to set up a Tweak (some sort of integer/boolean/string value defined in the app) and then app administrators can change the value of that tweak in different variants of an A/B experiment through the Mixpanel dashboard.

As the documentation points out, an (Xcode) developer simply uses this code to create a Tweak.

However, this is where the fun starts. As far as I can make out from the source code, that “MPTweakValue” is the beginning of a chain of Objective-C macros which are not bindable by our C# Xamarin layer. A macro is a compiler directive that replaces the identifier with a token string (the tweak name) at compile time, so it makes no sense to bind (or rather, can’t be bound as it’s not a type, method or property), as the Mixpanel SDK’s compile time is not the same as our Xamarin.iOS app’s compile time!

So, we innovate by breaking this into two steps. Step one is to get the Developer Tweak showing on the dashboard (which can only be done by having the code from the documentation above running in an app or simulator). This is relatively easy – all we have to do is download the source, and open up Mixpanel’s example project in the /HelloMixpanel folder, in XCode, open up the AppDelegate.m file and add our custom tweak:

Custom Developer Tweak

Hit “Run”, and this tweak should show up in your dashboard shortly afterwards:

Mixpanel dashboard

Now, to surface this developer tweak in our app, we unfortunately have to forego the Mixpanel SDK Xamarin Binding completely and work directly against the Mixpanel Rest API. Please note, the following approach may not be officially supported by Mixpanel so YMMV. HBD!

When you initialize the SDK (or call the JoinExperiments method), the SDK downloads all relevant data from Mixpanel servers including in-app notifications & surveys to display, as well as “experiment data” which includes our Tweaks. Here is an example of the request made by the SDK (obtained using the excellent proxy debugging tool Charles):

Besides the “version” and “lib” properties, which are self-explanatory, 3 things are of interest here:

  1. “token” which is your Mixpanel project app id/key.
  2. “distinct_id” which is the user’s unique id, confirming that we are only downloading relevant content & experiment data that pertains specifically to that user.
  3. A list of “properties”, some of which look like they may be superfluous (eg. ios_app_version, which is your build number) but others that look like they may be able to feature in selection criteria when creating a subset of users to which content & experiment data could pertain.

And this is an example of the response payload:

So the task at hand here is to simply recreate this communication by using our own rest client, and extract and store the tweaks ourselves. In the JustGiving app we use the excellent ModernHttpClient, and in a platform-specific service that wraps the Mixpanel SDK, we have the following method:

And the accompanying classes that will represent the deserialized response from the Mixpanel API:

We can call the FetchMixPanelTweaks method after setting the user’s identity in Mixpanel (possibly after the user logs in) and calling the JoinExperimentsWithCallback method:

Ultimately we get a list of Tweaks that live on our app-wide singleton MixpanelService, ready to access in other parts of the app, for example:

And there you have it! Hopefully this technique will help you on your way to taking full advantage of the Mixpanel SDK in your Xamarin iOS app and allow you to gain deeper insight into the behaviour of your users – a critical need for any modern day app.

By the way, our Mixpanel Xamarin.iOS binding can now be found with several others that we’ve open-sourced here.

Thanks to both Ryan Seams at Mixpanel and Jon Goldberger at Xamarin  for the support, iteration and ideas required to get us there in the end!

Share the joy

About the author

Mark Gibaud

Lead Developer, App & API Platforms.

View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *