最近組長安排著做一個專案，h5的應用下載專案，想著做起來還是比較容易，可是看到提出的需求，我就有點懵逼了！需要對應用的下載進行統計！！！我當時就想著我前端怎麼對頁面點選按鈕就行資料統計啊！我以前的專案也有對應用的下載量就行資料統計的，可是那些專案都是後臺人員編寫進行資料統計的。我當時就有點不知所措了。想著怎麼進行統計，怎麼搞定這個！百度得知，百度統計可以幫著解決這個問題，可是沒有用過啊！硬著頭皮，進入自己的踩坑之旅！

1、首先還是先在百度統計註冊賬號，並且新增網站，設定網站域名。如下：

2、在自己構建的vue專案中，引入vue-ba

npm install --save vue-ba
 

然後在main.js中引入：

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' import App from './App' import ba from 'vue-ba' import './assets/css/normalize.css'
Vue.config.productionTip = false;

Vue.use(ba, "175015a6227dca437e13abb9a6e845ac");
Vue.use(ba, { siteId: "175015a6227dca437e13abb9a6e845ac" }); /* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>' })
 

siteId讓我找了蠻久，剛開始有誤操作：

剛開始以為這個就是siteId=12603119，可是使用這個siteId沒有效果，後來才得知，siteId是在這裡：管理->獲取程式碼

在上圖的紅線框內，才是這個域名下的siteId，使用正確的siteId之後，就驗證是否正確引入，就進行程式碼檢查：管理->程式碼檢查

點選開始檢查，如果你的網址就是此處的網站首頁，就會出來檢查結果，如果你的網址與這裡的網站首頁地址不一樣，你就把你的網址輸入在"其他網頁"這一欄，點選開始檢查，就會出現以下結果

這樣就證明你的引入成功！

還有一種手動檢查的方法，就是在chrome瀏覽器中輸入你的網址，按F12，除錯模式，按Network，如果找到了hm.js?xxxxxx這個檔案，也說明你的程式碼引入成功，如下：

3、siteId配置成功之後，就需要在你的html內對點選事件等進行監測了。vue-ba這款外掛有詳細的使用方法，我就不介紹使用了，我就寫我使用到的。詳細的使用地址： https://github.com/minlingchao1/vue-ba

我就只用到了trackEvent這個api，vue-ba 提供 track-event，track-pageview 兩個指令，我們可以直接在 html 模版中使用來統計網站資料。

3.1 track-event

使用指令 v-track-event 監聽事件， 通過 modifiers 指定事件型別，將自動為繫結元素新增事件監聽，當事件觸發呼叫統計程式碼。 如不指定事件，預設監聽 click 事件。可通過逗號分隔的字串或物件字面量傳遞引數，以字串傳遞時請注意引數順序，可參考trackEvent API。

用法：

<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> // 以物件字面量傳遞引數

3.2 track-pageview

使用指令 track-pageview 統計虛擬 PV ，一般可以配合 v-show 或 v-if 來統計區域性動態檢視的 PV。可通過逗號分隔的字串或物件字面量傳遞引數，以字串傳遞時請注意引數順序，可參考trackPageview API 用法

<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> // 以物件字面量指定受訪頁面和來源

我在app.vue中的使用：

<div class="swiper-container swiper-container1">
        <swiper class="swiper-wrapper" :options="bannerOptions" ref="bannerSwiper">
            <swiper-slide class="swiper-slide" v-for="(item,index) in banner" :key="index">
                <a class="swiper-link" :href="item.link" v-track-event="{category:'download', action:'click',opt_label: item.link}" >
                  <img class="container1-img" :src="item.icon" :alt="item.desc"/>
                </a>
            </swiper-slide>
        </swiper>
    </div>

<div class="list-download">
    <a :href="item.packagename" v-track-event="{category:'download', action:'click',opt_label: item.packagename}">下載</a>
 </div>

通過這種方法，就可以讓你在百度統計裡面看到你想要統計的資料。但是這種統計的結果不會很快就出來，需要過一段時間，兩三個小時是需要的。我也等了將近3個小時，才看到統計的結果。

4、總算是大功告成了，雖然百度統計裡面可能還是還有蠻多沒有吃透，但是先把專案完成才是最重要的，接下來的就是慢慢去搞。
發現文章中的錯誤，或者有更好的建議，歡迎評論或進前端全棧群：866109386，來交流討論吹水。