React Native 輕鬆集成統計功能（Android 篇）

關於推送的集成請參考這篇文章，本篇文章將引導你集成統計功能，只須要簡單的三個步驟就能夠集成統計功能。

第一步 安裝

在你的項目路徑下執行命令：

npm install janalytics-react-native --save
npm install jcore-react-native --save
react-native link

執行完上述命令後，使用 Android Studio 打開你的項目。

第二步 配置：

2.1 配置 settings.gradle

執行完 link 命令後，若是 link 失敗，則須要手動打開 settings.gradle 文件，完成如下配置：

your project/settings.gradle

include ':app', 'janalytics-react-native', 'jcore-react-native'
project(':janalytics-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/janalytics-react-native/android')
project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')

2.2 配置 build.gradle

your project/android/app/build.gradle

android {
  ...
  defaultConfig {
    applicationId "your application id"
    ...
    manifestPlaceholders = [
      JPUSH_APPKEY: "your app key",	//在此替換你的APPKey
      JPUSH_CHANNEL: "developer-default",		//應用渠道號, 默認便可
    ]
  }
}
...
dependencies {
  compile project(':janalytics-react-native')
  compile project(':jcore-react-native')
}

2.3 配置 AndroidManifest.xml

your project/AndroidManifest.xml

<manifest>
    <application>
        ...
        <meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}"/>
        <meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/>
        ...
    </application>
</manifest>
...

到此爲止配置已經完成了，如今 sync 一下項目便可看到 janalytics 和 jcore 兩個庫出如今本身的項目下。

第三步 使用

3.1 加入 JAnalyticsPackage：

your project/app/MainApplication.java

...
@Override
protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new JAnalyticsPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)
        );
}

上面的兩個參數是 bool 類型的，第一個參數設置爲 true 表示關閉 toast 提示，第二個設置爲 true 表示關閉日誌打印。建議在 debug 版本中打開。 一樣在 MainApplication，調用 init 方法：

@Override
public void onCreate() {
    super.onCreate();
    SoLoader.init(this, false);
//        在 Init 以前調用，設置爲 true，則會打印 debug 級別日誌，不然只會打印 warning 級別以上的日誌
    JAnalyticsInterface.setDebugMode(true);
    JAnalyticsInterface.init(this);
}

3.2 import JAnalyticsModule

接下來在 JS 文件中只要引入 JAnalyticsModule 就能夠調用它的接口了：

your component.js

...
import JAnalyticsModule from 'janalytics-react-native';

調用 API

startLogPageView(params)

這個方法表示開始記錄頁面統計，在生命週期中調用：

componentDidMount() {
    var param = {
      pageName: "main"
    };
    JAnalyticsModule.startLogPageView(param);
  }

stopLogPageView(params)

這個方法表示結束記錄頁面統計，在生命週期中調用：

componentWillUnmount() {
    var param = {
      pageName: "main"
    };
    JAnalyticsModule.stopLogPageView(param);
  }

postEvent(event)

上報統計事件，目前事件分爲：CountEvent(計數事件)、CalculateEvent(計算事件)、RegisterEvent(註冊事件)、LoginEvent(登陸事件)、BrowseEvent(瀏覽事件)、PurchaseEvent(購買事件)。各事件格式以下：

loginEvent = {
     type: 'login',  // 必填
     extra: Object,  // 附加鍵值對，格式 {String: String}
     method: String，  // 填本身的登陸方法
     success: Boolean
 }

registerEvent = {
     type: 'register',  // 必填
     extra: Object,  // 附加鍵值對，格式 {String: String}
     method: String，  // 填本身的登陸方法
     success: Boolean
 }

purchaseEvent = {
    type: 'purchase', // 必填
    extra: Object,  // 附加鍵值對，格式 {String: String}
    goodsType: String,
    goodsId: String,
    goodsName: String,
    success: Boolen,
    price: float,
    currency: String, // CNY, USD
    count: int
}

browseEvent = {
    type: 'browse',
    id: String,
    extra: Object,  // 附加鍵值對，格式 {String: String}
    name: String,
    contentType: String,
    duration: float
}
      
countEvent = {
     type: 'count',
     extra: Object,  // 附加鍵值對，格式 {String: String}
     id: String
}
     
calculateEvent = {
     type: 'calculate',
     extra: Object,  // 附加鍵值對，格式 {String: String}
     id: String,
     value: double
}

使用示例：

onLoginPress = () => {
    var LoginEvent = {
      type: 'login',
      extra: {
        userId: "user1"
      },
      method: "login",
      success: true
    };
    JAnalyticsModule.postEvent(LoginEvent);
  }

---

做者：KenChoi - 極光推送

原文：React Native 輕鬆集成統計功能（Android 篇）

知乎專欄：極光日報