VuePress 部落格優化之新增資料統計功能

冴羽 發表於 2022-01-14
Vue 統計

前言

《一篇帶你用 VuePress + Github Pages 搭建部落格》中,我們使用 VuePress 搭建了一個部落格,最終的效果點選檢視:TypeScript4 中文文件。今天我們給部落格新增資料統計功能。

1. 百度統計

1.1 建立站點

1.1.1 登陸站點

登陸百度統計後臺:https://tongji.baidu.com/web/welcome/login

1.1.2 新增網站

在 「管理」- 「網站列表」中,點選「新增網站」:

VuePress 部落格優化之新增資料統計功能

1.1.3 填寫資訊

新增網站域名、網站首頁等資訊:

VuePress 部落格優化之新增資料統計功能

1.1.4 獲取程式碼

新增完後,會自動跳轉到程式碼獲取頁面,我們可以看到根據我們填寫的站點資訊生成的監控程式碼,注意這段程式碼是有特殊標示的,你需要根據自己的站點資訊生成並使用:

VuePress 部落格優化之新增資料統計功能

1.2 引入程式碼

我們在 config.js 裡寫入生成的程式碼:

module.exports = {
    head: [
      [
        'script', {}, `
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxx";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
        </script>        
        `
      ]
    ]
}

1.3 驗證

1.3.1 本地驗證

我們本地執行,重新整理頁面,然後檢視頁面請求:

VuePress 部落格優化之新增資料統計功能

可以看到頁面請求了 hm.jshm.gif ,表明確實傳送了請求。

1.3.2 線上驗證

現在我們部署到線上。等部署完成後,我們還可以在統計後臺的“程式碼安裝檢查”頁面自動檢測或手動檢測程式碼安裝情況。
VuePress 部落格優化之新增資料統計功能

1.4 等待

如果程式碼安裝正確,一般 20 分鐘後,可以檢視網站分析資料。

2. 單頁應用的資料統計問題

2.1 問題

我們通過在 head 中引入百度統計程式碼,如果是普通的頁面,沒有什麼問題,但我們用 VuePress 搭建的是一個單頁應用,頁面切換過程中,不會重新載入頁面,自然也不會觸發百度統計。所以我們只能統計到使用者訪問了頁面,但具體點開了哪些文章,跳轉了哪些路由並不知道。為了實現路由切換時的資料統計,我們還需要監聽路由改變,手動上報資料,那具體我們該怎麼做呢?

2.2 思路

首先根據 VuePress 官網的介紹:

一個 VuePress 網站是一個由 VueVue Routerwebpack 驅動的單頁應用。

而在 VuePress 文件的基本配置中,介紹了一個應用級別的配置

由於 VuePress 是一個標準的 Vue 應用,你可以通過建立一個 .vuepress/enhanceApp.js 檔案來做一些應用級別的配置,當該檔案存在的時候,會被匯入到應用內部。enhanceApp.js 應該 export default 一個鉤子函式,並接受一個包含了一些應用級別屬性的物件作為引數。你可以使用這個鉤子來安裝一些附加的 Vue 外掛、註冊全域性元件,或者增加額外的路由鉤子等:
// 使用非同步函式也是可以的
export default ({
  Vue, // VuePress 正在使用的 Vue 建構函式
  options, // 附加到根例項的一些選項
  router, // 當前應用的路由例項
  siteData, // 站點後設資料
  isServer // 當前應用配置是處於 服務端渲染 或 客戶端
}) => {
  // ...做一些其他的應用級別的優化
}

在這裡我們可以看到,有提供當前應用的路由例項 router,因為 VuePress 的路由是由 Vue Router 驅動的,所以我們查下 Vue Router 的官網介紹,可以看到一個全域性前置守衛

你可以使用 router.beforeEach 註冊一個全域性前置守衛:
const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

每個守衛方法接收三個引數:

  • to: Route: 即將要進入的目標 路由物件
  • from: Route: 當前導航正要離開的路由
  • next: Function: 一定要呼叫該方法來 resolve 這個鉤子。

由此得出,我們可以在獲取路由例項後,註冊一個全域性前置守衛來監聽路由改變。

現在我們能監聽路由改變了,怎麼手動上報資料呢?這個我們可以檢視百度統計的文件,有講到針對這種單頁應用如何在 JS 中呼叫 PV 跟蹤程式碼:

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

// pageURL:指定要統計PV的頁面URL。此項必選。

現在萬事俱備,我們開始寫起來吧。

2.3 實踐

我們在 .vuepress 資料夾下新建一個 enhanceApp.js 檔案,程式碼寫入:

export default ({ router }) => {
    router.beforeEach((to, from, next) => {
      if (typeof _hmt !== "undefined") {
        if (to.path) {
          _hmt.push(["_trackPageview", to.fullPath]);
        }
      }
      
      next();
    });
  };

現在我們在本地再執行下程式碼,然後點選文章,包括點選文章中的錨點,檢視請求就可以看到上報了資料。

2.4 梳理

這裡我們針對能上報資料的情形梳理一下:

  1. 頁面進入和重新整理
  2. 點選其他文章,路由切換
  3. 點選文章錨點,切換到其他章節(這裡其實還是路由切換)

現在以上都會觸發資料上報。

3. 谷歌統計

VuePress 直接提供了 @vuepress/plugin-google-analytics 外掛,使用該外掛,無須我們手動監聽路由改變,上節所說的三種情形下都會觸發資料上報。

我們直接參照文件

3.1 安裝

yarn add -D @vuepress/plugin-google-analytics
# OR npm install -D @vuepress/plugin-google-analytics
注意:如果你的專案正在使用 Google analytics 外掛,推薦使用 Yarn (opens new window)而不是 npm 來安裝所有依賴。因為在這種情形下,npm 會生成錯誤的依賴樹。

3.2 使用

module.exports = {
  plugins: [
    [
      '@vuepress/google-analytics',
      {
        'ga': '' // UA-00000000-0
      }
    ]
  ]
}

3.3 獲取 ga

3.3.1 登陸後臺

所謂 ga,即 Google Analytics ID,我們需要到谷歌分析建立站點獲取:

我們登陸谷歌分析後臺:https://analytics.google.com/

如果是第一次登陸,會跟著指示建立賬號,所謂賬號,通常是一個公司或者組織。

3.3.2 新增媒體資源

接下來新增媒體資源,所謂媒體資源,一般就是指網站或 APP,你也可以理解為百度的站點,每個媒體資源都有一個唯一的追蹤 ID,就是我們要拿到的 ga。

但是在新增媒體資源的時候,一定要注意,我們需要點選 「檢視高階選項」,開啟建立 「Universal Analytics 媒體資源」開關,至於是勾選 「同時建立 Google Analytics 4 和 Universal Analytics」 還是「僅建立 Universal Analytics」則都可以。

但只有通過 Unviersal Analytics 建立的 ga 才是我們這次需要的 ga,它建立的格式跟所需要的 UA-00000000-0 相同,如果是 Google Analytics 4 建立的,則是以 G 開頭的。

VuePress 部落格優化之新增資料統計功能

關於 Google Analytics(分析)4 多說一句,Google Analytics 4 簡稱 GA4,也是新版 GA,2020年10月份釋出,根據官方文件的介紹:

Google Analytics(分析)4(以前稱為“應用 + 網站”)是一項新型媒體資源,提供的報告與您在 Universal Analytics 媒體資源中看到的報告不同。Google Analytics(分析)4 媒體資源的優勢之一是:您可以將其用於網站、應用,或同時用於這兩者。Universal Analytics 媒體資源僅支援網站。

在建立完後,我們就可以看到生成的 ga 了:

VuePress 部落格優化之新增資料統計功能

複製 ga,我們填入到 config.js 的程式碼中。

3.4 驗證

注意,谷歌分析與百度分析稍有不同,如果我們在本地執行,並不會看到有資料的上報,我們可以把程式碼部署到線上檢視:

如果看到有如圖的帶collect的請求,就表示傳送請求成功。

VuePress 部落格優化之新增資料統計功能

3.5 等待

根據官方的幫助文件,我們可以知道:

向您的網站新增了 Analytics(分析)程式碼之後,Analytics(分析)將在數分鐘(通常是 10-15 分鐘)內開始向您的媒體資源傳送資料。

要確認您的媒體資源是否正在接收資料,請檢視“實時”報告。如果您正確設定了衡量程式碼,則“當前的使用者數量”卡片將會每 15 秒左右重新整理一次,以顯示最新的使用者數量。

Analytics(分析)需要 24-48 小時來處理其他報告的資料。

4. 谷歌還是百度?

至於使用谷歌還是百度,因人而異,在國內,谷歌因為一些原因,會導致載入速度降低,當然你也可以兩者都用。

系列文章

部落格搭建系列是我至今寫的唯一一個偏實戰的系列教程,講解如何使用 VuePress 搭建部落格,並部署到 GitHub、Gitee、個人伺服器等平臺。

  1. 一篇帶你用 VuePress + GitHub Pages 搭建部落格
  2. 一篇教你程式碼同步 GitHub 和 Gitee
  3. 還不會用 GitHub Actions ?看看這篇
  4. Gitee 如何自動部署 Pages?還是用 GitHub Actions!
  5. 一份前端夠用的 Linux 命令
  6. 一份簡單夠用的 Nginx Location 配置講解
  7. 一篇教你部落格如何部署到自己的伺服器
  8. VuePress 部落格優化之 last updated 最後更新時間如何設定

微信:「mqyqingfeng」,加我進冴羽唯一的讀者群。

如果有錯誤或者不嚴謹的地方,請務必給予指正,十分感謝。如果喜歡或者 有所啟發,歡迎 star,對作者也是一種鼓勵。