1.概念
无痕埋点
是一种数据采集技术，以AOP切面编程思想实现自动化的统一的数据采集，并在后端自动生成相关统计报表。h5无痕埋点，就是利用某些技术手段能达到，不用手动去写h5统计代码，自动拦截所有的h5所产生的基础交互事件，如点击事件，并上报。
NSURLProtocol
An NSURLProtocol object handles the loading of protocol-specific URL data. The NSURLProtocol class itself is an abstract class that provides the infrastructure for processing URLs with a specific URL scheme. You create subclasses for any custom protocols or URL schemes that your app supports.
2.UIWebView加载流程
image.png
2.1 拦截与篡改内嵌渲染前数据
image.png
3. WebView Request数据拦截与篡改
3.1 数据拦截
数据拦截将使用到无埋刚刚提到的NSURLProtocol，从上面的图可知道webview本质也是自己发起基于NSURLRequest的网络请求。NSURLProtocol具体原理请参考另外一篇博文，这里简述，NSURLProtocol 与NSMutableURLRequest,配合使用，当然也能用NSURLSession。
有些要注意的点是：
1.建议使用NSURLSession与NSURLProtocol配合做拦截处理。
2.canInitWithRequest 函数里面尽量不做耗时操作，甚至尽量直接用C函数，其次可以对于h5无埋点来说，只需要注入主h5代码里面，因此
[NSSet setWithObjects:@"css", @"js", @"png", @"jpg",@"ico",@"svg",@"mp3",@"mp4",@"m4a",@"gif",@"woff2", nil]
之类的皆可在canInitWithRequest直接过滤掉，而不往下执行。
3.还需注意重定向问题，需要利用NSMutableURLRequest回调函数
- (NSURLRequest *)connection:(NSURLConnection *)connection willSendRequest:(NSURLRequest *)request redirectResponse:(NSURLResponse *)response
处理重定向，因无埋点需求需要定位具体的展示界面，如果发生从定向，必须复制重定向request后，无埋自己发起一个NSURLSession or NSMutableURLRequest 的reqeust,如果不清楚为什么请查看NSURLProtocol介绍。
4.当然最重要的还是，NSMutableURLRequest的
- (void)connectionDidFinishLoading:(NSURLConnection *)connection
函数了，在此函数体里面无埋进行数据注入操作。
3.1 篡改
上面我们已经提到数据注入，那么注入什么，为什么注入的东西就能实现h5页面；其实是一段js脚本
- (void)connectionDidFinishLoading:(NSURLConnection *)connection
{
.........
NSString * insertJSCode =@"<script src=\'https://###.com/#/js/##.js?v=1.0\"></script>"
[h5MutString insertString:insertJSCode atIndex:(tempIdRange.location + tempIdRange.length)];
NSData * dataInserted = [h5MutString dataUsingEncoding:nsstringEncoding];
//转交回浏览器
[[self client] URLProtocol:self didLoadData:dataInserted];
[[self client] URLProtocolDidFinishLoading:self];
.........
}
这样注入就完成了，浏览器在进行脚本解析的时候将去自动加载，我们刚刚注册过的“insertJSCode”，并实现h5click实践的拦截操作并打上唯一的事件ID,再配合底层数据发送逻辑，我们将能捕获到几乎任何的h5按钮点击的事件。
3.3 注入的JS脚本
很抱歉的事，原始代码不方便贴出，但是原理都是和native无痕埋点差不多的，
脚本需要解决的两个重要的点就是，如能拦截h5的click事件，如何能标记每个按钮id是唯一的。举例如唯一按钮ID，是利用图层树，更准确的说是利用h5的标签结构，
path:body_/div.page-article.ios11#content_/div.kh-detail_/div.editor-detail_/p.editor-focus_id:1194645704/a_
parentPath:http://m.###.com/##/##.html
webBtnID = parentPath + path === > convertToBigNumber
网友评论