從零開始搭建前端數據監控系統(一)-同類產品調研


1 Google Analytics

GA向window暴露一個名為ga()的全局函數,ga()函數以參數格式、數目來分發不同的行為。這種模式的好處是API單一,不易混淆。但是缺點同樣明顯,在調用ga()時需要謹慎處理參數,包括格式、數目、名稱等,推薦使用fieldsObject的方式調用,比如:

ga('send', {
  'hitType': 'pageview',
  'page': '/home'
});

而不是

ga('send', 'pageview','/home');

GA的API總體分為兩種:全局的ga()命令隊列和跟蹤器對象的API。

1.1 ga()命令隊列

ga()命令隊列的設計理念是組織命令執行隊列,調用ga()本質上是將命令加入隊列中。

ga()隊列有兩種形式:

命令模式,如下:
ga(command, [...fields], [fieldsObject])

這種模式是指定具體的命令commandfieldsfieldsObject是兩種組織參數的形式,可以組合使用也可以獨立使用,建議全部使用fieldsObject

command命令從功能上可以分為三類:

  1. 創建跟蹤器命令create
ga('create', [trackingId], [cookieDomain], [name], [fieldsObject]);
  1. 跟蹤器操作命令send/get/require/remove。以send命令為例:
ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);

其中trackerName是可選的,代表跟蹤器的名稱,將針對該跟蹤器調用要執行的命令。如果未指定跟蹤器名稱,則針對默認跟蹤器調用相應的命令。 3. 提供插件命令provide

ga('provide', pluginName, pluginConstuctor);

這個命令是用於編寫插件使用的,具體使用方法請參考如何編寫GA插件

各命令的詳情參考官方文檔

回調函數,如下:
ga(readyCallback)

如果在調用 ga() 命令隊列函數時向其傳遞一個函數,會將該函數的執行安排在隊列中的下一位置。調用此函數時以默認跟蹤器作為第一個參數。如果尚未創建默認跟蹤器,第一個參數將為 undefined。

由於只有在 analytics.js 庫完全載入之后才能執行命令,向命令隊列傳遞函數最常見的情況是指定回調函數,以便在 analytics.js 庫完全載入和可用時調用。

1.2 ga對象API

ga對象與ga()隊列是截然不同的。ga()隊列函數是GA暴露出來的全局函數,analytics.js庫文件是異步加載的,ga()隊列的create命令會觸發analytics.js的加載。而ga對象要等analytics.js加載完成之后才可以使用,也就是readyCallback內才可使用其API。

可能有同學會疑惑為何相同名字的ga能夠提供不同的API。這在JavaScript語言中並不難實現。analytics.js加載完成后再初始化時期給全局域中本已存在的ga對象追加新的API方法,JavaScript中函數本質也是對象,所以對象的擴展同樣適用於函數。

ga對象的API使用最多的是getByNamegetAll,作用是獲取指定name的跟蹤器和獲取全部跟蹤器。

ga對象的其他API不建議使用,可以參考 ga 對象方法參考

1.3 跟蹤器對象API

跟蹤器對象的API有get/set/send三種,作用分別是獲取字段值、設置字段值和發送匹配。這些API同樣不建議使用,感興趣的同學可以參考跟蹤器對象參考

1.4 GA里的model

除了上文提高的ga()命令隊列、ga對象和跟蹤器對象以外,GA中還存在另外一個概念:model

顧名思義,model代表的是數據模型。但是model並非是所有跟蹤器的數據模型,暴露出來的model API是針對具體跟蹤器的。比如:

ga(function(tracker) {
  // Modifies sendHitTask to log the model's "hitPayload" field.
  tracker.set('sendHitTask', function(model) {
    var hitPayload = model.get('hitPayload')
        .replace('sensitive_information', 'XXXXX');
    // Updates the model with the new hitPayload string.
    model.set('hitPayload', hitPayload);
  });
});

model的API需要配合跟蹤器對象的API使用,詳細信息可以參考Model 對象參考

1.5 自定義維度和指標

GA可以自定義維度和指標,兩者的詳細區別可以參考維度和指標。可以簡單的將維度理解為scope(類似百度統計的scope),比如用戶的地理區域;指標是具體的量化標准。維度和指標可以單獨統計,但是為了數據的細化,最好將兩者組合統計。

自定義維護和指標需要首先在GA的管理后台定義,如下圖所示:

圖中的索引值是系統分配的,前端js腳本中使用下述語法發送自定義維度信息:

ga('send', 'pageview', {
  'dimension1':  'My Custom Dimension'
});

dimension后面的1就是系統分配的索引值。更加詳細的信息參考自定義維度和指標.

2. 百度統計

百度統計的部署模式是:

  1. 在引入統計js腳本之前必須手動生命全局對象_hmt
  2. 統計js文件與GA一樣使用document.write寫入文檔,所以調用位置最好在<head>頂部或者<body>頂部;
  3. _hmt是個數組對象,統計js腳本加載完畢后,將需要統計的指標push_hmt里,如下:
_hmt.push(['_setAccount', '0123456789ABCDEF0123456789ABCDEF']);
2.1 自定義字段

百度統計js可以通過_setCustomVar設置自定義統計字段,但是自定義的字段信息是需要提前確認的,要么使用頁面的腳本邏輯獲取,比如:

_hmt.push(['_setCustomVar', 1, 'visitor', 'baidu', 1]);

上述代碼中的鍵值對{visitor:'baidu'}是自定義的統計字段,代表訪問當前頁面的用戶來自於百度賬號登錄。這個信息需要頁面中其他js腳本獲取后再加入統計隊列中。

除了使用頁面js腳本,還可以配合后端模板,比如:

// isLogin是服務端輸出的用戶登錄狀態,登錄用戶為1,未登錄用戶為0
var isLogin = <?php echo $isLogin; ?>; 
_hmt.push(['_setCustomVar', 1, 'login', isLogin, 2]);

上述代碼中的自定義字段{login: isLogin}中的值isLogin如php模板輸出,隨后加入到統計隊列中。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM