React Native integrated statistics function

Sometimes we need to know a product’s popularity, promotion effect, how many people are there in the installation and use rate, average online time, active users, the number of starts, the version distribution data, this time we have to use statistical analysis. If the conditions permit, we can achieve statistical analysis of their own functions, but if you want to do very professional, very detailed, then you need a huge workload. Here we can also use the third party statistics umneng.

In this article, I’ll share with you the methods and processes for integrating Umeng statistics in React Native. Because the Umeng web site has very detailed integration document integration documents, here I will introduce how to integrate statistical functions in React, Native, Android, and iOS, but not long winded.

If you want to learn how to integrate statistical features in React Native through video, you can check here

Step 1: integration readiness

First of all, we need to apply for a developer account at the Umeng website. Then create an application and get appkey.

Integrated SDK

After we get to appkey, we’ll come to integrate SDK.


The alliance supports the AndroidStudio configuration of Gradle, so we open the Android directory under the React Native project root using AndroidStudio, as shown in fig.:

React Native integrated statistics function

Then add it in /android/app/build.gradle:

Dependencies {compile''}

If you cannot integrate properly, add the following code:

Allprojects {repositories, {mavenCentral ()}}

Then re – build the application, and Gradle automatically downloads the SDK of the configuration above to the local.

If you want to learn how to integrate statistical features in React Native through video, you can check here


The alliance supports the addition of statistical SDK dependencies through Cocoapods, and if your Mac has not installed Cocoapods, you can install it by using the CocoaPods installation and tutorials. After the
Cocoapods installation is complete, create a podfile file in your project root directory and add the following:

Pod'UMengAnalytics'// standard SDK, containing IDFA, pod,'UMengAnalytics-NO-IDFA'//, no IDFA version, SDK (please choose one as needed)

Such as:

Platform: IOS,'7.0', target,'GitHubPopular', do, pod, end,'UMengAnalytics'

Then run the command below terminal, as follows:

Pod install
React Native integrated statistics function
pod installs Umeng statistics

Experience: if the process is slow, you can add the –verbose –no-repo-update parameter after the install command.

After the command execution completes, the download and installation of the statistics SDK can be completed.

Then, we open the IOS folder in the root directory of the project project, and you’ll see a xxx.xcworkspace file:

React Native integrated statistics function
opens xcworkspace

When you open the file with XCode, you’ll see the SDK we just integrated:

React Native integrated statistics function
SDK integration

If you have more than one PROJECT we have a project, then you need to use the xcworkspace to manage our project, we install the SDK statistics through pod, will be more out of a Pods PROJECT project, after we need to use xcworkspace to open our IOS project.

The second step: integration configuration

After the SDK download is complete, then we’ll be able to do some integration configuration.


Configuring AndroidManifest.xml

Manifest configuration mainly includes adding permissions, the following permissions are indispensable, fill in the Appkey and fill in the channel ID three parts, code examples are as follows:

< manifest...... > < uses-sdk android:minSdkVersion= "8" > < /uses-sdk> < uses-permission android:name= "android.permission.ACCESS_NETWORK_STATE" /> < uses-permission; android:name= /> android.permission.ACCESS_WIFI_STATE & lt; uses-permission android:name= "android.permission.INTERNET" /> < uses-permission; android:name= "android.permission.READ_PHONE_STATE" /> < application...... >...... < activity...... /> < meta-data android:value=; YOUR_APP_KEY; android:name=; UMENG_APPKEY; < meta-data; android:value=; Channel; ID; android:name=; UMENG_CHANNEL; /> < /> /application> < /manifest>

The above code YOUR_APP_KEY is appkey, you need to replace the application in the Pro League backstage application, Appkey, Channel, ID for the promotion of channel names, which can be customized as required, such as: GooglePlay

Most basic use

After the above configuration is complete, we can use the statistics sdk. We just need to add the following code in to complete the session statistics.

Public, onResume (), {super.onResume (); MobclickAgent.onResume (this);}, public, void, onPause (), {super.onPause (); MobclickAgent.onPause (this);}. Void}

If you want to learn how to integrate statistical features in React Native through video, you can check here


Configuring AppDelegate.m

In AppDelegate.m, import header file #import “UMMobClick/MobClick.h”
AppDelegate.m configuration, including filling out Appkey, setting the sending strategy and filling in the channel ID three parts, the code example is as follows:

#import "UMMobClick/MobClick.h"... - (BOOL]) application: (UIApplication] * application) didFinishLaunchingWithOptions: (NSDictionary * launchOptions) {UMConfigInstance.appKey = @ "xxxxxxxxxxxxxx..."; UMConfigInstance.ChannelId = @ "App Store"; UMConfigInstance.eSType = E_UM_GAME; / / apply only to the game scene, do not set the application statistics... [MobClick startWithConfigure:UMConfigInstance]; / / configuration parameters above after this method is called to initialize SDK! }

AppKey for developers in the League of friends backstage application applications, Appkey, ChannelId value for application channel identifier. The default is @ App Store”.

Here, the integration configuration has been completed.

If you want to learn how to integrate statistical features in React Native through video, you can check here

The third step: advanced function

In the above we have completed the SDK statistical integration, configuration and the most basic (if you want to how to use React in Native integrated statistical functions, can click here to view the video learning), so far has been able to gauge statistical SDK function, we do most of the system such as: new users, active users and the number of starts, version distribution, channel analysis, retention analysis, error analysis, user attributes etc..

If we want to make more advanced features, such as: counting statistics and calculation of statistics, since most of the business logic React Native application code is in the JS part, so we need to count statistics and statistical calculation of
related functions are encapsulated into React native Native module, and then exposed to the JS module for JS. Module calls on how to package React native Native module, I have a very detailed explanation in the video tutorial.

These are the methods and processes for integrating Umeng statistics in React Native, so that we can look at these statistics in the Umeng background management:

React Native integrated statistics function
view statistics

To tell you a piece of good news, React Native video tutorials for everyone prepared, we can now see the video learning React Native.

If you in the React Native integrated Umeng statistics in the process of better experience or problems, you can leave a message at the bottom of this article, I saw it will respond in a timely manner Oh.
can also focus on my Sina, micro-blog, or focus on my Github to get more of the technology for React Native development.

Recommended Learning: video tutorials “React Native development, cross platform GitHub App.”