vue spa中使用百度統計

愛發呆發表於2018-03-06
Vue

因專案運營需求前端需要埋點，統計頁面流量。本文指標對H5應用，，若是App可參考百度Mota。

統計幾個指標：

  • pv:使用者每開啟一個網站頁面就被記錄1次。使用者多次開啟同一頁面，瀏覽量值累計。
  • uv:一天之內您網站的獨立訪客數(以Cookie為依據)，一天內同一訪客多次訪問您網站只計算1個訪客。
  • IP/iv(獨立IP)：某IP地址的計算機訪問網站的次數

首先註冊百度統計賬號，然後按需求新增統計應用資訊

1、pv和uv統計（_trackPageview）

vue spa中使用百度統計
確定後生成一段程式碼片段

vue spa中使用百度統計
將程式碼按提示引入到頁面 ， 如果程式碼安裝正確，一般20分鐘後，可以檢視網站分析資料, Vue等單頁面spa中使用百度統計一般在index.html的header中引入程式碼，然後監聽路由變化，出發pv統計

// vue router
router.beforeEach((to, from, next) => {
    // 統計程式碼
    // _hmt.push(['_trackPageview', pageURL]) 必須是以"/"（斜槓）開頭的相對路徑
    if (to.path) window._hmt.push(['_trackPageview', '/#' + to.fullPath])
    next()
})
複製程式碼

在控制檯中檢視統計是否傳送成功

vue spa中使用百度統計
可以在網站概況中檢視（ 生效時間會幾十分鐘到幾個小時的延遲~略坑）

vue spa中使用百度統計

2、 自定義事件統計( _trackEvent)

除了pv和uv兩個量之外，最常用的是按鈕和其他節點使用者事件的處理，因此為了滿足需求一般專案需要自定義事件，也有另一個種情況，統計專案中插入使用者的第三方頁面，事件統計第三方頁面的pv，uv

_hmt.push(['_trackEvent', category, action, opt_label, opt_value]);
複製程式碼

引數

名稱 必選/可選 型別 功能 備註
category 必選 String 要監控的目標的型別名稱 不填、填"-"的事件會被拋棄
action 必選 String 使用者跟網頁進行互動的動作名稱 不填、填"-"的事件會被拋棄
opt_label 可選 String 事件的一些額外資訊 不填、填"-"代表此項為空
opt_value 可選 Number 跟事件相關的數值

事件注意點（量大的時候，很少用到）

  • 百度統計針對_trackevent API 目前有多樣性的限制，即在部署_trackevent API時，事件型別、操作、標籤三項的多樣性乘積不能超過10000，否則系統會自動拋棄超標的資料。
  • 事件分析報告中將展示事件點選總數在前3000名的事件
  • 不符合前兩條，在報告中會出現提示，請修改程式碼，使得您程式碼中傳遞的引數符合要求
// vue component
methods:{
    goUser () {
        window._hmt.push(['_trackEvent', 'loginAction', 'Login', this.name])
    }
}
複製程式碼

在百度統計管理臺中檢視資料，初次使用時間會有一定延遲

vue spa中使用百度統計

3、追蹤使用者行為（_setCustomVar）

指定一個自定義變數，用於追蹤使用者使用行為等。前面兩種普通需求夠用，這個統計個人沒用到過^_^，可能部分業務需求還是需要使用這個方法，可以優化使用者體驗
_hmt.push(['_setCustomVar', index, name, value, opt_scope]);

引數

名稱 必選/可選 型別 功能 備註
index 必選 Int 自定義變數所佔用的位置 索引的範圍是從1到5
name 必選 String 自定義變數的名字 每個索引對應的名字在使用一次後就會固定
以後無法更改
value 必選 String 自定義變數的值
opt_scope 可選 Int 自定義變數的作用範圍 1為訪客級別（對該訪客始終有效）
2為訪次級別（在當前訪次內生效）
3為頁面級別（僅在當前頁面生效）
預設為3

opt_Scope引數說明：

setCustomVar的資料包表是基於session的統計，包含了使用jsapi的頁面的訪次都會在不同的槽位上 (index) 被打上數個形如name=value的標籤，而opt_scope引數則定義了這些標籤的有效期。opt_scope的合法可選值有3個，分別表示了3不同的級別：

  • 訪客級別：為當前訪客打上標籤，此訪客以後的所有訪問的指定槽位(index)上都會打上這個標籤。
  • 訪次級別：為當前訪次打上標籤，只有當前訪次的指定槽位(index)會打上這個標籤，不影響此訪客的後續訪問
  • 頁面級別：給當前訪次打上第一個有標籤頁面的標籤。只有當前訪次的指定槽位(index)會打上這個標籤，不影響此訪客的後續訪問

opt_scope引數的覆蓋規則：

由於對一個訪次來說每一個槽位(index)最終只會保留一個標籤，所以當一個訪次的同一個槽位(index)上出現多個標籤時，將出現衝突的情況。對一個訪次，統計邏輯會根據以下三步來決定一個訪次的最終標籤：

  • 先判斷槽位的級別，判斷規則：槽位中有訪客級別標籤為訪客級別槽位，槽位中有訪次級別標籤且無訪客級別標籤的為訪次級別槽位，槽位中既無訪客級別標籤又無訪次級別標籤的為頁面級別槽位
  • 如果是訪次級別槽位，以時序上最後一個訪次級別標籤為最終標籤
  • 如果是頁面級別槽位，以時序上第一個頁面級別標籤為最終標籤

建議jsapi使用盡量把不同級別的標籤設定在不同的槽位(index)上，以免造成標籤衝突引起的資料不一致。

opt_scope引數使用建議

  • 在需要對不同類別的訪客今後的一系列行為做區分篩選的時候建議使用訪客級別，比如“否是VIP會員”等標籤；

  • 在需要對本訪次的使用者行為或狀態做區分篩選的時候建議使用訪次級別，比如“是否登陸”等標籤；

  • 在需要對本訪次的訪問內容或訪問路徑做區分篩選的建議使用頁面級別，比如看了“體育頻道”還是“財經頻道”等標籤

在login.vue中進行使用者角色屬性vip，登入狀態，登入事件的jsApi

// login.vue
goUser () {
      window._hmt.push(['_trackEvent', 'loginAction', 'Login', 'ld'])
      window._hmt.push(['_setCustomVar', 1, 'vip', 'true', 1])
      window._hmt.push(['_setCustomVar', 2, 'login', 'true', 2])
      this.$router.push({path: '/talk'})
}

// talk.vue

mounted () {
    window._hmt.push(['_setCustomVar', 3, 'talk', 'joy or enjoy', 3])
  },
複製程式碼

在控制檯中檢視cv引數

vue spa中使用百度統計

在統計後臺中檢視

vue spa中使用百度統計

vue spa中使用百度統計

4、通過api獲取資料（後臺遷移資料部分）

一般統計uv和pv是在我們自己的管理後臺中進行檢視，需要後臺呼叫Tongji api移植資料 官方文件

一、首先您需要使用百度統計的帳號、密碼、以及開通資料服務後提供的TOKEN碼，通過DR-API的身份驗證。

二、然後通過getSiteList獲取當前使用者下的站點和子目錄列表以及對應引數資訊，不包括許可權站點和彙總網站。

您需要使用正確的站點ID（網站或系統中安裝了哪個站點的程式碼，就選擇哪個站點）後，方可使用getData服務匯出正確的報告資料。

  • 介面地址：

https://api.baidu.com/json/tongji/v1/ReportService/getSiteList

  • 返回引數
引數名 引數型別 是否必需 描述
list array of SiteInfo 是 站點列表
  • SiteInfo結構
引數名 引數型別 是否必需 描述
site_id uint 是 應用ID
domain string 是 站點域名
status uint 是 0：正常；1：暫停
create_time DateTime 是 日期時間格式，以北京時間表示
sub_dir_list array of SubDirInfo 是 子目錄列表
  • SubDirInfo結構
引數名 引數型別 是否必需 描述
sub_dir_id uint 是 子目錄ID
name string 是 子目錄名稱
status uint 是 0：正常；1：暫停
create_time DateTime 是 日期時間格式，以北京時間表示
sub_dir_list array of SubDirInfo 是 子目錄列表

三、getData

根據站點ID獲取站點報告資料。

確認所需的站點ID後，根據您的資料分析需求指定報告、指標、篩選維度，使用getData獲取資料即可。

  • 介面名稱
https://api.baidu.com/json/tongji/v1/ReportService/getData
複製程式碼
  • 輸入引數
引數名 引數型別 是否必需 描述
site_id uint 是 站點id
method string 是 通常對應要查詢的報告
start_date string 是 查詢起始時間,例：20160501
end_date string 是 查詢結束時間,例：20160531
start_date2 string 否 對比查詢起始時間
end_date2 string 否 對比查詢結束時間
metrics string 是 自定義指標選擇，多個指標用逗號分隔
gran string 否 時間粒度(只支援有該引數的報告): day/hour/week/month
order string 否 指標排序，示例：visitor_count,desc
start_index uint 否 獲取資料偏移，用於分頁；預設是0
max_results uint 否 單次獲取資料條數，用於分頁；預設是20; 0表示獲取所有資料

  • 所有頁面pv、uv、iv檢視請求示例：（沒有走後臺流程那一套直接在百度統計後臺擷取的請求）

資料格式大體一樣，返回值格式也一樣，indicators對應metrics

vue spa中使用百度統計

返回值

vue spa中使用百度統計

事件

vue spa中使用百度統計

使用者行為

vue spa中使用百度統計

相關文章