埋点：原生与H5交互实现埋点功能

之前接触过百分点埋点和TalkingData埋点的SDK，简单介绍使用和原理。

一、百分点
百分点H5在需要埋点的地方，会调用prompt方法，将需要的参数传到原生，调用形式为prompt(xxxx, xxxx,....)。而原生之前在webview加载完成时已经定义了prompt回调，接收处理发送数据

// 此代码必须在H5加载完成的方法中执行，否则拦截prompt失败，会有没完没了的弹窗出现。真TM坑，无论是SDK还是技术支持，而且拿开发阶段的SDK忽悠人。
    if ([webview isKindOfClass:[UIWebView class]]) {
      JSContext *content = [webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        
        content[@"prompt"] = ^() {
            
            NSArray *thisArr = [JSContext currentArguments];
            for (JSValue *jsValue in thisArr) {
                NSLog(@"=======%@",jsValue);
            }
            
            JSValue *jsValue0 = [thisArr firstObject];
            NSString *idString = [jsValue0 toString];
            
            JSValue *jsValue1 = [thisArr lastObject];
            NSString *jsValue1String = [jsValue1 toString];
            NSData *jsData = [jsValue1String dataUsingEncoding:NSUTF8StringEncoding];
            NSError *error;
            NSDictionary *dic = [NSJSONSerialization JSONObjectWithData:jsData options:NSJSONReadingMutableContainers error:&error];
            [TKBDIManager MEventWithID:idString name:nil params:dic];
        };
    }

二、TalkingData
TD的埋点还是可以的，除了开发文档有处坑。这里着重介绍TD埋点。

// 当前webview会加载次js，包含H5调用的埋点方法。

var isWebviewFlag;

function setWebViewFlag() {
    isWebviewFlag = true;
};

//function loadURL(url) {
//    var iFrame;
//    iFrame = document.createElement("iframe");
//    iFrame.setAttribute("src", url);
//    iFrame.setAttribute("style", "display:none;");
//    iFrame.setAttribute("height", "0px");
//    iFrame.setAttribute("width", "0px");
//    iFrame.setAttribute("frameborder", "0");
//    document.body.appendChild(iFrame);
//    iFrame.parentNode.removeChild(iFrame);
//    iFrame = null;
//};

function exec(funName, args) {
    var commend = {
        functionName:funName,
        arguments:args
    };
    var jsonStr = JSON.stringify(commend);
    var url = "talkingdata:" + jsonStr;
    loadURL(url);
};

var TalkingData = {
    getDeviceId:function(callBack) {
        if (isWebviewFlag) {
            exec("getDeviceId", [callBack.name]);
        }
    },
    onEvent:function(eventId) {
        if (isWebviewFlag) {
            exec("trackEvent", [eventId]);
        }
    },
    onEventWithLabel:function(eventId, eventLabel) {
        if (isWebviewFlag) {
            exec("trackEventWithLabel", [eventId, eventLabel]);
        }
    },
    onEventWithParameters:function(eventId, eventLabel, eventData) {
        if (isWebviewFlag) {
            exec("trackEventWithParameters", [eventId, eventLabel, eventData]);
        }
    },
    onPageBegin:function(pageName) {
        if (isWebviewFlag) {
            exec("trackPageBegin", [pageName]);
        }
    },
    onPageEnd:function(pageName) {
        if (isWebviewFlag) {
            exec("trackPageEnd", [pageName]);
        }
    },
    setLocation:function(latitude, longitude) {
        if (isWebviewFlag) {
            exec("setLocation", [latitude, longitude]);
        }
    }
};

// 原生代码

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.webView.delegate = self; // 代理
}

// 在webview加载的方法中执行
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    
 // 打开开关
    [webView stringByEvaluatingJavaScriptFromString:@"setWebViewFlag()"];
// 开始追踪
    if([webView.request.URL.absoluteString hasSuffix:@"/index.html"])
        [TalkingData trackPageBegin:@"index.html"];
}
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    
    NSString *parameters = [request.URL.absoluteString stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
// TD的埋点时应该时以打开请求的形式，把要传的数据放在请求中，这里调用SDK拦截埋点的请求，传递埋点数据。
    if ([TalkingDataHTML execute:parameters webView:webView]) {
        return NO;
    }
    return YES;
}