iOS全埋点解决方案-APP和H5打通

2022-06-21 10:23 由任淏发表于 #移动端开发

前言

所谓的 APP 和 H5 打通，是指 H5 集成 JavaScript 数据采集 SDK 后，H5 触发的事件不直接同步给服务器，而是先发给 APP 端的数据采集 SDK，经过 APP 端数据采集 SDK 二次加工处理后存入本地缓存再进行同步。

一、App 与 H5 打通原因

1.1 数据丢失率

APP 端采集数据的丢失率一般在 1% 左右，而 H5 采集数据的丢失率一般在 5% 左右（主要是因为缓存，网络或切换界面等原因）。因此，如果 APP 与 H5 打通，H5所有事件都可以先发给 APP 端数据采集 SDK，经过 APP 端二次加工处理后并入本地数据库，在符合特定策略后进行数据同步，即可把数据丢失率由 5% 降低到 1% 左右。

1.2 数据准确性

众所周知，H5 无法直接获取设备的相关信息，只能通过解析 UserAgeng 获取有限的信息，而解析 UserAgent 值，至少会面临下面的问题。

（1）有些信息通过解析 UserAgent 值根本获取不到，比如应用程序的版本号等。

（2）有些信息通过解析 UserAgent 值可以获取到，但是内容可能不正确。

如果 APP 和 H5 打通，由 APP 端数据采集 SDK 补充这些信息，即可确保事件信息的准确性和完整性。

1.3 用户标识

对于用户在 APP 端注册或者登录之前，我们一般都是使用用户匿名 ID 来标识用户。而 APP 和 H5 标识匿名用户的规则不一样。进而导致一个用户出现两个匿名 ID 的情况。如果 APP 和 H5 打通，就可以将两个匿名 ID 做归一化处理。

APP 和 H5 打通的方案有一下两种。

通过拦截 WebView 请求进行打通。
通过 JavaScript 与 WebView 相互调用进行打通。

二、方案一：拦截请求

拦截 WebView 发送的 URL 请求，即如果是协定好的特定格式，可进行拦截并获取事件数据。如果不是，让请求继续加载。此时 JavaScript SDK 就需要知道，当前 H5 是在 APP 端显示环视在 Safari 浏览器显示，只有在 APP 端显示时，H5 触发事件后，JavaScript SDK 才能向 APP 发送特定的 URL 请求进行打通；如果是在 Safari 浏览器显示，JavaScript SDK 也发送请求进行打通，会导致事件丢失。对于 iOS 应用程序来说，目前常用的方案是借助 UserAgent 来进行判断，即当 H5 在 APP 端显示时，我们可以通过在当前的 UserAgent 上追加一个特殊的标记，进而告知 JavaScript SDK 当前 H5 是在 APP 端显示并需要进行打通。

2.1 修改 UserAgent

我们可以通过下面的方法来修改 UserAgent

- (void)userAgent {
    // 创建一个空的 WKWebView
    self.webView = [[WKWebView alloc] initWithFrame:CGRectZero];
    // 创建一个 self 的弱引用，防止循环引用
    __weak typeof (self) weakSelf = self;
    // 执行 JavaScript 代码，获取 WKWebView 中的 UserAgent
    [self.webView evaluateJavaScript:@"navigator.userAgent" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        // 创建强引用
        __strong typeof (weakSelf) strongSelf = weakSelf;
        // 执行结果 result 为获取到的 UserAgent 值
        NSString *userAgent = result;
        // 给 UserAgent 追加自己需要的内容
        userAgent = [userAgent stringByAppendingString:@" /sa-sdk-ios "];
        // 将 UserAgent 字典内容注册到 NSUserDefault 中
        [[NSUserDefaults standardUserDefaults] registerDefaults:@{@"UserAgent": userAgent}];
        // 释放 webView
        strongSelf.webView = nil;
    }];
}

第一步：新增 SensorsAnalyticsSDK 的类别 WebView ，并新增 - addWebViewUserAgent: 方法声明

NS_ASSUME_NONNULL_BEGIN

@interface SensorsAnalyticsSDK (WebView)


/// 在 WebView 控件中添加自定义的 UserAgent，用于实现打通方案
/// @param userAgent 自定义的 UserAgent
- (void)addWebViewUserAgent:(nullable NSString *)userAgent;

@end

NS_ASSUME_NONNULL_END

第二步：实现 - addWebViewUserAgent: 方法，并修改 UserAgent 值

#import "SensorsAnalyticsSDK+WebView.h"

#import <WebKit/WebKit.h>

@interface SensorsAnalyticsSDK (WebView)

@property(nonatomic, strong) WKWebView *webView;

@end

@implementation SensorsAnalyticsSDK (WebView)

- (void)loadUserAgent:(void(^) (NSString *))completion {
    // 创建一个空的 WKWebView
    self.webView = [[WKWebView alloc] initWithFrame:CGRectZero];
    // 创建一个 self 的弱引用，防止循环引用
    __weak typeof (self) weakSelf = self;
    // 执行 JavaScript 代码，获取 WKWebView 中的 UserAgent
    [self.webView evaluateJavaScript:@"navigator.userAgent" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
      // 创建强引用
      __strong typeof (weakSelf) strongSelf = weakSelf;
      // 调用回调
        completion(result);
      // 释放 webView
      strongSelf.webView = nil;
    }];
}

- (void)addWebViewUserAgent:(nullable NSString *)userAgent {
    [self loadUserAgent:^(NSString *oldUserAgent) {
        // 给 UserAgent 添加自己的内容
        NSString *newUserAgent = [oldUserAgent stringByAppendingString:userAgent ?: @" /sa-sdk-ios "];
        // 将 UserAgent 字典内容注册到 NSUserDefault 中
        [[NSUserDefaults standardUserDefaults] registerDefaults:@{@"UserAgent": newUserAgent}];
    }];
}

@end

在上面的代码中，我们实现了一个加载获取 UserAgent 值得私有方法 - loadUserAgent: 方法，该方法通过回调将 UserAgent 值返回。在 - addWebViewUserAgent: 方法中调用 - loadUserAgent: 方法获取到 UserAgent 旧值，然后追加 /sa-sdk-ios 特殊符号，最后把生成的新的 UserAgent 值注册到 NSUserDefaults 中。

2.2 是否拦截

第一步：声明 - shouldTrackWithWebView: request: 方法。

/// 判断是否需要拦截并处理 JavaScript SDK 发送过来的事件数据
/// @param webView 用于界面展示的 WebView 控件
/// @param request 控件中的请求
- (BOOL)shouldTrackWithWebView:(id)webView request:(NSURLRequest *)request;

第二步：实现 - shouldTrackWithWebView: request: 方法。

- (BOOL)shouldTrackWithWebView:(id)webView request:(NSURLRequest *)request {
    // 获取请求的完整路径
    NSString *urlString = request.URL.absoluteURL;
    // 查找完整路径中是否包含 sensorsanalytics://trackEvent ，如果不包含，则是普通请求，不做处理，返回 NO
    if ([urlString rangeOfString:SensorsAnalyticsJavaScriptTrackEventScheme].location == NSNotFound) {
        return NO;
    }
    
    NSMutableDictionary *queryItems = [NSMutableDictionary dictionary];
    // 请求中的所有 Query，并解析获取数据
    NSArray<NSString *> *allQuery = [request.URL.query componentsSeparatedByString:@"&"];
    for (NSString *query in allQuery) {
        NSArray<NSString *> *items = [query componentsSeparatedByString:@"="];
        if (items.count >= 2) {
            queryItems[items.firstObject] = [items.lastObject stringByRemovingPercentEncoding];
        }
    }
    // TODO: 采集请求中的数据
    return YES;
}

2.3 二次加工 H5 事件

第一步：新增 - trackFromH5WithEvent: 方法，用于对数据进行加工

- (void)trackFromH5WithEvent:(NSString *)jsonString {
    NSError *error = nil;
    NSData *jsonData = [jsonString dataUsingEncoding:NSUTF8StringEncoding];
    NSMutableDictionary *event = [NSJSONSerialization JSONObjectWithData:jsonData options:NSJSONReadingMutableContainers error:&error];
    if (error || !event) {
        return;
    }
    
    NSMutableDictionary *properties = [event[@"properties"] mutableCopy];
//    [properties addEntriesFromDictionary:self.automaticProperties];
    event[@"_hybrid_h5"] = @(YES);
    
//    event[@"distinct_id"] = self.loginId ?: self.anonymousId;
    
//    dispatch_async(self.serialQueue, ^{
//        // 打印
//        [self printEvent:event];
//    //    [self.fileStroe saveEvent:event];
//        [self.database insertEvent:event];
//    });
//
//    if (self.database.eventCount >= self.flushBulkSize) {
//        [self flush];
//    }
}

第二步：修改 - shouldTrackWithWebView: request: 方法，添加 - trackFromH5WithEvent: 方法调用

- (BOOL)shouldTrackWithWebView:(id)webView request:(NSURLRequest *)request {
    // 获取请求的完整路径
    NSString *urlString = request.URL.absoluteURL;
    // 查找完整路径中是否包含 sensorsanalytics://trackEvent ，如果不包含，则是普通请求，不做处理，返回 NO
    if ([urlString rangeOfString:SensorsAnalyticsJavaScriptTrackEventScheme].location == NSNotFound) {
        return NO;
    }
    
    NSMutableDictionary *queryItems = [NSMutableDictionary dictionary];
    // 请求中的所有 Query，并解析获取数据
    NSArray<NSString *> *allQuery = [request.URL.query componentsSeparatedByString:@"&"];
    for (NSString *query in allQuery) {
        NSArray<NSString *> *items = [query componentsSeparatedByString:@"="];
        if (items.count >= 2) {
            queryItems[items.firstObject] = [items.lastObject stringByRemovingPercentEncoding];
        }
    }
    //
    [self trackFromH5WithEvent:queryItems[@"event"]];
    
    return YES;
}

2.4 拦截

在 - webView: decidePolicyForNavigationAction: 代理方法中进行拦截

#pragma mark - WKNavigationDelegate
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    if ([[SensorsAnalyticsSDK sharedInstance] shouldTrackWithWebView:webView request:navigationAction.request]) {
        return decisionHandler(WKNavigationActionPolicyCancel);
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}

2.5 测试验证

三、方案二：JavaScript 与 WebView 相互调用

实现原理：在 WKWebView 控件初始化之后，通过调用 webView.configuration.userContentController 的 - addScriptMessageHandler:name: 方法注册回调，然后实现 WKScriptMessageHandler 协议中的 -userContentController:didReceiveScriptMessage: 方法，JavaScript SDK 通过 window.webkit.messageHandlers..postMessage()方式触发事件，我们就能在回调中接受到消息，然后从消息中解析事件信息，在调用 trackFromH5WithEvent:方法即可实现。