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();
});

搞定!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章