期待已久的新課上線啦！解鎖React Native開發(fā)新姿勢，一網(wǎng)打盡React Native最新與最熱技術(shù)，點(diǎn)我Get!!!

有時(shí)我們需要知道一款產(chǎn)品上線后的受歡迎程度，推廣效果、有多少人安裝、使用率，平均在線時(shí)長、活躍用戶、啟動(dòng)次數(shù)、版本分布等數(shù)據(jù)，這個(gè)時(shí)候我們不得不用到統(tǒng)計(jì)分析。如果條件允許我們可以自己實(shí)現(xiàn)統(tǒng)計(jì)分析的功能，但如果要做的很專業(yè)很詳細(xì)那么則需要一個(gè)龐大的工作量。在這里我們也可以采用第三方統(tǒng)計(jì)umneng。

在這篇文章中我會(huì)向大家分享，在React Native中集成umeng統(tǒng)計(jì)的方法及流程。因?yàn)閡meng官網(wǎng)有非常詳細(xì)的集成文檔集成文檔，在這里我會(huì)介紹在React Native的Android和iOS中如何集成統(tǒng)計(jì)功能，但不會(huì)長篇大論。

如果大家想通過視頻學(xué)習(xí)如何在React Native中集成統(tǒng)計(jì)功能，可以點(diǎn)這里查看

第一步：集成準(zhǔn)備

首先我們需要到umeng官網(wǎng)申請一個(gè)開發(fā)者賬號(hào)。然后創(chuàng)建一個(gè)應(yīng)用并獲取appkey。

集成SDK

獲取到appkey之后呢，我們接下來就來集成集成SDK。

Android

友盟支持AndroidStudio的Gradle配置，所以我們用AndroidStudio打開React Native項(xiàng)目根目錄下的android目錄如圖：

open-react-native-android-native-project

然后在/android/app/build.gradle中添加：

dependencies {
   compile 'com.umeng.analytics:analytics:latest.integration'
}

如果無法正常集成請?zhí)砑尤缦麓a ：

allprojects {
    repositories {
            mavenCentral()     
    }
}

然后重新build應(yīng)用，Gradle就會(huì)將上述配置的sdk自動(dòng)下載到本地。

如果大家想通過視頻學(xué)習(xí)如何在React Native中集成統(tǒng)計(jì)功能，可以點(diǎn)這里查看

iOS

友盟支持通過Cocoapods來添加統(tǒng)計(jì)sdk的依賴，如果你的Mac還沒有安裝Cocoapods，則可以通過CocoaPods安裝和使用教程來安裝。
Cocoapods 安裝完成后，在你的項(xiàng)目根目錄創(chuàng)建一個(gè) podfile 文件，添加如下內(nèi)容：

pod 'UMengAnalytics'//標(biāo)準(zhǔn)SDK，含IDFA
pod 'UMengAnalytics-NO-IDFA'//無IDFA版SDK（請根據(jù)需要選擇其中一個(gè)）

如：

platform :ios, '7.0'
target 'GitHubPopular' do
pod 'UMengAnalytics'
end

然后在terminal下運(yùn)行命令如下：

pod install

pod安裝umeng統(tǒng)計(jì)

心得：如果過程緩慢可以在install命令后添加 --verbose --no-repo-update參數(shù)。

命令執(zhí)行完成后即可完成統(tǒng)計(jì)SDK的下載安裝。

然后，我們打開項(xiàng)目項(xiàng)目根目錄下的ios文件夾，會(huì)看到一個(gè)xxx.xcworkspace的文件：

打開xcworkspace

用XCode打開該文件就會(huì)看到我們剛才集成的SDK了：

sdk集成

如果我們一個(gè)項(xiàng)目中有多個(gè)PROJECT，那么則需要用xcworkspace是來管理我們的項(xiàng)目，我們通過pod安裝了統(tǒng)計(jì)sdk后，項(xiàng)目中會(huì)多出來一個(gè)名為Pods的PROJECT，所以后我們需要通過xcworkspace來打開我們的ios項(xiàng)目了。

第二步：集成配置

sdk下載完成之后呢，接下來我們就可以進(jìn)行一些集成配置。

Android

配置AndroidManifest.xml

manifest的配置主要包括添加權(quán)限，以下權(quán)限缺一不可，填寫Appkey和填寫渠道id三部分，代碼示例如下：

<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" />
<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>

上述代碼中的YOUR_APP_KEY為appkey 需要替換為您在友盟后臺(tái)申請的應(yīng)用Appkey，Channel ID為推廣渠道名稱，這個(gè)可以根據(jù)需要進(jìn)行自定義，如：GooglePlay

最基本使用

上述配置完成之后，我們就可以使用統(tǒng)計(jì)sdk了。我們只需在MainActivity.java中添加如下代碼即可完成session的統(tǒng)計(jì)。

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

如果大家想通過視頻學(xué)習(xí)如何在React Native中集成統(tǒng)計(jì)功能，可以點(diǎn)這里查看

iOS

配置AppDelegate.m

在AppDelegate.m中導(dǎo)入頭文件#import "UMMobClick/MobClick.h"
AppDelegate.m 的配置主要包括填寫Appkey，設(shè)置發(fā)送策略和填寫渠道id三部分，代碼示例如下：

#import "UMMobClick/MobClick.h"

...
- (BOOL])application:(UIApplication] *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    UMConfigInstance.appKey = @"xxxxxxxxxxxxxx...";
    UMConfigInstance.ChannelId = @"App Store";
    UMConfigInstance.eSType = E_UM_GAME; //僅適用于游戲場景，應(yīng)用統(tǒng)計(jì)不用設(shè)置   
    …  
    [MobClick startWithConfigure:UMConfigInstance];//配置以上參數(shù)后調(diào)用此方法初始化SDK！
}

appKey為開發(fā)者在友盟后臺(tái)申請的應(yīng)用Appkey，ChannelId的值為應(yīng)用的渠道標(biāo)識(shí)。默認(rèn)為 @"App Store"。

到這里集成配置已經(jīng)完成了。

如果大家想通過視頻學(xué)習(xí)如何在React Native中集成統(tǒng)計(jì)功能，可以點(diǎn)這里查看

第三步：高級(jí)功能

在上文中我們已經(jīng)完成了統(tǒng)計(jì)sdk的集成、配置以及最基本的使用(如果大家想通過視頻學(xué)習(xí)如何在React Native中集成統(tǒng)計(jì)功能，可以點(diǎn)這里查看)，到現(xiàn)在為止統(tǒng)計(jì)sdk已經(jīng)能為我們完成大部分的統(tǒng)計(jì)功能了，比如：新增用戶、活躍用戶、啟動(dòng)次數(shù)、版本分布、渠道分析、留存分析、錯(cuò)誤分析、用戶屬性等。

如果我們要進(jìn)行更高級(jí)的功能，比如：計(jì)數(shù)統(tǒng)計(jì)與計(jì)算統(tǒng)計(jì)等，因?yàn)镽eact Native應(yīng)用的大部分業(yè)務(wù)邏輯的代碼都是在js部分完成的，所以我們需要將計(jì)數(shù)統(tǒng)計(jì)與計(jì)算統(tǒng)計(jì)
的相關(guān)功能封裝成React Native原生模塊，然后暴露給js模塊，供js模塊進(jìn)調(diào)用，關(guān)于如何封裝React Native原生模塊，我在視頻教程中有很詳細(xì)的講解。

以上便是在React Native中集成umeng統(tǒng)計(jì)的方法及流程，這樣以來我們就可以在umeng后臺(tái)管理中查看這些統(tǒng)計(jì)數(shù)據(jù)了：

查看統(tǒng)計(jì)數(shù)據(jù)

告訴大家一個(gè)好消息，為大家精心準(zhǔn)備的React Native視頻教程發(fā)布了，大家現(xiàn)可以看視頻學(xué)React Native了。

如果大家在React Native中集成umeng統(tǒng)計(jì)的過程中有更好的心得或遇到問題可以在本文的下方進(jìn)行留言，我看到了后會(huì)及時(shí)回復(fù)的哦。
另外也可以關(guān)注我的新浪微博，或者關(guān)注我的Github來獲取更多有關(guān)React Native開發(fā)的技術(shù)干貨。

推薦學(xué)習(xí)：視頻教程《React Native開發(fā)跨平臺(tái)GitHub App》