What are users of my app doing with it?
Our pieces of technology shine with the latest tools, they are performant, and easy to maintain because they are well architected and documented. They are also fully tested, thus ensuring quality. In the case of mobile apps, we are ready to deploy. Stores will have our product go live or at least beta for iOS and Android respectively. But, what happens next? How do we know that our awesome app is doing what it is supposed to? How do we get to know about our users?
To close the cycle for a mobile app development, we need to make sure to measure and optimize its performance. There are a couple of alternatives to do this. I am going to describe these processes using Segment, which is a tremendous intermediary platform with many integrations; and Mixpanel, which is a great analytics platform.
Mixpanel gets basic demographic information by default. Additionally, they have a very nice feature called Funnel, which we will go through during this post. After this implementation, you will be able to get insights about what the users are and are not doing within the app.
To show you some instances of Segment and Mixpanel, I will use a basic app that emulates a shopping flow. By the way, it is using React Native Navigation. This is the GitHub repository of the complete project. And this is how it looks.
Segment
The first step is to add Segment to our project. We will do that by running yarn add react-native-analytics-segment-io and react-native link react-native-analytics-segment-io. You can always verify your installation by following the manual linking process.
Follow the library’s instructions on ensuring the right build order.
Create a Segment account and select to collect data from an iOS app (you can follow the installation steps for Android as well). Follow the installation steps for Segment on an iOS source available on the Segment Source Overview:
- Add the Analytics dependency to your Podfile
- Initialize the Client
- Import the SDK in the files that you use it
- Add the Analytics dependency to your Podfile
- Initialize the Client
- Import the SDK into the files you’re using
Once these steps are completed, you should see something like this in the Segment Debugger section for your iOS source.
Mixpanel
Segment allows us to integrate many sources. To continue, we’ll need a Mixpanel account. Create it and go to the Settings view where you will find the Token and API Secret values.
Go back to Segment and add the Mixpanel destination:
Follow the process to add the Mixpanel destination to your existing iOS source. Enter the following:
- API Secret
- Turn Use Mixpanel People On
- Token
- Turn Track All Pages to Mixpanel with a Consolidated Event Name off
- Leave everything else as default
- Finally, turn on the top right switch to enable the destination
After this, you should see the following on the home Segment:
Custom event tracking
Now we will add some custom event tracking to start gathering data for the Funnel. As you have seen already, there are some events tracked by default. It is good to have this initially for knowing that the integration with Segment is working, although not very insightful. Go to your AppDelegate.m file and remove the following lines:
configuration.trackApplicationLifecycleEvents = YES;
configuration.recordScreenViews = YES;
On index.js, update the didAppear listener to look like this:
didAppear: ({ screen }) => Analytics.track(`Screen ${screen} displayed`)
With this, we will be tracking individual screens. By this point the Segment debugger should show something like:
now you will not only see Segment events, but also Mixpanel ones!
By default, Mixpanel identifies records with the device id. However, it also offers an identify function to link records with a specific user. In Login.js make sure the signIn function includes the identify call:
signIn = () => {
const name = this.state.name;
Analytics.identify(name, { name });
enableSignedInFlow();
};
Navigate around the app to create some more records so you get a better feeling of how they behave.
Now we will add other custom events to track. To see what products are the most popular in our store, we will monitor which products are being viewed. In ProductDetail.js, make sure to import Analytics:
import Analytics from 'react-native-analytics-segment-io';
and add the following code:
componentDidMount() {
Analytics.track('Product screen displayed', {
productName: `${this.props.product.name}`,
productCost: this.props.product.cost
});
}
As you can see, the previous code is tracking a generic product screen displayed message with specific product properties. This will allow us to filter and analyze the information on Mixpanel.
Next, we want to make sure that our users are completing the checkout steps, or else, we want to know where they are dropping off the process. Please note that this is an overly simplistic checkout demo. The point here is to demonstrate the flow process so you can later implement it in your applications.
In Checkout.js, adjust your code to look like the following:
completeCheckoutStep = step => {
Analytics.track('Checkout step completed', {
step
});
};
render() {
return (
<Button title="Checkout step 1"> this.completeCheckoutStep('Summary')} />
<Button title="Checkout step 2"> this.completeCheckoutStep('Billing')} />
<Button title="Checkout step 3"> this.completeCheckoutStep('Shipping')} />
<Button title="Go to confirmation view" />
);
}
Similar to what we did with the products, we will track a generic record for each completed step from the checkout process, but adding specific step information as a property to the record. This will result in specific checkout records.
In order to build our Funnel, we need to create events. So again navigate through the app, follow the shopping flow, close the app, open it and play around to create some records and make sure to capture all of them at least once.
Funnel
Now that we have a good set of events tracked and some history built, we are ready to build the Funnel. In Mixpanel, go to Funnels and tap Build a Funnel. Create your Funnel with the following steps:
- Screen analytics.Home displayed
- Screen analytics.Categories displayed
- Product Screen Displayed
- Screen analytics.Cart displayed
- Screen analytics.Checkout displayed
For the checkout steps, make them look like the following:
Now that our Funnel is built, events that occur from now own will populate it. Take advantage of our dummy login and run the flow with different users. Complete all or some of the steps in the flow and see how the Funnel is being built. See how mine turned out:
Left side (steps 1-7):
Right side (steps 4-10):
Add your Funnel to your dashboard by clicking the top right button. See how my dashboard looks:
Better optimized step 7, which is the Billing step. Should we consider new payment methods?
Additional features
Digging deeper into Mixpanel, we can go to Insights and see how are our products performing. On Insights, create a new Products report and break it down by the productName property. You should be able to see something like the following:
Take a look at our champion, product 1! Add this report to your dashboard by clicking the top right button.
Another exceptional feature of Mixpanel is Retention. It answers the question of when are users coming back to our app, or if they are coming back at all. You can use the app for a couple of days with the same users and see how the Retention chart is populated.
Lastly, you can go to Users -> Explore and see information about the users of your app and use filters to understand them better:
Overall, Mixpanel is a great tool, and it offers a pretty decent free tier. What other actions are you interested in tracking within your app? You can let me know this and any other question in the comments section.
I hope you find this information useful, thanks for reading! If you need more information, contact us here!
Or send us a message!
Error: Contact form not found.
