V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
jpush
V2EX  ›  推广

React Native 轻松集成统计功能(Android 篇)

  •  
  •   jpush · 2017-11-06 14:09:18 +08:00 · 2232 次点击
    这是一个创建于 2574 天前的主题,其中的信息可能已经有所发展或是发生改变。

    关于推送的集成请参考这篇文章,本篇文章将引导你集成统计功能,只需要简单的三个步骤就可以集成统计功能。

    第一步 安装

    在你的项目路径下执行命令:

    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 - 极光( JPush 为极光推送团队账号,欢迎关注)

    原文:React Native 轻松集成统计功能( Android 篇)

    知乎专栏:极光日报

    1 条回复    2017-11-08 14:08:14 +08:00
    Aceyclee
        1
    Aceyclee  
       2017-11-08 14:08:14 +08:00
    cool !
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2645 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 02:58 · PVG 10:58 · LAX 18:58 · JFK 21:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.