揭開GrowingIO無埋點的神秘面紗
早在研究用戶行為分析的時候，就發現國內的GrowingIO在宣傳無埋點技術，最近正好抽出時間來研究一下所謂的無埋點到底是什么樣的。
我分六部分來分析一下無埋點的流程以及背后的技術分析，前5部分主要是分析圈選的流程，技術以及使用上的坑，最后一部分介紹一下利用js點擊元素獲取XPath的demo；
1、由GrowingIO的智能路徑來引出無埋點的重要性
首先，我們來看一下，最近GI新出的功能----智能路徑，智能路徑到底是什么？作用是什么呢？我們看下圖
看完這個圖，也許很多人都會猜個八九不離十。其實這個就是我們常說的路徑轉化，之所以叫做智能路徑，是因為其實他是一個漏斗的反推。那么漏斗的反推是什么意思呢？其實就是通過選擇最后總的目標來到推出在實際的系統里，用戶到達這個最終目標的情況（包括路徑和轉化率）。
下面我們看看整個的過程，
第一步計入頁面，並選擇轉化的最終目標
第二步，選擇發送驗證碼到手機，直接計算出用戶在實際使用當中到達最終目標的幾種路徑以及轉化率；
第三步，創建漏斗（這里就不詳細展開）
那么其實說了這么多，只是介紹了一下智能路徑的使用功能，和我們的無埋點又有什么關系呢？其實大有關系，細心的同學會發現我第二章圖里用紅框框住的東東，這是什么東東呢？其實這就是我們頁面上的一個可點擊事件，可點擊事件可以是一個按鈕，一個A鏈接等等，那么這個可點擊事件是怎么變成可選的？這里即將引出我們的第二部分內容----圈選。
2、圈選的使用介紹
在我們介紹圈選之前，我們要知道一個名詞，那就是元素 ，元素，我的理解就是頁面上的某個元素，一個鏈接，一個按鈕，一個圖片等等；
元素是組成圈選的最基本概念，因為圈選，要選的就是這些元素。
圈選這個詞並不好理解，如果把他叫做可視化事件設置，是不是更好理解一些？因為圈選就是在一個頁面上，來用鼠標選出頁面中可點擊的元素並保存。
這么說大家可能不太理解，下面我用一個例子來說明圈選的過程；
1、新建圈選
通過iframe加載目標頁面
2、點擊頁面上的圈選，會發現已經被圈選過並保存的元素，會顯示紅框。那么我們現在圈選一個登陸+注冊的區域。並命名為登錄注冊導航入口，然后保存。細心的同學會不會聯想到我第一部分給大家說過紅框里的東東？那么這個東東就是這么來的，是通過圈選，來定義並保存的。
圈選的過程介紹完了，我們結合第一部分和第二部分應該就能明白，為什么圈選是GI里數據分析的基石，因為GI里所有的數據分析都需要自定義事件，而自定義時間正是通過圈選來完成的。
那我們可不可以理解成GI通過可視化埋點來代替了人工（開發人員）埋點？也就是可以理解為無埋點的基石就是圈選（可視化埋點）；
3、無埋點的好處
無埋點的好處是什么？借用一下別人的總結圖例
只不過第一點，可以改將埋點的使用者門檻大大降低，網上維護人員可以在后台可視化的去設置要統計的事件。
再來看一下無埋點的噱頭，難怪大家這么喜歡無埋點，鼓吹無埋點，確實是可吹性很多，再借用一張圖來看一下無埋點的噱頭
4、分析web端圈選的實現方案（猜測）
重頭戲來了，那么圈選功能是如何實現的呢？下面來看我一步一步分析圈選；
1）打開chrome瀏覽器的開發人員模式，在沒有圈選前看一下，假設我們要圈選個人與家用產品，如下圖（注意用黑框框住的部分，為了和圈選的紅色框體區分）：
2）圈選之后，看看發生了什么變化
3）結合第一步和第二步我們能看出來，在我圈選的時候，在這個span 元素上多出了一些標簽，下面我們來對比一下代碼：
<span class="tab">個人與家用產品</span> <span class="tab" data-target="click-eTLOtbt7" data-screenshot="KnC5eJZS">個人與家用產品</span>
可以發現，在圈選的時候，加入了data-target和data-screenshot這兩個標簽
而在DIV區域 增加了class以及data-orig兩個標簽
<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。
<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無埋點的神秘面紗已經被我們揭開，無埋點的基礎是圈選，圈選的基礎是元素。無埋點的說法並不准確，與其說無埋點不如說成可視化埋點更為簡單，易理解。
此文章屬於叢立原創，如有轉發請標記原博地址：
http://www.cnblogs.com/congli1985/p/6097920.html