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 新增網站

在 「管理」- 「網站列表」中，點選「新增網站」：

1.1.3 填寫資訊

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

1.1.4 獲取程式碼

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

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 本地驗證

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

可以看到頁面請求了 hm.js 和 hm.gif ，表明確實傳送了請求。

1.3.2 線上驗證

現在我們部署到線上。等部署完成後，我們還可以在統計後臺的“程式碼安裝檢查”頁面自動檢測或手動檢測程式碼安裝情況。

1.4 等待

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

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

2.1 問題

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

2.2 思路

首先根據 VuePress 官網的介紹：

一個 VuePress 網站是一個由 Vue、Vue Router和 webpack 驅動的單頁應用。

而在 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 開頭的。

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

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

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

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

3.4 驗證

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

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

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，對作者也是一種鼓勵。

相關文章