The Hubble is introduced

Netease Hubble Data is a new generation of user behavior analysis products, positioning to provide users with a full range of data solutions. The main features include:

  • Real-time multidimensional analysis: Provides five customized analysis models for in-depth analysis of products
  • User analysis: analyze users from a variety of perspectives to help products gain insight into users
  • Data Kanban: Each user builds their own data portal system
  • Data asset precipitation: We help the product side to build their own data warehouse, which perfectly supports more in-depth data analysis

The main features include:

  • Application statistics: provide basic data statistics indicators to help product owners quickly understand the product situation
  • Data Board
  • User behavior analysis: event analysis, funnel analysis, retention analysis, stickiness analysis, path analysis
  • Real-time analysis
  • User analysis: User segmentation, user analysis, user details
  • Product management: Rights management, application management, and event management
  • Data collection: iOS, Android, JS, Server

Hubble Access Reference Document: hubble.netease.com/

RN receives Hubble analysis

The SDK provided by Hubble only supports iOS, Android, JS and Server, but does not directly support the React Native cross-platform access configuration, so WE decide to use JS and Native communication to answer Hubble. First you need a Module (ios/Android) that exposes methods to JS calls. In fact, the buried points of the Hubble are processed by the original. All the implementations of this paper take the iOS side as an example.

Specific access implementation

Create a Module (iOS, Android)

The React Native portal is as follows (for example, on iOS) :

  • IOS native modules: www.react-native.cn/docs/native…
  • Native module configuration: www.react-native.cn/docs/native…

Create-react-native Module is a library for creating modules on both ends. You can create a Module containing both ends and example by using commands. Create a module using create-react-native module –package-identifier XXXXX –generate-example Hubble

Configure the Hubble

The SDK (iOS) of Hubble introduced in react-Native – printe. podspec is as follows:

Run the example project. I’m using YARN. Make sure you run it in the example folderyarn, /example/ run in iospod installSo the SDK imported by Pod can be added. You can run it in the example directoryyarn iosRun can also be run from Xcode under /example/ios

As shown in the figure above, relevant methods of Hubble buried points can be configured at the beginning of. H and. M files

H file #import <React/RCTBridgeModule. H > @interface Hubble: NSObject <RCTBridgeModule> @endCopy the code
M file #import "printe.h" #import <NEMobilytics/ datracker.h > @implementation PRINteRCt_export_module () // event capture 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]; } // the user exits RCT_EXPORT_METHOD(hubbleLogoutUser){[[DATracker sharedTracker] logoutUser]; RCT_EXPORT_METHOD(trackScreen: (NSString *)screenName){[[DATracker sharedTracker] trackScreen:screenName]; } @endCopy the code

After implementing buried methods, you can debug them in the app.js file in Example

Js call entry configuration

The unified entry for JS invocation is mainly in index. JS. In order to facilitate the use of both ends, the unified method is adopted. On Android side, only Module needs to implement the same method name, and the code is as follows:

import {NativeEventEmitter, NativeModules, PermissionsAndroid, Platform} from 'react-native'; const {Hubble} = NativeModules; Class HubManage extends NativeEventEmitter {// Constructor (props) {super(Hubble); This. state = {}; {} / / the user login hubbleLoginUser (userId). The Hubble hubbleLoginUser (userId)} / / user exit hubbleLogoutUser () { HubbleLogoutUser ()} hubbleSetUserInfo(infOS){printe.userinfo (infOS)} // Event capture hubbleTrackEvent(eventId, attributes){ Hubble.trackEvent(eventId, Hubble. TrackScreen(screenName)}} let HubbleManange = new HubManage(); export default HubbleManange;Copy the code

Buried points are used in RN projects

In my React Native project, I introduced this Module through YARN Add, and the first thing I needed to do after introducing it was to enable initialization 1. Enabled in * AppDelegate. M application: didFinishLaunchingWithOptions method invoked in the following method, parameters of app key, versions and sources.

- (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"]; / / initialize enabled the 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; }Copy the code

2. Login In the React Native project, users log in to the React Native project

HubbleManange.hubbleLoginUser('xxx')
Copy the code

3. Set user information

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

4. Event capture It should be noted that the event capture method of Hubble needs to be effective only when invoked during login. In this project, buried event capture is performed for page switching.

<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) } }} />Copy the code