VueJs百度統計外掛
阿新 • • 發佈：2019-01-31
vue-ba
vuejs 百度統計埋點外掛
轉載https://minlingchao1.github.io/2017/07/13/VueJs%E7%99%BE%E5%BA%A6%E7%BB%9F%E8%AE%A1%E6%8F%92%E4%BB%B6/
專案地址
安裝
| 1 | npm install vue-ba --save |
直接在頁面中引用
| 1 | <script src="./node_modules/vue-ba/dist/index.js"><script> |
或者通過es6模組載入
| 1 | import ba from 'vue-ba' |
使用vue-ba外掛
| 1 | Vue.use(ba, 'YOUR_SITEID_HERE') |
通過傳遞 options 引數進行更多設定
| 1 | Vue.use(ba,options) |
options
| 引數 | 必須 | 預設 | 說明 | 備註 |
| siteId | 是 | 繫結要接受API請求的統計程式碼 | ||
| debug | 否 | false | 除錯模式下將在控制檯中輸出呼叫window._hmt時傳遞的引數 | 請不要在生產環境中使用，避免造成安全隱患 |
ba API
trackEvent
用於傳送頁面上按鈕等互動元素被觸發時的事件統計請求。
用法
| 1 | this.$ba.trackEvent(category,action,opt_label,opt_value) |
引數
| 引數 | 必須 | 型別 | 說明 |
| category | 是 | string | 表示事件發生在誰身上 |
| action | 是 | string | 表示訪客跟元素互動的行為動作 |
| opt_label | 否 | string | 用於更詳細的描述事件 |
| opt_value | 否 | int | 用於填寫打分型事件的分值，載入時間型事件的時長，如果填寫為其他形式，系統將按0處理。若填寫為浮點小數，系統會自動取整，去掉小數點。 |
2.2 trackPageview
用於傳送某個URL的PV統計請求，適用於統計AJAX、非同步載入頁面，友情連結，下載連結的流量
用法
| 1 | this.$ba.trackPageview(pageURL) |
引數
| 引數 | 必須 | 型別 | 說明 |
| pageURL | 是 | string | 自定義虛擬PV頁面的URL地址，填寫以斜槓‘/’開頭的相對路徑，系統會自動補全域名 |
ba 指令
vue-ba 提供 track-event，track-pageview 兩個指令，開發者可以直接在 html 模版中使用來統計網站資料
track-event
使用指令 v-track-event 監聽事件， 通過 modifiers 指定事件型別，將自動為繫結元素新增事件監聽，當事件觸發呼叫統計程式碼。 如不指定事件，預設監聽 click 事件。
可通過逗號分隔的字串或物件字面量傳遞引數，以字串傳遞時請注意引數順序，可參考trackEvent API。
用法
| 123456789 | <button v-track-event.click="'category, action''"></button> // 統計click事件<button v-track-event="'category, action'"></button> // 統計click事件簡寫<input v-track-event.keypress="'category, action'"> // 統計keypress事件<button v-track-event="'category, action, opt_label, opt_value'"><button> // 以字串傳遞引數<button v-track-event="{category:'event', action:'click'}"></button> // 以物件字面量傳遞引數 |
track-pageview
使用指令 track-pageview 統計虛擬 PV ，一般可以配合 v-show 或 v-if 來統計區域性動態檢視的 PV。
可通過逗號分隔的字串或物件字面量傳遞引數，以字串傳遞時請注意引數順序，可參考trackPageview API 用法
| 1234567 | <div v-show="show" v-track-pageview="'/bar'">bar</div> // 跟蹤 v-show 繫結元素的虛擬pv<div v-if="show" v-track-pageview="'/foo'">foo</div> // 跟蹤 v-if 繫結元素的虛擬pv<div v-track-pageview="'/tar'"></div> // 以字串指定受訪頁面和來源<div v-track-pageview="{pageURL:'/zoo''}"></div> // 以物件字面量指定受訪頁面和來源 |