如何在 Hexo-NexT 主題中配置 Google Analytics

前言

Google Analytics(後文簡稱為 GA)是一個由 Google 所提供的網站流量統計服務,透過在網站中埋入 GA 追蹤碼,網站主們可以獲取進站流量的資料,包括來源、使用者、裝置、造訪路徑等,透過 GA,可以更全面的了解品牌的受眾,進而為潛在客戶優化購買、造訪流程,提高轉單意願,對於網頁入門來說是非常推薦使用的工具。(摘自維基百科) 不過這篇只會教你怎麼讓你的網頁與 GA 連結,詳細的操作可以看 google 推出的免費課程

教學開始!

首先到 GA 的官網註冊一個帳號,接著到管理建立帳戶、資源、最後切換到資料串流 建立帳戶、資源、切換到資料串流

新增串流,選擇網頁 新增串流

設定串流名稱、串流網址,他會自動生成 GA id(就是最後的評估 id),把他複製下來等等會用到 設定資料並複製id

這次不去改_congif.yml 的內容,雖然說他裡面也有可以設定 GA 的地方,但不知道為什麼我試過之後沒辦法使用,這裡我們直接改他的 layout,首先到 theme->{your-theme-name}->layout->_layout.njk 切換到_layout.njk

在 body 的上方插入以下程式碼,請務必將 ‘your-id’ 替換為剛剛複製的 id

1
2
3
4
5
6
7
8
9
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=your-id"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'your-id');
</script>
將程式碼插入到body的上方

重啟網站(使用 hexo s)並重新載入網頁,然後前往 GA -> 報表 -> 即時,檢查是否有變化,有時可能需要等待一段時間才能看到數據更新。 查看即時報表有沒有變化

結語

現在,你可以使用 Google Analytics 來監控每日訪問你的網站的人數。如果流量足夠,你甚至可以考慮進行廣告投放。如果有問題或者發現我有哪裡講錯,歡迎大家到底下留言區跟我討論喔~

其他功能

  1. 側邊欄

    基礎配置 (關於、標籤、分類、歸檔、搜尋、頭像、個人相關連結)
    切換語言

  2. 頁底

  3. utterances 留言板

  4. Google Analytics 統計網站資訊 ✅

  5. 日 / 夜模式

  6. live2d 角色(就是網頁右下角那隻可愛的狗狗)

  7. SEO:搜尋引擎最佳化 (Search Engine Optimization)

  8. 剩下的一些小工具

  9. 自訂網域