React Native 的友盟统计--打点/埋点

前言

友盟统计问题折腾了很久, 于是打算整理出来~ 希望能帮到你~~如果对 集成步骤 有疑惑的小伙伴
可以参考往期文章: React Native的友盟集成

Android, iOS统计

本文会带你把实时统计, 留存用户, 页面访问路径, 自定义事件等功能做完.

1.初始化

1-1 首先在MainActivity添加代码如下:

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

1-2 接着还是在该文件中添加~(设置统计的场景，以及发送间隔) 如下:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //ShareModule.initSocialSDK(this);
        //PushModule.initPushSDK(this);
        MobclickAgent.setSessionContinueMillis(1000);
        MobclickAgent.setScenarioType(this, EScenarioType.E_DUM_NORMAL);
        MobclickAgent.openActivityDurationTrack(false);
        //PushAgent.getInstance(this).onAppStart();
    }

1-3 最后是初始化

找到MainApplication, 进行实例化, 代码如下:

    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
        UMConfigure.setLogEnabled(true);
        //初始化组件化基础库, 统计SDK/推送SDK/分享SDK都必须调用此初始化接口
        RNUMConfigure.init(this, "59892f08310c9307b60023d0", "Umeng", UMConfigure.DEVICE_TYPE_PHONE,
            "669c30a9584623e70e8cd01b0381dcb4");
        //initUpush();

    }

其中, RNUMConfigure.init()的四个参数对应:
1.context 2.appkey 3.channel渠道 4.类型type 5.secret推送id

2.自定义事件接口调用

2-1 js文件处理

如果之前没做过RN, 这里应该会很头痛.一起填坑吧~ 哈哈~ ~
先去SDK的文件夹中找到AnalyticsUtil.js文件, 路径如下:

图1

接着, 把js文件添加进工程中~(没有特殊要求放哪, 只要自己文件夹分类清楚~)

2-2 统计接口调用

如果你之前正确集成了友盟, 那么只剩下: 统计接口调用了.
我们到RN的文件目录, 建个友盟接口的工具类, 比如叫UMTool.js.
代码内容如下:(不要直接抄~ 看完2-3哟~)

import {
    NativeModules,
    Platform
} from "react-native";
const um_util = NativeModules.UMAnalyticsModule;

/*** 分析模块 ***/

// 自定义事件发送
export function um_onEventWithMapAndCount(eventId_string, eventData_map, count_int) {
    um_util.onEventWithMapAndCount(eventId_string, eventData_map, count_int);
}

// 开始记录页面路径
export function um_onPageBegin(pageName_string) {
    um_util.onPageBegin(pageName_string);
}

// 停止记录页面路径
export function um_onPageEnd(pageName_string) {
    um_util.onPageEnd(pageName_string);
}

补充: 这里我用onEventWithMapAndCount, 但是官方还提供很多接口, 小伙伴们~ 请参考文档和代码食用~

2-3 重点神坑!!!

开始记录页面路径, iOS和Android的接口是不一样的! 细心的小伙伴会发现源码: iOS里调onPageBegin, Android里调onStartPage, 处理方式有两种,
1.你可以在AnalyticsModule.java中把源码接口onPageStart改成onPageBegin, 好处是: 改动小, 小伙伴读代码不困惑~ 我推荐这种~ 改后代码如下:

    @ReactMethod
    public void onPageBegin(String mPageName) {

        MobclickAgent.onPageStart(mPageName);

    }

2.你也可以麻烦点在工具类里添加Android系统的判断, 自己调用不同的接口~ 这里就不贴代码了~

3.页面访问路径

收集的数据要到第二天才能反映在友盟上.记得编辑描述页面哦~, 如下:

图2

4.事件ID配置

首先, 先要在友盟的后台设置好, 在应用设置中, 对事件ID配置(注意:Android和iOS是分开的, 所以都要配置一遍哦~)如下:

图3

通过源码, 我们可以看到, 打点只要把事件ID传进去就好了, 类似接口有很多, 挑了个参数最多的, 如下:

RCT_EXPORT_METHOD(onEventWithMapAndCount:(NSString *)eventId parameters:(NSDictionary *)parameters eventNum:(int)eventNum)
{
  if (eventId == nil || [eventId isKindOfClass:[NSNull class]]) {
    return;
  }
  if (parameters == nil && [parameters isKindOfClass:[NSNull class]]) {
    parameters = nil;
  }
  
  [MobClick event:eventId attributes:parameters counter:eventNum];
}

eventId: 传后台配置的事件ID,
parameters: 传自己配置的字典,
eventNum: 传事件发生次数.
这样, 我们就把自定义事件功能完成了~

最后

记得要勾选版本!!! 不然会没有数据的哦~ 如下:

图4

到这里Android与iOS的统计的工作都完成了~~ 如果有大家对友盟推送感兴趣的, 可以参考这篇文章:React Native的友盟推送~