本篇文章為大家展示了怎么在vue項(xiàng)目中實(shí)現(xiàn)前端埋點(diǎn)，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

目前成都創(chuàng)新互聯(lián)已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、高郵網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶(hù)體驗(yàn)。

埋點(diǎn)方案的確定。業(yè)界的埋點(diǎn)方案主要分為以下三類(lèi)：

• 代碼埋點(diǎn)：在需要埋點(diǎn)的節(jié)點(diǎn)調(diào)用接口，攜帶數(shù)據(jù)上傳。如百度統(tǒng)計(jì)等；

• 可視化埋點(diǎn)：使用可視化工具進(jìn)行配置化的埋點(diǎn)，即所謂的「無(wú)痕埋點(diǎn)」，前端在頁(yè)面加載時(shí)，可以讀取配置數(shù)據(jù)，自動(dòng)調(diào)用接口進(jìn)行埋點(diǎn)。如開(kāi)源的Mixpanel;

• 無(wú)埋點(diǎn)：前端自動(dòng)采集全部事件并上報(bào)埋點(diǎn)數(shù)據(jù)。如國(guó)內(nèi)的神策數(shù)據(jù)等；

在當(dāng)時(shí)排期緊湊，人力緊缺的情況下，顯然不允許我們?nèi)ラ_(kāi)發(fā)可視化埋點(diǎn)方案和無(wú)埋點(diǎn)方案，所以只能采取代碼埋點(diǎn)方案。

命令式埋點(diǎn)

命令式埋點(diǎn)，顧名思義，開(kāi)發(fā)者需要手動(dòng)在需要埋點(diǎn)的節(jié)點(diǎn)處進(jìn)行埋點(diǎn)。如點(diǎn)擊按鈕或鏈接后的回調(diào)函數(shù)、頁(yè)面ready時(shí)進(jìn)行請(qǐng)求的發(fā)送。大家肯定都很熟悉這樣的代碼：

// 頁(yè)面加載時(shí)發(fā)送埋點(diǎn)請(qǐng)求
$(document).ready(function(){
  // ... 這里存在一些業(yè)務(wù)邏輯
  sendRequest(params);
});
// 按鈕點(diǎn)擊時(shí)發(fā)送埋點(diǎn)請(qǐng)求
$('button').click(function(){
  // ... 這里存在一些業(yè)務(wù)邏輯
  sendRequest(params);
});

可以很容易發(fā)現(xiàn)，這樣的做法很有可能會(huì)將埋點(diǎn)代碼侵入業(yè)務(wù)代碼，這使整體業(yè)務(wù)代碼變得繁瑣，容易出錯(cuò)，且后續(xù)代碼會(huì)愈加膨脹，難以維護(hù)。所以，我們需要讓埋點(diǎn)的代碼與具體的業(yè)務(wù)邏輯解耦，即 聲明式埋點(diǎn) ，從而提高埋點(diǎn)的效率和代碼的可維護(hù)性。

聲明式埋點(diǎn)

理論上，聲明式埋點(diǎn)只需要關(guān)注兩個(gè)問(wèn)題：

• 需要埋點(diǎn)的DOM節(jié)點(diǎn)；

• 所需攜帶的數(shù)據(jù)

因此，可以很快想出一個(gè)聲明式埋點(diǎn)的方法：

// key表示埋點(diǎn)的唯一標(biāo)識(shí)；act表示埋點(diǎn)方式
<button data-stat="{key:'111', act: 'click'}">埋點(diǎn)</button>

那么可以去遍歷DOM樹(shù)，找到 [data-stat] 的節(jié)點(diǎn)，給這個(gè)button綁上click事件，把這些參數(shù)在回調(diào)函數(shù)中通過(guò)請(qǐng)求發(fā)出去。

在DOM節(jié)點(diǎn)(html)上聲明埋點(diǎn)，與業(yè)務(wù)邏輯（通常在Javascript文件中）就解耦了。調(diào)用也很方便。

看起來(lái)很美，但這樣就能解決問(wèn)題了嗎？顯然是不夠的。還需要解決以下問(wèn)題：

• 遍歷DOM樹(shù)的時(shí)機(jī)問(wèn)題，一個(gè)簡(jiǎn)單的例子，一個(gè)表格的行數(shù)據(jù)是通過(guò)異步加載，而表格行中的操作按鈕需要埋點(diǎn)，那么在DOM ready的時(shí)候去遍歷，顯然是無(wú)法找到的

• 綁定埋點(diǎn)事件次數(shù)的問(wèn)題，怎樣保證埋點(diǎn)事件不會(huì)被重復(fù)綁定到元素上，一次操作發(fā)了N個(gè)埋點(diǎn)請(qǐng)求?

• 如何處理特有的埋點(diǎn)行為，如頁(yè)面展現(xiàn)埋點(diǎn)，區(qū)域展現(xiàn)埋點(diǎn)?

• 如何在解綁時(shí)，銷(xiāo)毀已綁定的事件?

1.自定義指令實(shí)現(xiàn)埋點(diǎn)數(shù)據(jù)統(tǒng)計(jì)

在項(xiàng)目中通常需要做數(shù)據(jù)埋點(diǎn)，這個(gè)時(shí)候，使用自定義指令將會(huì)變非常簡(jiǎn)單

在項(xiàng)目入口文件 main.js 中配置我們的自定義指令

// 坑位埋點(diǎn)指令
Vue.directive('stat', {
 bind(el, binding) {
  el.addEventListener('click', () => {
   const data = binding.value;
   let prefix = 'store';
   if (OS.isAndroid || OS.isPhone) {
    prefix = 'mall';
   }
   analytics.request({
    ty: `${prefix}_${data.type}`,
    dc: data.desc || ''
   }, 'n');
  }, false);
 }
});

2.使用路由攔截統(tǒng)計(jì)頁(yè)面級(jí)別的 PV

由于第一次在單頁(yè)應(yīng)用中嘗試數(shù)據(jù)埋點(diǎn)，在項(xiàng)目上線一個(gè)星期之后，數(shù)據(jù)統(tǒng)計(jì)后臺(tái)發(fā)現(xiàn)，首頁(yè)的 PV 遠(yuǎn)遠(yuǎn)高于其它頁(yè)面，數(shù)據(jù)很不正常。后來(lái)跟數(shù)據(jù)后臺(tái)的人溝通詢(xún)問(wèn)他們的埋點(diǎn)統(tǒng)計(jì)原理之后，才發(fā)現(xiàn)其中的問(wèn)題所在。

傳統(tǒng)應(yīng)用，一般都在頁(yè)面加載的時(shí)候，會(huì)有一個(gè)異步的 js 加載，就像百度的統(tǒng)計(jì)代碼類(lèi)似，所以我們每個(gè)頁(yè)面的加載的時(shí)候，都會(huì)統(tǒng)計(jì)到數(shù)據(jù)；然而在單頁(yè)應(yīng)用，頁(yè)面加載初始化只有一次，所以其它頁(yè)面的統(tǒng)計(jì)數(shù)據(jù)需要我們自己手動(dòng)上報(bào)

解決方案

使用 vue-router 的 beforeEach 或者 afterEach 鉤子上報(bào)數(shù)據(jù)，具體使用哪個(gè)最好是根據(jù)業(yè)務(wù)邏輯來(lái)選擇。

const analyticsRequest = (to, from) => {
 // 只統(tǒng)計(jì)頁(yè)面跳轉(zhuǎn)數(shù)據(jù)，不統(tǒng)計(jì)當(dāng)前頁(yè) query 不同的數(shù)據(jù)
 // 所以這里只使用了 path, 如果需要統(tǒng)計(jì) query 的，可以使用 to.fullPath
 if (to.path !== from.path) {
  analytics.request({
   url: `${location.protocol}//${location.host}${to.path}`
  });
 }
};

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requiresAuth)) {
  // 這里做登錄等前置邏輯判斷
  // 判斷通過(guò)之后，再上報(bào)數(shù)據(jù)
  ...
  analyticsRequest(to, from);
 } else {
  // 不需要判斷的，直接上報(bào)數(shù)據(jù)
  analyticsRequest(to, from);
  next();
 }
});

在組件中使用我們的自定義指令

基于 jquery + widget 的老項(xiàng)目，

那么在這些項(xiàng)目中的DOM操作是jquery甚至原生DOM API來(lái)實(shí)現(xiàn)，Vue的自定義指令就無(wú)法工作

基于MutationObserver API的Mixin

MutationObserver是在DOM3標(biāo)準(zhǔn)中提出的標(biāo)準(zhǔn)API，提供讓開(kāi)發(fā)者感知到在某一個(gè)DOM節(jié)點(diǎn)變更的能力。可以監(jiān)聽(tīng)以下場(chǎng)景：

• childList: 目標(biāo)節(jié)點(diǎn)的子節(jié)點(diǎn)插入刪除引起的變更

• attributes: 目標(biāo)節(jié)點(diǎn)屬性改變引起的變更

• characterData: 目標(biāo)節(jié)點(diǎn)的文本節(jié)點(diǎn)改變引起的變更，如通過(guò)appendData()等

• subtree: 目標(biāo)節(jié)點(diǎn)的子孫節(jié)點(diǎn)改變引起的變更

• attributeOldValue：當(dāng)attribute監(jiān)聽(tīng)被設(shè)定為true時(shí)，可以記錄改變前的屬性值

• characterDataOldValue：當(dāng)characterData監(jiān)聽(tīng)被設(shè)定為true時(shí)，可以記錄改變前的屬性值

• attributeFilter：可以設(shè)定需要監(jiān)聽(tīng)的屬性列表

但為了保證MutationObserver可以在所有瀏覽器上正常工作，我們?nèi)匀灰肓诉@個(gè)API的polyfill,詳情可見(jiàn)這里。

在此能力的前提下，我們就可以在任意的DOM操作下觸發(fā)Vue進(jìn)行重新解析指令。

我們將 MutationObserver 封裝進(jìn)一個(gè) Vue mixin , 非Vue應(yīng)用的業(yè)務(wù)代碼只需要引入這個(gè)mixin，這樣也可以很好地解耦。
詳細(xì)的實(shí)現(xiàn)原理可以見(jiàn)以下偽代碼：

let observer;
export default {
 ready() {
  // 開(kāi)啟監(jiān)聽(tīng)
  observer = new MutationObserver(mutations => {
   this.$compile(this.$el);
  });
  observer.observe(this.$el, config);
 },
 destroyed() {
  // 清理工作
  observer.disconnect();
  observer.takeRecords();
 }
}

上述內(nèi)容就是怎么在vue項(xiàng)目中實(shí)現(xiàn)前端埋點(diǎn)，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

文章題目：怎么在vue項(xiàng)目中實(shí)現(xiàn)前端埋點(diǎn)-創(chuàng)新互聯(lián)
文章出自：http://vcdvsql.cn/article10/csccgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、App開(kāi)發(fā)、網(wǎng)站營(yíng)銷(xiāo)、Google、云服務(wù)器、搜索引擎優(yōu)化

廣告

聲明：本網(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)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)