1. 程式人生 > >單頁面vue引入百度統計的使用方法!

單頁面vue引入百度統計的使用方法!

順序 自己 虛擬 手動 事件觸發 統計代碼 其他 temp site

最近組長安排著做一個項目,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、總算是大功告成了,雖然百度統計裏面可能還是還有蠻多沒有吃透,但是先把項目完成才是最重要的,接下來的就是慢慢去搞。

單頁面vue引入百度統計的使用方法!