React Native 全埋點實現原理(內附第四期送書活動)

點擊上方「技術最TOP」,星標公衆號javascript


重磅乾貨,第一時間送達


本文主要介紹如何實現 React Native 的全埋點,主要是控件點擊 $AppClick 事件。該內容,會默認你有必定的 React Native 開發經驗,(若沒有,也可參與文末贈書)
css

舒適提示:文末附贈書。
java



1、React Native 簡介
React Native 是由 Facebook 推出的移動應用開發框架,能夠用來開發 iOS、Android、Web 等跨平臺應用程序,官網爲:
https://facebook.github.io/react-native/。


React Native 和傳統的 Hybrid 應用最大的區別就是它拋開了 WebView 控件。React Native 產出的並非「網頁應用」、「HTML5 應用」或者「混合應用」,而是一個真正的移動應用,從使用感覺上和用 Objective-C 或 Java 編寫的應用相比幾乎是沒有區分的。React Native 所使用的基礎 UI 組件和原生應用徹底一致。咱們要作的就是把這些基礎組件使用 JavaScript 和 React 的方式組合起來。React Native 是一個很是優秀的跨平臺框架。react

下面咱們先用 React Native 建立一個簡單的 Demo。ios


1.1nginx

建立項目git


使用 React Native 開發移動應用, 首先須要安裝 React Native 相關的組件。具體的安裝方法,能夠參照 React Native 官方介紹。程序員

React Native 安裝完成以後,就可使用命令行工具建立新項目了。github


react-native init AwesomeProject


上面的命令建立了一個名爲 AwesomeProject 的項目,而後就能夠經過下面的命令進入 AwesomeProject 文件夾並運行 iOS 程序。web

  
  
  
   
   
            
   
   

  
  
  
   
   
            
   
   
cd AwesomeProjectreact-native run-ios

而後等待一會,iOS 模擬器將會啓動,就能夠看到以下圖 1-1 所示的運行結果。


圖 1-1 模擬器


在命令行輸入下面的命令,Xcode 將會打開上面建立的 AwesomeProject 項目。


open ./ios/AwesomeProject.xcworkspace
Xcode 中,就能夠看到 AwesomeProject 項目相關的代碼。 首先,須要把 SensorsSDK 項目添加進來。 Xcode 中,點擊  File → Add Files to "AwesomeProject" ...,會彈出以下圖 1-2 所示的對話框,選擇 SensorsSDK.xcodeproj 文件,並勾選相應的 Target,最後點擊 Add 按鈕。


圖 1-2 添加項目

而後,還須要添加相應的依賴關係。選中 AwesomeProject 項目,在 General 標籤的 Frameworks 欄中點擊加號(+)按鈕,添加 SensorsSDK.framework。

最後, AppDelegate.m 中引入 SensorsSDK,並在 - application:didFinishLaunchingWithOptions: 方法中調用 SensorsAnalyticsSDK 的 - startWithServerURL: 初始化方法初始化 SDK。


#import <SensorsSDK/SensorsSDK.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ [SensorsAnalyticsSDK startWithServerURL:@"xxxxx"]; ......
return YES;}
@end


運行 AwesomeProject 項目,咱們就能夠在 Xcode 控制檯中看到 $AppStart 事件信息。


{ "properties": { "$model": "x86_64", "$manufacturer": "Apple", "$lib_version": "1.0.0", "$os": "iOS", "$app_version": "1.0", "$os_version": "12.3", "$lib": "iOS" }, "event": "$AppStart", "time": 1576141146301, "distinct_id": "D13CE550-1EE4-45B4-AB83-CDF7601C9C77"}


按 Home 鍵或上滑 HomeBar 讓應用程序進入後臺,將會在 Xcode 控制檯中看到 $AppEnd 事件。


{ "properties": { "$model": "x86_64", "$manufacturer": "Apple", "$lib_version": "1.0.0", "$os": "iOS", "$event_duration": 434917.40625, "$app_version": "1.0", "$os_version": "12.3", "$lib": "iOS" }, "event": "$AppEnd", "time": 1576141581203, "distinct_id": "D13CE550-1EE4-45B4-AB83-CDF7601C9C77"}


從而也能夠說明,對於 React Native 項目的 $AppStart 和 $AppEnd 事件,咱們無需作任何特殊處理,便可直接支持。

其實在控制檯中也會打印頁面瀏覽($AppViewScreen)事件,可是這個事件在嚴格意義上來講不該該屬於 ReactNative 應用程序的頁面瀏覽事件,這個只是應用程序中的 UIWindow 控件的根視圖控制器的頁面瀏覽事件。而實際上在 React Native 中,是使用 react-navigation 進行頁面間的跳轉。對於 iOS 來講,跳轉的新頁面並非一個視圖控制器,而是彈出一個視圖,所以並不能採集到正確的頁面瀏覽事件。


1.2

基礎控件

React Native 支持的控件有不少,詳細能夠參照 React Native 官網的相關介紹和說明:
https://facebook.github.io/react-native/docs/activityindicator。
下面咱們以 React Native 的 Switch 控件爲例來作介紹。
能夠經過修改 AwesomeProject 項目中的 App.js 文件,在頁面中添加一個 Switch 組件。
import React, { Component } from 'react';import { SafeAreaView, StyleSheet, ScrollView, View, Text, Switch, StatusBar,} from 'react-native';
import { Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions,} from 'react-native/Libraries/NewAppScreen';
export default class App extends Component { state = { value: false, } render() { return ( <> <StatusBar barStyle="dark-content" /> <SafeAreaView> <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}> <Header /> {global.HermesInternal == null ? null : ( <View style={styles.engine}> <Text style={styles.footer}>Engine: Hermes</Text> </View> )} <View style={styles.body}> <View style={styles.sectionContainer}> <Text style={styles.sectionTitle}>Components</Text> <View style={styles.sectionContainer}> <Switch style={{ marginLeft: 20 }} value={this.state.value} thumbColor='black' onValueChange={(value) => { this.setState({ value: value }) }} /> </View> </View> </View> </ScrollView> </SafeAreaView> </> ); }};
const styles = StyleSheet.create({ body: { backgroundColor: Colors.white, }, sectionContainer: { marginTop: 32, paddingHorizontal: 24, },});


使用 Xcode 運行應用程序,能夠獲得以下圖 1-3 顯示效果。



圖 1-3 運行效果

React Native 的 Switch 控件和 iOS 原生中的 UISwitch 控件是相似的。打開或者關閉 Switch,在 Xcode 的控制檯中,都可以看到正常觸發了 $AppClick 事件 。


{ "properties": { "$model": "x86_64", "$manufacturer": "Apple", "$element_type": "RCTSwitch", "$lib_version": "1.0.0", "$os": "iOS", "$element_content": "checked", "$app_version": "1.0", "$screen_name": "UIViewController", "$os_version": "12.3", "$lib": "iOS" }, "event": "$AppClick", "time": 1576142976118, "distinct_id": "E934E526-6517-4CA1-A61E-0DCE2172D56A"}


從而也能夠看出,即便咱們在 SensorsSDK 中沒有作任何修改,也能夠正常採集 React Native 中 Switch 控件的點擊事件。從 $element_type 屬性能夠看到,在 React Native 中,Switch 控件所對應的類是 RCTSwitch 。

下面,咱們繼續查看 RCTSwitch 相關的源碼。

RCTSwitch.h 定義以下:


/** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */
#import <UIKit/UIKit.h>
#import <React/RCTComponent.h>
@interface RCTSwitch : UISwitch
@property (nonatomic, assign) BOOL wasOn;@property (nonatomic, copy) RCTBubblingEventBlock onChange;
@end


RCTSwitch.m 實現以下:


/** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */
#import "RCTSwitch.h"
#import "RCTEventDispatcher.h"#import "UIView+React.h"
@implementation RCTSwitch
- (void)setOn:(BOOL)on animated:(BOOL)animated { _wasOn = on; [super setOn:on animated:animated];}
@end


從代碼中能夠看出,RCTSwitch 實際上是繼承自 UISwitch 的子類控件。在前面的章節,咱們已經在 SensorsSDK 中實現了 iOS 原生 UISwitch 控件的 $AppClick 事件全埋點,因此天然也就支持了 React Native 的 RCTSwitch 控件的 $AppClick 事件全埋點。

在 React Native 中,相似於 Switch 控件的還有 Slider、SegmentedControlIOS 等控件。所以,對於這些控件來講,已能夠支持採集它們的 $AppClick 事件。可是,對於 React Native 中的 Button 控件來講,狀況就不太同樣了。

咱們能夠先試驗一下,修改 App.js 文件, 在頁面中 UISwitch 控件的下方添加一個Button 控件。


import React, { Component } from 'react';import { SafeAreaView, StyleSheet, ScrollView, View, Text, Switch, Button, Alert, StatusBar,} from 'react-native';
import { Header, Colors,} from 'react-native/Libraries/NewAppScreen';
export default class App extends Component { state = { value: false, } render() { return ( <> <StatusBar barStyle="dark-content" /> <SafeAreaView> <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}> <Header /> {global.HermesInternal == null ? null : ( <View style={styles.engine}> <Text style={styles.footer}>Engine: Hermes</Text> </View> )} <View style={styles.body}> <View style={styles.sectionContainer}> <Text style={styles.sectionTitle}>Components</Text> <View style={styles.sectionContainer}> <Switch style={{ marginLeft: 20 }} value={this.state.value} thumbColor='black' onValueChange={(value) => { this.setState({ value: value }) }} /> </View> <View style={styles.sectionContainer}> <Button title="Press me" onPress={() => Alert.alert('Simple Button pressed')} /> </View> </View> </View> </ScrollView> </SafeAreaView> </> ); }};
const styles = StyleSheet.create({ scrollView: { backgroundColor: Colors.lighter, }, engine: { position: 'absolute', right: 0, }, body: { backgroundColor: Colors.white, }, sectionContainer: { marginTop: 32, paddingHorizontal: 24, }, sectionTitle: { fontSize: 24, fontWeight: '600', color: Colors.black, }, highlight: { fontWeight: '700', }, footer: { color: Colors.dark, fontSize: 12, fontWeight: '600', padding: 4, paddingRight: 12, textAlign: 'right', },});


保存,能夠看到在 Switch 控件的下方就出現了咱們剛添加的按鈕。點擊按鈕,彈出了一個提示窗口,和 iOS 系統裏的 UIAlert 的顯示效果相同,以下圖 1-4 所示。



圖 1-4 提示窗口

可是此時,咱們在 Xcode 的控制檯中並無看到觸發了 $AppClick 事件。

那麼咱們如何實現 React Native 中 Button 控件的 $AppClick 事件全埋點呢?


2、React Native 全埋點


在實現 Button 控件的 $AppClick 事件全埋點以前,咱們先簡單的介紹一下 React Native 的事件響應機制。


2.1

事件響應


在 React Native 中,觸摸事件響應會涉及到 JavaScript 端和 Native 端,這裏的 Native 端指的是 iOS 端,本章的內容暫不涉及 Android 部分。

咱們使用 Xcode 打開 AwesomeProject 項目,查看 Pod 工程中 React Native 的源碼,經過類名咱們很容易找到兩個與觸摸事件相關的類:

  • RCTTouchEvent

  • RCTTouchHandler

RCTTouchEvent 類實現了 RCTEvent 協議。從觸摸開始、移動到觸摸結束或取消,都會建立一個 RCTTouchEvent 類的對象,用來描述觸摸的各個不一樣階段。在 Native 端,將觸摸狀態發送到 JavaScript 端的過程當中,傳遞的也是 RCTTouchEvent 類的對象。其實, RCTTouchEvent 類的對象就是在 RCTTouchHandler 類中建立的。


RCTTouchHandler 類繼承自 


UIGestureRecognizer 類,也就是說


RCTTouchHandler 類其實就是一個手勢識別器,它重寫了觸摸響應傳遞的如下幾個方法。


- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)touchesMoved:(NSSet
*)touches withEvent:(UIEvent *)event;
- (void)touchesEnded:(NSSet
*)touches withEvent:(UIEvent *)event;
- (void)touchesCancelled:(NSSet
*)touches withEvent:(UIEvent *)event;


事實上,以上幾個方法都會調用  - _updateAndDispatchTouches:eventName: 方法。在該方法中,使用 RCTTouchEvent 類的對象來描述當前的觸摸狀態。因爲 RCTTouchHandler 類也是一個手勢識別器,所以須要將其添加到一個視圖中才能響應觸摸事件。


咱們先來看看, AwesomeProject 項目 AppDelegate.m 文件中- application:didFinishLaunchingWithOptions: 方法的實現。


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{  [SensorsAnalyticsSDK startWithServerURL:@"xxxx"]; [[SensorsAnalyticsSDK sharedInstance] enableTrackReactNativeEvent];
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"AwesomeProject" initialProperties:nil];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; UIViewController *rootViewController = [UIViewController new]; rootViewController.view = rootView; self.window.rootViewController = rootViewController; [self.window makeKeyAndVisible]; return YES;}
能夠看到,首先建立了一個  RCTRootView 對象做爲一個視圖控制器的視圖,而後將該視圖控制器設置爲 window 對象的根視圖控制器。在 RCTRootView 類中,有一個很重要的視圖對象,即 RCTRootContentView 類型的  _contentView。
這個視圖對象是在 JavaScript 包加載完成以後建立的。在 React Native 中,全部 JavaScript 端生成的頁面其實都是添加在這個視圖對象中。在 _contentView 建立的時候,同時也會建立 RCTTouchHandler 類的對象並調用 - attachToView: 方法,將手勢識別器添加到 _contentView 中。這也就意味着,在 _contentView 中發生的全部觸摸事件都會交由 RCTTouchHandler 類的對象進行處理。
那麼,是否交換了 RCTTouchHandler 類的  - _updateAndDispatchTouches:eventName: 方法就能夠採集到控件的 $AppClick 事件了呢?
雖然咱們經過這種方法,能接收到全部的觸摸事件,可是在這個方法中,咱們沒法知道在 JavaScript 端究竟是哪一個控件響應了觸摸事件。所以,此種實現方案並不可取,不能知足咱們實際的全埋點採集需求。


咱們繼續往下分析。

在 RCTTouchHandler 類的對象進行處理完成以後,會經過一系列方法將觸摸事件發送到 JavaScript 端。在 JavaScript 端也實現了相似於 Native 端的觸摸事件處理機制——手勢響應系統。每一個觸摸事件均可以經過手勢響應系統找到可以響應的組件,並執行響應事件。當觸摸事件找到響應者時,會觸發 ReactNativeGlobalResponderHandler.js 的 onChange 方法,相關代碼片斷以下。


// Module provided by RN:var ReactNativeGlobalResponderHandler = { onChange: function(from, to, blockNativeResponder) { if (to !== null) { var tag = to.stateNode._nativeTag; ReactNativePrivateInterface.UIManager.setJSResponder( tag, blockNativeResponder ); } else { ReactNativePrivateInterface.UIManager.clearJSResponder(); } }};


從上面的代碼能夠看出,當響應控件觸摸事件的時候,JavaScript 端會調用 UIManager 中的 - setJSResponder: 方法,而後調用 

Native 端的 RCTUIManager 類中的 


- setJSResponder:blockNativeResponder: 方法。該方法的實現代碼較少,參考以下。
/** * JS sets what *it* considers to be the responder. Later, scroll views can use * this in order to determine if scrolling is appropriate. */RCT_EXPORT_METHOD(setJSResponder:(nonnull NSNumber *)reactTag blockNativeResponder:(__unused BOOL)blockNativeResponder){ [self addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) { _jsResponder = viewRegistry[reactTag]; if (!_jsResponder) { RCTLogWarn(@"Invalid view set to be the JS responder - tag %@", reactTag); } }];}


這個方法有兩個參數,經過第一個參數 reactTag 咱們能夠獲取到響應者。

介紹到這裏,咱們已經有實現 React Native 中 Button 控件 $AppClick 事件的全埋點方案了,那就是交換 RCTUIManager 類中的 - setJSResponder:blockNativeResponder: 方法。


2.2

$AppClick 事件


下面,咱們詳細介紹實現步驟。

第一步在項目 SensorsSDK 中給 SensorsAnalyticsSDK 

新增一個類別 ReactNative,並新增一個 

- enableTrackReactNativeEvent 方法,用來開啓 React Native 中 $AppClick 事件的全埋點功能。

在 SensorsAnalyticsSDK.h 文件中,類別 ReactNative 聲明以下:


@interface SensorsAnalyticsSDK (ReactNative)
- (void)enableTrackReactNativeEvent;
@end


在 SensorsAnalyticsSDK.m 文件中,類別 ReactNative 實現以下:


#import <objc/runtime.h>
@implementation SensorsAnalyticsSDK (ReactNative)
/*** 交換兩個方法的實現** @param className 須要交換的類名稱* @param methodName1 被交換的方法名,即原始的方法* @param methodName2 交換後的方法名,即新的實現方法* @param method2IMP 交換後的方法實現*/static inline void sensorsdata_method_exchange(const char *className, const char *methodName1, const char *methodName2, IMP method2IMP) { // 經過類名獲取類 Class cls = objc_getClass(className); // 獲取原始方法的名 SEL selector1 = sel_getUid(methodName1); // 經過方法名獲取方法指針 Method method1 = class_getInstanceMethod(cls, selector1); // 得到指定方法的描述 struct objc_method_description *desc = method_getDescription(method1); if (desc->types) { // 把交換後的實現方法註冊到 runtime 中 SEL selector2 = sel_registerName(methodName2); // 經過運行時,把方法動態添加到類中 if (class_addMethod(cls, selector2, method2IMP, desc->types)) { // 獲取實例方法 Method method2 = class_getInstanceMethod(cls, selector2); // 交換方法 method_exchangeImplementations(method1, method2); } }}
- (void)enableTrackReactNativeEvent { sensorsdata_method_exchange("RCTUIManager", "setJSResponder:blockNativeResponder:", "sensorsdata_setJSResponder:blockNativeResponder:", (IMP)sensorsdata_setJSResponder);}
static void sensorsdata_setJSResponder(id obj, SEL cmd, NSNumber *reactTag, BOOL blockNativeResponder) {
}
@end


   


第二步:實現交換後的 
sensorsdata_setJSResponder 函數。


在該函數中,須要作三件事情:

1. 調用原始的方法,保證 React Native 能夠繼續完成觸摸事件的響應

2. 獲取觸發事件響應的視圖控件

3. 觸發 $AppClick 事件

完整的代碼實現以下:


@implementation SensorsAnalyticsSDK (ReactNative)
......
static void sensorsdata_setJSResponder(id obj, SEL cmd, NSNumber *reactTag, BOOL blockNativeResponder) { // 先執行原來的方法 SEL oriSel = sel_getUid("sensorsdata_setJSResponder:blockNativeResponder:"); // 獲取原始方法的實現函數指針 void (*imp)(id, SEL, id, BOOL) = (void (*)(id, SEL, id, BOOL))[obj methodForSelector:oriSel]; // 完成第一步調用原始方法,讓 React Native 完成事件響應 imp(obj, cmd, reactTag, blockNativeResponder);
dispatch_async(dispatch_get_main_queue(), ^{ // 獲取 viewForReactTag: 的方法名,目的是獲取觸發當前觸摸事件的控件 SEL viewForReactTagSelector = NSSelectorFromString(@"viewForReactTag:"); // 完成第二步,獲取響應觸摸事件的視圖 UIView *view = ((UIView * (*)(id, SEL, NSNumber *))[obj methodForSelector:viewForReactTagSelector])(obj, viewForReactTagSelector, reactTag);
// 觸發 $AppClick 事件 [[SensorsAnalyticsSDK sharedInstance] trackAppClickWithView:view properties:nil]; });}
@end
第三步:在 AppDelegate.m 的 
- application:(UIApplication *)application didFinishLaunchingWithOptions: 中,初始化 SDK 以後,調用 SensorsAnalyticsSDK 的 - enableTrackReactNativeEvent 方法開啓 React Native 的 $AppClick 事件全埋點。
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ [SensorsAnalyticsSDK startWithServerURL:@"xxxx"]; [[SensorsAnalyticsSDK sharedInstance] enableTrackReactNativeEvent];
......
return YES;}
......
@end


第四步:測試驗證。

運行 AwesomeProject 項目,點擊 Press me 按鈕,在 Xcode 控制檯中能夠看到 $AppClick 事件。


{ "properties": { "$model": "x86_64", "$manufacturer": "Apple", "$element_type": "RCTView", "$lib_version": "1.0.0", "$os": "iOS", "$app_version": "1.0", "$screen_name": "UIViewController", "$os_version": "12.3", "$lib": "iOS" }, "event": "$AppClick", "time": 1576146363711, "distinct_id": "E934E526-6517-4CA1-A61E-0DCE2172D56A"}
可是,咱們發現沒有 $element_content 屬性,其實按鈕上是有文本的(Press me)。
也就是說以前獲取視圖控件顯示內容的方法並無覆蓋到 React Native 的控件,所以須要修改以前實現的  UIView+SensorsData.m 中獲取控件顯示內容的擴展方法  - sensorsdata_elementContent。


經過 RCTView 的源碼可知,獲取控件上的內容能夠經過 accessibilityLabel 屬性進行獲取,所以在 - sensorsdata_elementContent 方法中,當獲取到的內容爲空時,返回 accessibilityLabel 屬性便可。


@implementation UIView (SensorsData)
- (NSString *)sensorsdata_elementContent { // 若是是隱藏控件,則不獲取控件內容 if (self.isHidden || self.alpha == 0) { return nil; } // 初始化數組,用於保存子控件的內容 NSMutableArray *contents = [NSMutableArray array]; for (UIView *view in self.subviews) { // 獲取子控件的內容 // 若是子類有內容,例如:UILabel 的 text,獲取到的就是 text 屬性; // 若是沒有就遞歸調用此方法,獲取其子控件的內容。 NSString *content = view.sensorsdata_elementContent; if (content.length > 0) { // 當該子控件中有內容時,保存在數組中 [contents addObject:content]; } } // 當未獲取到子控件內容時返回空。若是獲取到多個子控件內容時,使用 - 拼接 return contents.count == 0 ? self.accessibilityLabel : [contents componentsJoinedByString:@"-"];}
@end


再次運行 AwesomeProject 項目,點擊 Press me 按鈕,就能看到 $AppClick 事件已有 $element_content 屬性了。


{ "properties": { "$model": "x86_64", "$manufacturer": "Apple", "$element_type": "RCTView", "$lib_version": "1.0.0", "$os": "iOS", "$element_content": "Press me", "$app_version": "1.0", "$screen_name": "UIViewController", "$os_version": "12.3", "$lib": "iOS" }, "event": "$AppClick", "time": 1576146741159, "distinct_id": "E934E526-6517-4CA1-A61E-0DCE2172D56A"}


不過問題並無就此結束!當點擊 Switch 控件的時候,發現會觸發兩次 $AppClick 事件。以前有提到一些特殊的控件其實已經支持了採集 $AppClick 事件,可是當點擊這些控件的時候,React Native 一樣也會走觸摸事件的響應流程,所以形成了觸發兩次 $AppClick 事件。對於這種狀況,咱們須要在採集 React Native 的 $AppClick 事件時,把這些特殊的控件給剔除。修改 sensorsdata_setJSResponder 函數的實現,在觸發 $AppClick 事件以前判斷若是是 UIControl 類的控件直接返回。


@implementation SensorsAnalyticsSDK (ReactNative)
......
static void sensorsdata_setJSResponder(id obj, SEL cmd, NSNumber *reactTag, BOOL blockNativeResponder) { // 先執行原來的方法 SEL oriSel = sel_getUid("sensorsdata_setJSResponder:blockNativeResponder:"); // 獲取原始方法的實現函數指針 void (*imp)(id, SEL, id, BOOL) = (void (*)(id, SEL, id, BOOL))[obj methodForSelector:oriSel]; // 完成第一步調用原始方法,讓 React Native 完成事件響應 imp(obj, cmd, reactTag, blockNativeResponder);
dispatch_async(dispatch_get_main_queue(), ^{ // 獲取 viewForReactTag: 的方法名,目的是獲取觸發當前觸摸事件的控件 SEL viewForReactTagSelector = NSSelectorFromString(@"viewForReactTag:"); // 完成第二步,獲取響應觸摸事件的視圖 UIView *view = ((UIView * (*)(id, SEL, NSNumber *))[obj methodForSelector:viewForReactTagSelector])(obj, viewForReactTagSelector, reactTag); // 若是是 UIControl 的子類,例如:RCTSwitch、RCTSlider 等,直接返回 if ([view isKindOfClass:UIControl.class]) { return; } // 觸發 $AppClick 事件 [[SensorsAnalyticsSDK sharedInstance] trackAppClickWithView:view properties:nil]; });}
@end


若是此時你覺得已經考慮到了全部狀況,那你就錯了。當咱們滾動頁面的時候,一樣也會觸發 $AppClick 事件 !


{ "properties": { "$model": "x86_64", "$manufacturer": "Apple", "$element_type": "RCTScrollView", "$lib_version": "1.0.0", "$os": "iOS", "$element_content": "Welcome to React-Components-checked-Press me", "$app_version": "1.0", "$screen_name": "UIViewController", "$os_version": "12.3", "$lib": "iOS" }, "event": "$AppClick", "time": 1576147089922, "distinct_id": "E934E526-6517-4CA1-A61E-0DCE2172D56A"}


這是由於在滾動頁面時,React Native 的 JavaScript 端一樣會回調該響應方法,所以這種狀況一樣須要排除在外。


咱們經過代碼實現發現,在滾動頁面時,在  sensorsdata_setJSResponder 函數中獲取到的視圖實際上是 RCTScrollView 類型的。所以,實現也比較簡單。
@implementation SensorsAnalyticsSDK (ReactNative)
......
static void sensorsdata_setJSResponder(id obj, SEL cmd, NSNumber *reactTag, BOOL blockNativeResponder) { // 先執行原來的方法 SEL oriSel = sel_getUid("sensorsdata_setJSResponder:blockNativeResponder:"); // 獲取原始方法的實現函數指針 void (*imp)(id, SEL, id, BOOL) = (void (*)(id, SEL, id, BOOL))[obj methodForSelector:oriSel]; // 完成第一步調用原始方法,讓 React Native 完成事件響應 imp(obj, cmd, reactTag, blockNativeResponder);
dispatch_async(dispatch_get_main_queue(), ^{ // 獲取 viewForReactTag: 的方法名,目的是獲取觸發當前觸摸事件的控件 SEL viewForReactTagSelector = NSSelectorFromString(@"viewForReactTag:"); // 完成第二步,獲取響應觸摸事件的視圖 UIView *view = ((UIView * (*)(id, SEL, NSNumber *))[obj methodForSelector:viewForReactTagSelector])(obj, viewForReactTagSelector, reactTag); // 若是是 UIControl 的子類,例如:RCTSwitch、RCTSlider 等,直接返回 // 若是是 RCTScrollView,說明是在滑動的響應,並非控件的點擊 if ([view isKindOfClass:UIControl.class] || [view isKindOfClass:NSClassFromString(@"RCTScrollView")]) { return; } // 觸發 $AppClick 事件 [[SensorsAnalyticsSDK sharedInstance] trackAppClickWithView:view properties:nil]; });}
@end


到此,咱們已實現了 React Native 的 $AppClick 事件的全埋點。

第四期贈書活動

本次送出《iOS 全埋點解決方案》3 本,贈書方式以下:

1. 點贊本篇推文

2. 小程序參與抽獎


■ 做者介紹


王灼洲 合肥研發中心負責人

《Android 全埋點解決方案》和《iOS 全埋點解決方案》一書做者,有 10+ 年 Android & iOS 相關開發經驗,是國內第一批從事 Android 研發工做,開發和維護國內第一個商用的開源 Android & iOS 數據埋點 SDK。


最後,你們想看啥書,能夠在評論區留言,後面送書活動我跟贊助方商量一下,送你們想要的書籍,另外,下週還有一期送書活動,將要送的書是《深刻理解Kotlin協程》,敬請期待。

---END---


推薦閱讀:
一款高仿 Eyepetizer | 開眼短視頻的 MVVM 開源項目
面試官:Java序列化和反序列化爲何要實現Serializable接口?
微信客戶端跨平臺開發框架演進!
JetPack之Paging3.0簡單上手指南!
Java中當對象再也不使用時,不賦值爲null會致使什麼後果 ?
iOS 14從Android 中"竊取" 了這8個有用的功能
面試被問「紅黑樹」,我一臉懵逼......
【譯】使用Kotlin從零開始寫一個現代Android 項目-Part4
牛逼了!騰訊是如何使用 Git ?
程序員下班關閉顯示器,卻從不關電腦,你知道爲何嗎?
爬取周杰倫新歌《Mojito》MV彈幕,看看粉絲們都說的些啥!
微信、QQ、淘寶掃碼登陸是怎麼實現的?
「文末送書」|那些消失的安卓技術博主們!
Jetpack 最新成員 AndroidX App Startup 實踐以及原理分析
5G爭奪戰!看看5G設備商最新排名!


更文不易,點個「在看」支持一下👇

本文分享自微信公衆號 - 技術最TOP(Tech-Android)。
若有侵權,請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。

相關文章
相關標籤/搜索