growingIO 無埋點技術-web端探索

growingIO 無埋點技術-web端探索

簡單講growingIO是一款產品分析工具;其主推無埋點,那麼什麼是無埋點呢?無埋點===全是埋點;

先看下頁面初始vds的請求:post

https://api。growingio。com/v2/projectId/web/pv?stm=時間戳

這個請求發了如下資料:

growingIO 無埋點技術-web端探索

其中sh,sw 尚未明白傳遞的是什麼意思。 都是些網站基本資料。

之後再看下使用者點選網站時傳送的請求:post

https://api。growingio。com/v2/projectId/web/action?stm=時間戳

growingIO 無埋點技術-web端探索

這個請求是使用者點選頁面出發的 ,這裡有點疑問,引數e[0]。x 到底是怎麼拿到的呢,筆者能想到的辦法就是遞迴/for獲取父元素,一直到body:(Xpath也可以實現,不過具體怎麼用筆者就不造了,xpath是在xml文件中查詢元素的語言)

function getBodyPath(node,path){ return node。nodeName === “BODY”? path: getBodyPath(node。parentNode,node。nodeName+“/”);}

growingIO原始碼實現如下:

growingIO 無埋點技術-web端探索

growingIO 無埋點技術-web端探索

透過原始碼可以看到,return的xpath就是事件源相對body的路徑了,那麼這個路徑到底有啥用呢 ,其實這就是growingIo的視覺化圈選了。 上邊說無埋點即全是埋點,就是這麼實現採集的,看段原始碼:

growingIO 無埋點技術-web端探索

這段程式碼是監聽document的一個點選事件,其內容大概就是判斷當前點選的是否是元素 是的話發個請求否則就返回, 這裡有個問題, 例如點選的是button 這個button本身有我們自己定義的一個方法,正好裡邊有阻止事件冒泡,這就厲害了,而document是如何監聽這個button被點選了呢,沒錯就是事件捕獲,整個growingIo的點選都是繫結document的事件捕獲。

到了這裡 對資料傳遞以及如何收集資料都有了一點小了解了,其餘的類似資料實時傳遞(growingIo這裡是5分鐘才會更新資料,猜想是用延遲定時器在傳一遍初始化的那些引數)等那些原始碼還要一點點來研究。。。

growingio的圈選

一個視覺化的圖形操作,當我們圈選一個元素後,這些資料無論你圈選與否其實都已然存在了,就是上面這樣收集的, 圈選後會發現圈選的元素多了一些自定義屬性,例如:

data-orig class data-tag-id data-tagged-target

這樣的屬性,而我們傳遞過元素相對body的路徑,這樣在圈選時在獲取圈選元素相對body的路徑與我們傳遞的路徑去匹配就能拿到當前圈選所對應的資料資訊了。

growingIO功能不止這些; 對於其推出的無埋點技術,有點好奇故此扒了下原始碼,歡迎各位交流~。~

growingIO 無埋點技術-web端探索