Hexo 手動新增 Google Analytics、Google Tag Manager 的追蹤碼

最近將文章從 Medium 轉移至 Hexo 上，花了一番功夫阿，除了要轉過來的文章只能用 RSS 轉過來之外(Medium RSS 最多還只有 10 篇)，格式全跑掉還要一篇一篇調，最近還要加上 GA 追縱碼看看實際有瀏覽到我 Blog 的人數有多少，便 Google 了一下有沒有 plugin 可以使用，結果一搜幾乎都是用手動的，或是 theme 裡有內建，但我挑到喜歡的 stellar theme 是沒有內建的，所以只好手動自己加了。

首先安裝 theme 如果是用 npm 安裝的話，麻煩請到 node_modules 資料夾裡把安裝的 theme 複製一份到 themes 資料夾裡，然後用 npm uninstall 把安裝的 theme 移除掉，本文以 stellar 為例。

新增 google analytics 的 partial

我們到 themes/stellar/layout/_partial 下新增一個檔案叫 google-analytics.ejs，並且新增以下內容

<% if (config.google_analytics){ %>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=<%= config.google_analytics %>"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '<%= config.google_analytics %>');
</script>
<% } %>

這一段 Code 可以在 Google Analytics 網站中複製最新的全域網站代碼，目前最新位置是在 設定 -> 資源 -> 資料串流 -> 點選你要追縱的串流網站項目 -> 全域網站代碼(gtag.js)，藏的有點深阿，但程式碼中有包含你的個人 Tracking Code，所以請記得代換成 <%= config.google_analytics %>

將 partials 新增到 head 中

到 themes/stellar/layout/_partial/head.js 中，在 </head> 結尾標籤前面新增這一段

1	<%- partial('google-analytics') %>

加入 Tracking Code 到你的 _config.yml 中

打開你的 _config.yml，在任一行中新增

1	google_analytics: '{GA CODE}'

要記得 yml 檔縮排的規則，這一段 Code 不用縮排

最後在 _config.yml 加完後，將 Hexo 重新啟動，並且看原始碼有沒有新增 Tracking Code 就大功告成囉！

新增 Google Tag Manager 代碼

其實新增方法跟新增 google-analytics.ejs 是一樣的方法，只是把檔案內容替換成 GTM 代碼而已，如果還是不會，歡迎在底下留言囉

The article uses Attribution-NonCommercial-ShareAlike 4.0 International license agreement, please indicate the source for reprinting.