揭开GrowingIO无埋点的神秘面纱

原文链接：揭开GrowingIO无埋点的神秘面纱 http://www.cnblogs.com/congli1985/p/6097920.html 早在研究用户行为分析的时候，就发现国内的GrowingIO在宣传无埋点技术，最近正好抽出时间来研究一下所谓的无埋点到底是什么样的。 我分六部分来分析一下无埋点的流程以及背后的技术分析，前5部分主要是分析圈选的流程，技术以及使用上的坑，最后一部分介绍一下利用js点击元素获取XPath的demo； 1、由GrowingIO的智能路径来引出无埋点的重要性 首先，我们来看一下，最近GI新出的功能—-智能路径，智能路径到底是什么？作用是什么呢？我们看下图

 

看完这个图，也许很多人都会猜个八九不离十。其实这个就是我们常说的路径转化，之所以叫做智能路径，是因为其实他是一个漏斗的反推。那么漏斗的反推是什么意思呢？其实就是通过选择最后总的目标来到推出在实际的系统里，用户到达这个最终目标的情况（包括路径和转化率）。 下面我们看看整个的过程， 第一步计入页面，并选择转化的最终目标

 

第二步，选择发送验证码到手机，直接计算出用户在实际使用当中到达最终目标的几种路径以及转化率；

 

第三步，创建漏斗（这里就不详细展开） 那么其实说了这么多，只是介绍了一下智能路径的使用功能，和我们的无埋点又有什么关系呢？其实大有关系，细心的同学会发现我第二章图里用红框框住的东东，这是什么东东呢？其实这就是我们页面上的一个可点击事件，可点击事件可以是一个按钮，一个A链接等等，那么这个可点击事件是怎么变成可选的？这里即将引出我们的第二部分内容—-圈选。 2、圈选的使用介绍 在我们介绍圈选之前，我们要知道一个名词，那就是元素 ，元素，我的理解就是页面上的某个元素，一个链接，一个按钮，一个图片等等； 元素是组成圈选的最基本概念，因为圈选，要选的就是这些元素。 圈选这个词并不好理解，如果把他叫做可视化事件设置，是不是更好理解一些？因为圈选就是在一个页面上，来用鼠标选出页面中可点击的元素并保存。 这么说大家可能不太理解，下面我用一个例子来说明圈选的过程； 1、新建圈选 通过iframe加载目标页面

 

2、点击页面上的圈选，会发现已经被圈选过并保存的元素，会显示红框。那么我们现在圈选一个登陆+注册的区域。并命名为登录注册导航入口，然后保存。细心的同学会不会联想到我第一部分给大家说过红框里的东东？那么这个东东就是这么来的，是通过圈选，来定义并保存的。

 

圈选的过程介绍完了，我们结合第一部分和第二部分应该就能明白，为什么圈选是GI里数据分析的基石，因为GI里所有的数据分析都需要自定义事件，而自定义时间正是通过圈选来完成的。 那我们可不可以理解成GI通过可视化埋点来代替了人工（开发人员）埋点？也就是可以理解为无埋点的基石就是圈选（可视化埋点）； 3、无埋点的好处 无埋点的好处是什么？借用一下别人的总结图例

 

只不过第一点，可以改将埋点的使用者门槛大大降低，网上维护人员可以在后台可视化的去设置要统计的事件。 再来看一下无埋点的噱头，难怪大家这么喜欢无埋点，鼓吹无埋点，确实是可吹性很多，再借用一张图来看一下无埋点的噱头

 

4、分析web端圈选的实现方案（猜测） 重头戏来了，那么圈选功能是如何实现的呢？下面来看我一步一步分析圈选； 1）打开chrome浏览器的开发人员模式，在没有圈选前看一下，假设我们要圈选个人与家用产品，如下图（注意用黑框框住的部分，为了和圈选的红色框体区分）：

 

2）圈选之后，看看发生了什么变化

 

3）结合第一步和第二步我们能看出来，在我圈选的时候，在这个span 元素上多出了一些标签，下面我们来对比一下代码： 1 2 <span class="tab">个人与家用产品</span> <span class="tab" data-target="click-eTLOtbt7" data-screenshot="KnC5eJZS">个人与家用产品</span> 可以发现，在圈选的时候，加入了data-target和data-screenshot这两个标签 而在DIV区域 增加了class以及data-orig两个标签 1 <div class="growing-circle-cover" data-orig="click-8XxDMxZ2" style="width: 144px; height: 60px; left: 0px; top: 0px; position: absolute;"></div> 这个应该就是一个区域的覆盖层，类似于上图蓝色覆盖层一样的东东； 4）当我们保存以后看看是什么样的

 

span标签又变成如下，并有了id 还有target。 1 <span class="tab growing-circle-tagged" data-tag-id="4PYKbAM9" data-tagged-target="tagged-hxKiWboT">个人与家用产品</span> id我已经明白了，应该就是标签表的id。 class也变成标记过的class。 data-tagged-target具体什么含义，还有待分析。 5）当我们重新刷新，并到浏览模式下的时候，这些增加了的标签又都不见了。 那我们就会想他们这是通过什么来关联区域和我们自定义得的标题呢？ 之前和质保做自动化测试的时候，定位元素，除了CSS选择器和ID，一般就是XPath，这个没有唯一id,没有唯一class。所以我想到了XPath; 应该是用XPath和和我保存时候的标题等关联起来的。 无意间翻看了一个人写的GI部署的文章，里面有这样一句话，我将截图放进来。

 

他提到了XPath,那么目前最新版本并没有xpath这个选项，很有可能做到了隐藏。 这应该可以证明我的分析是正确的，XPath就是圈选的关键。 5、圈选的一些坑（我们做的时候要考虑到）      a) 圈选后大层覆盖小层，再想修改难上加难 这个图我们圈选了登录和注册，但是登陆和注册区域较大，这样的话，如果我想修改注册，是点不到的，也修改不了。

 

b) 浏览器的兼容性问题，圈选页面在IE8浏览器报JS错误；

 

6、关于XPath的DEMO 说一千道一万，我们只是分析出了GI可能用XPATH进行关联，但是XPath在页面上如何获取？我做了一个demo URL传送门（限内网访问）：http://192.168.52.53:90/xpath/testAlertXPath.html 列举了几种不同情况的元素如何获取XPath； 只需打开页面点击相应的元素，即可弹出XPath

 

到目前为止GrowingIO无埋点的神秘面纱已经被我们揭开，无埋点的基础是圈选，圈选的基础是元素。无埋点的说法并不准确，与其说无埋点不如说成可视化埋点更为简单，易理解。 本文系转载： 原文链接：揭开GrowingIO无埋点的神秘面纱 http://www.cnblogs.com/congli1985/p/6097920.html