How to set up analytics on React Native for iOS

Question

So I have a completed React Native project for iOS but I want to put analytics in it. I tried the react-native-google-analytics package, but issues prevent it from working properly. Also, the react-native-cordova-plugin package is only working on Android, so the ability to plug in a Cordova plugin for analytics is out of the question for now. I also do not have Swift / objective C experience, so would be completely lost pluggin in GA that way. Does anyone have any suggestions on how to hook up Google Analytics (or any other analytics) for React Native for iOS? If so, please give some detailed instructions on doing so. I, and I'm sure, many others will appreciate it :)

Answer 1

I am the author of a Google Analytics package for React Native: https://github.com/idehub/react-native-google-analytics-bridge

Since it is a pretty simple native bridge to the official Google Analytics libraries, it should not give you any issues related to the platform. Also, it will handle a lot of the metadata automatically, like the device UUID, device model, viewport size, OS version etc.

Because of that last part, the calls can be pretty simple, like tracking a new screen view:

import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';
let tracker = new GoogleAnalyticsTracker('UA-12345-1');
tracker.trackScreenView('Home')

Or an event:

tracker.trackEvent('testcategory', 'testaction');

Answer 2

I'm the author of react-native-google-analytics -- the problem with it has been with React Native's lack of support for GIF data in XHR responses on iOS 7. I'm still trying to figure out if the problem people are experiencing is still limited to iOS 7. The bug was reported as fixed by the RN team for iOS > 7, however if that is not the case then there must be a regression. Tracking for the React Native issue is here: https://github.com/facebook/react-native/issues/1780

If you have any other questions regarding the module specifically, please don't hesitate to ask on GitHub!

Answer 3

I just set up mixpanel with this package: https://github.com/davodesign84/react-native-mixpanel

And then I have something like this in my main.js file that holds all my view components:

componentWillMount: function() {
    this.loadData(this.setDataState);
    // not sure if this is the best way to do it, but whatever
    Mixpanel.identify(DeviceInfo.getUniqueID());
    Mixpanel.set("$name", DeviceInfo.getDeviceName());
    Mixpanel.track("App Loaded");
}

And then in my view.js that renders a component with data, I have something like this:

componentWillMount: function() {
    Mixpanel.trackWithProperties("Definition Viewed",{word:this.state.word});

}

And then I also call mixpanel when a users adds/deletes data.

After all this, I just noticed that fabric does analytics so I will probably migrate to that because I use to to manage beta testers and its awesome so it'll be nice to have everything in 1 place

Answer 4

So this may be helpful to people, but I found Segment - https://segment.com/ - a lot easier to get setup. Segment has integration with Google Analytics and all the other analytics packages, so it easy once the connection is made. I had to follow some tutorials on creating a native bridge using the RCT_EXPORT_MODULE technique, but once I established a connection to the client, I was able to pretty much plug in the Segment starter code. I linked specific event calls to different actions on the client side through NativeModules.AnalyticsHelper.openApp(clientId), NativeModules.AnalyticsHelper.shareContent(clientId), etc.. I think this is a good method to follow.

I also created a gist to show how to setup Segment Analytics for React native.