1. 程式人生 > >vue單頁應用專案加入百度統計程式碼

vue單頁應用專案加入百度統計程式碼

在網上各種找不到vue專案加入百度統計的程式碼與實現:

自己探索出了一套加入百度統計的辦法,首先要明確一點,因為vue是單頁應用,所以直接加百度統計程式碼到index.html的header裡面是並沒有什麼用的,頁面只加載一次。

首先來看一下百度統計的官方API,_trackPageview

用於傳送某個指定URL的PV統計請求,通常用於AJAX頁面的PV統計。

語法

_hmt.push(['_trackPageview', pageURL]);

舉例

_hmt.push(['_trackPageview', '/virtual/login']);

引數

名稱 必選/可選 型別 功能 備註
pageURL 必選 String 指定要統計PV的頁面URL 必須是以"/"(斜槓)開頭的相對路徑
他的作用很明顯,就是直接監聽某一個頁面的百度統計

這個時候我們可以通過vue的vue-router的每次變化,來把虛擬的url地址直接給百度統計的公共API介面,讓他們自己去處理

在main函式裡面做一下的處理:

router.beforeEach((to, from, next) => {
  // 統計程式碼
  if (to.path) {
    _hmt.push(['_trackPageview', '/#' + to.fullPath]);
  }
  next();
});

搞定!