單頁(yè)面vue引入百度統(tǒng)計(jì)的使用方法示例詳解

前言

創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)提供任丘企業(yè)網(wǎng)站建設(shè),專(zhuān)注與網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為任丘眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

最近組長(zhǎng)安排著做一個(gè)項(xiàng)目，h6的應(yīng)用下載項(xiàng)目，想著做起來(lái)還是比較容易，可是看到提出的需求，我就有點(diǎn)懵逼了！需要對(duì)應(yīng)用的下載進(jìn)行統(tǒng)計(jì)?。?！我當(dāng)時(shí)就想著我前端怎么對(duì)頁(yè)面點(diǎn)擊按鈕就行數(shù)據(jù)統(tǒng)計(jì)??！我以前的項(xiàng)目也有對(duì)應(yīng)用的下載量就行數(shù)據(jù)統(tǒng)計(jì)的，可是那些項(xiàng)目都是后臺(tái)人員編寫(xiě)進(jìn)行數(shù)據(jù)統(tǒng)計(jì)的。我當(dāng)時(shí)就有點(diǎn)不知所措了。想著怎么進(jìn)行統(tǒng)計(jì)，怎么搞定這個(gè)！百度得知，百度統(tǒng)計(jì)可以幫著解決這個(gè)問(wèn)題，可是沒(méi)有用過(guò)??！硬著頭皮，進(jìn)入自己的踩坑之旅！

方法如下

1、首先還是先在百度統(tǒng)計(jì)注冊(cè)賬號(hào)，并且新增網(wǎng)站，設(shè)置網(wǎng)站域名。如下：

2、在自己構(gòu)建的vue項(xiàng)目中，引入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讓我找了蠻久，剛開(kāi)始有誤操作：

剛開(kāi)始以為這個(gè)就是siteId=12603119，可是使用這個(gè)siteId沒(méi)有效果，后來(lái)才得知，siteId是在這里：管理->獲取代碼

在上圖的紅線框內(nèi)，才是這個(gè)域名下的siteId，使用正確的siteId之后，就驗(yàn)證是否正確引入，就進(jìn)行代碼檢查：管理->代碼檢查

點(diǎn)擊開(kāi)始檢查，如果你的網(wǎng)址就是此處的網(wǎng)站首頁(yè)，就會(huì)出來(lái)檢查結(jié)果，如果你的網(wǎng)址與這里的網(wǎng)站首頁(yè)地址不一樣，你就把你的網(wǎng)址輸入在"其他網(wǎng)頁(yè)"這一欄，點(diǎn)擊開(kāi)始檢查，就會(huì)出現(xiàn)以下結(jié)果

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

還有一種手動(dòng)檢查的方法，就是在chrome瀏覽器中輸入你的網(wǎng)址，按F12，調(diào)試模式，按Network，如果找到了hm.js?xxxxxx這個(gè)文件，也說(shuō)明你的代碼引入成功，如下：

3、siteId配置成功之后，就需要在你的html內(nèi)對(duì)點(diǎn)擊事件等進(jìn)行監(jiān)測(cè)了。vue-ba這款插件有詳細(xì)的使用方法，我就不介紹使用了，我就寫(xiě)我使用到的。詳細(xì)的使用地址：https://github.com/minlingchao1/vue-ba

我就只用到了trackEvent這個(gè)api，vue-ba 提供 track-event，track-pageview 兩個(gè)指令，我們可以直接在 html 模版中使用來(lái)統(tǒng)計(jì)網(wǎng)站數(shù)據(jù)。

3.1 track-event　

使用指令 v-track-event 監(jiān)聽(tīng)事件， 通過(guò) modifiers 指定事件類(lèi)型，將自動(dòng)為綁定元素添加事件監(jiān)聽(tīng)，當(dāng)事件觸發(fā)調(diào)用統(tǒng)計(jì)代碼。 如不指定事件，默認(rèn)監(jiān)聽(tīng) click 事件?？赏ㄟ^(guò)逗號(hào)分隔的字符串或?qū)ο笞置媪總鬟f參數(shù)，以字符串傳遞時(shí)請(qǐng)注意參數(shù)順序，可參考trackEvent API。

用法：

<button v-track-event.click="'category, action''"></button> // 統(tǒng)計(jì)click事件

<button v-track-event="'category, action'"></button> // 統(tǒng)計(jì)click事件簡(jiǎn)寫(xiě)

<input v-track-event.keypress="'category, action'"> // 統(tǒng)計(jì)keypress事件

<button v-track-event="'category, action, opt_label, opt_value'"><button> // 以字符串傳遞參數(shù)

<button v-track-event="{category:'event', action:'click'}"></button> // 以對(duì)象字面量傳遞參數(shù)

3.2 track-pageview

使用指令 track-pageview 統(tǒng)計(jì)虛擬 PV ，一般可以配合 v-show 或 v-if 來(lái)統(tǒng)計(jì)局部動(dòng)態(tài)視圖的 PV?？赏ㄟ^(guò)逗號(hào)分隔的字符串或?qū)ο笞置媪總鬟f參數(shù)，以字符串傳遞時(shí)請(qǐng)注意參數(shù)順序，可參考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> // 以字符串指定受訪頁(yè)面和來(lái)源

<div v-track-pageview="{pageURL:'/zoo''}"></div> // 以對(duì)象字面量指定受訪頁(yè)面和來(lái)源

我在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>

通過(guò)這種方法，就可以讓你在百度統(tǒng)計(jì)里面看到你想要統(tǒng)計(jì)的數(shù)據(jù)。但是這種統(tǒng)計(jì)的結(jié)果不會(huì)很快就出來(lái)，需要過(guò)一段時(shí)間，兩三個(gè)小時(shí)是需要的。我也等了將近3個(gè)小時(shí)，才看到統(tǒng)計(jì)的結(jié)果。

4、總算是大功告成了，雖然百度統(tǒng)計(jì)里面可能還是還有蠻多沒(méi)有吃透，但是先把項(xiàng)目完成才是最重要的，接下來(lái)的就是慢慢去搞。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。

網(wǎng)站名稱(chēng)：單頁(yè)面vue引入百度統(tǒng)計(jì)的使用方法示例詳解
文章出自：http://muchs.cn/article48/ijdchp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、關(guān)鍵詞優(yōu)化、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站制作、企業(yè)建站、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)