likes
comments
collection
share

React Native项目如何接Hubble埋点介绍了在跨平台（react native）的项目中如何接入hubble

作者站长头像
站长
· 阅读数 29

Hubble介绍

网易哈勃数据是新一代用户行为分析产品，定位于为用户提供全套的数据解决方案。主要特点包括：

  • 实时多维分析：提供五种自定义分析模型，支持用户对产品进行深入分析
  • 用户分析：从多种角度对用户进行分析，帮助产品深入洞察用户
  • 数据看板：各个用户搭建属于自己的数据门户系统
  • 数据资产沉淀：我们帮助产品方搭建数据属于自己的数据仓库，完美支持更多数据深度分析

主要功能包括：

  • 应用统计：提供基本的数据统计指标，帮助产品方快速了解产品情况
  • 数据看板
  • 用户行为分析：事件分析、漏斗分析、留存分析、粘性分析、路径分析
  • 实时分析
  • 用户分析：用户分群、用户分析、用户详情
  • 产品管理：权限管理、应用管理、事件管理
  • 数据采集：iOS、Android、JS、Server hubble接入参考文档：hubble.netease.com/

RN接Hubble分析

由于Hubble提供的SDK只支持iOS、Android、JS、Server，并不直接支持React Native跨平台的相关接入配置，因此决定使用JS与原生通信的方式去接hubble，首先需要一个Module（ios/Android）,暴露方法给JS调用。实际还是由原生去处理Hubble的埋点，本文的所有实现均以iOS一侧为例。

具体接入实现

创建Module（iOS、Android）

创建module相关可以参考React Native官网的相关文档，传送门如下(iOS为例)：

React Native项目如何接Hubble埋点介绍了在跨平台（react native）的项目中如何接入hubble

配置Hubble

在react-native-hubble.podspec中引入Hubble的SDK（iOS）如下：

React Native项目如何接Hubble埋点介绍了在跨平台（react native）的项目中如何接入hubble 运行example工程，我这里是使用yarn的方式运行的，一定要在文件夹example目录下运行yarn，/example/ios路径下运行pod install，这样Hubble通过pod导入的SDK才能添加进来。可以在example目录下运行yarn ios运行也可以在/example/ios下通过Xcode打开运行

React Native项目如何接Hubble埋点介绍了在跨平台（react native）的项目中如何接入hubble 如上图所示可以在.h和.m文件开始配置hubble埋点的相关方法

.h文件

#import <React/RCTBridgeModule.h>

@interface Hubble : NSObject <RCTBridgeModule>

@end

.m文件

#import "Hubble.h"
#import <NEMobilytics/DATracker.h>

@implementation Hubble

RCT_EXPORT_MODULE()

// 事件捕捉
RCT_EXPORT_METHOD(trackEvent: (NSString *)eventId attributes: (NSDictionary *)attributes){
    [[DATracker sharedTracker] trackEvent:eventId withAttributes:attributes];
}

// 设置用户属性
RCT_EXPORT_METHOD(userInfo: (NSDictionary *)infos){
    DAPeople *people = [DATracker sharedTracker].people;
    [people set:infos];

}

// 用户登录
RCT_EXPORT_METHOD(hubbleLoginUser: (NSString *)userId){
    [[DATracker sharedTracker] loginUser: userId];
}

// 用户退出
RCT_EXPORT_METHOD(hubbleLogoutUser){
    [[DATracker sharedTracker] logoutUser];
}

// 页面捕捉
RCT_EXPORT_METHOD(trackScreen: (NSString *)screenName){
    [[DATracker sharedTracker] trackScreen:screenName];
}

@end

实现了埋点的相关方法后可以在example中的App.js文件中调试这些方式可不可用

js调用入口配置

给JS调用的统一入口主要在index.js里面，为了方便两端的使用，统一了方法，Android侧只需要 Module实现相同方法名即可，代码如下：

import {NativeEventEmitter, NativeModules, PermissionsAndroid, Platform} from 'react-native';

const {Hubble} = NativeModules;

class HubManage extends NativeEventEmitter {
  // 构造
  constructor(props) {
      super(Hubble);
      // 初始状态
      this.state = {};
  }

  // 用户登录
  hubbleLoginUser(userId){
    Hubble.hubbleLoginUser(userId)
  }

  // 用户退出
  hubbleLogoutUser(){
    Hubble.hubbleLogoutUser()
  }

  // 设置用户信息
  hubbleSetUserInfo(infos){
    Hubble.userInfo(infos)
  }

  // 事件捕捉
  hubbleTrackEvent(eventId, attributes){
    Hubble.trackEvent(eventId, attributes)
  }

  // 页面捕捉
  hubbleTrackScreen(screenName){
    Hubble.trackScreen(screenName)
  }
}

let HubbleManange = new HubManage();

export default HubbleManange;

RN项目中使用埋点

在我的React Native项目是通过yarn add的方式引入该Module的，引入后首先要做的就是启用初始化 1.启用 在 *AppDelegate.m application:didFinishLaunchingWithOptions 方法中调用如下方法，参数依次为 app key，版本和来源渠道。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  if ([[[NSBundle mainBundle] bundleIdentifier] hasSuffix:@"dev"]) {
    self.hubbleAppKeystr = @"xxx";
    self.hubbleAppChannel = @"Debuge";
  } else {
    self.hubbleAppKeystr = @"xxx";
    self.hubbleAppChannel = @"AppStore";
  }
  RCTBridge *bridge = [[ RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"xxx"
                                            initialProperties:nil];
  NSString *appVersion = [[[NSBundle mainBundle] infoDictionary] objectForKey:@"CFBundleShortVersionString"];
  
  //初始化启用hubble
  [[DATracker sharedTracker] startTrackerWithAppKey:self.hubbleAppKeystr appVersion:appVersion appChannel:self.hubbleAppChannel];
  
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

2.登录 在React Native项目中，用户登录后进行登录

HubbleManange.hubbleLoginUser('xxx')

3.设置用户信息

HubbleManange.hubbleSetUserInfo({key1: value1, key2: value2})

4.事件捕捉 需要注意的是hubble的事件捕捉方法需要在登录只有调用才有效果，在本项目中，对页面的切换进行埋点事件捕捉。

<AppContainer
  ref={(nav) => {
    this._navigator = nav
  }}
  onNavigationStateChange={(prevState, currentState) => {
    const currentRouteName = getActiveRouteName(currentState)
    const previousRouteName = getActiveRouteName(prevState)
    if (previousRouteName !== currentRouteName) {
      const attributes = {}
      attributes[currentRouteName] = currentRouteName
      HubbleManange.hubbleTrackEvent('Route_change', attributes)
      HubbleManange.hubbleTrackScreen(currentRouteName)
    }
  }}
/>
转载自:https://juejin.cn/post/7013239479888511006
评论
请登录