WordPress 網站安裝 GA4,這樣裝才不會更新就失效!

WordPress 安裝 Google Analytics(分析) GA4

網站架好後,如果不知道自己網站有多少流量、多少訪客,那還有什麼樂趣!但假如只是知道多少人來訪、每篇文章的人氣,那你就錯過太多數據了!

 

Google Analytics 最新版又簡稱 GA4,是 Google 免費提供所有網站站長安裝的一款網站數據分析服務!只要你有 Google 帳號就能輕鬆申請,然後將程式碼裝上你的 WordPress 網站後,就能開始搜集所有資料!

網路上很多 WordPress 安裝 GA4 教學是安裝在主題代碼處,如果沒有搭配 WordPress 子主題的話,只要主題更新你的 GA4 安裝就會立即失效!本篇文章會教你不會被更新影響,並且任何主題都能適用的安裝方式。

 

本文提供影音教學及圖文教學,請依喜好選擇閱讀

WordPress 安裝 Google 分析 GA 影片教學

 

WordPress 安裝 GA 教學 影片編目:
00:00 開頭 GA 簡單介紹

03:27 跟 Google 申請 Analytics & 設定

07:20 WordPress 網站安裝 GA 程式碼

10:27 安裝完成!回GA看資料是否正常搜集

WordPress 安裝 Google 分析 GA 圖文教學

Google Analytics 對於網站經營的好處

簡單說一下安裝 GA 後的好處,就可以如下圖得到網站的各種使用數據,像是每天的網站流量、現在網站上的即時人數、這些人都在瀏覽些什麼頁面?使用者透過哪些媒介來到你的網站?

WordPress 網站安裝 Google 分析 通用GA & GA4
瞭解使用者使用網站概況、每日人數、網站線上正有多少人在瀏覽哪些文章
WordPress 網站安裝 Google 分析 通用GA & GA4
瞭解網站流量來自哪些地方?搜尋引擎、轉介、網址直連、社群媒體

到 Google 分析首頁申請使用

Google Analytics 頁面(可能會要求你登入 Google 帳號),如果是第一次使用 Google 分析就會看到以下歡迎畫面。按下開始測量開始下一步設定!

如果是已經使用過的使用者,請參考影片 11:05 開始的教學,點擊齒輪後可以銜接這邊的教學!

WordPress 網站安裝 Google 分析 通用GA & GA4

 

設定 Google 分析資源名稱

這邊要先命名你的資源,理論上是可以自由命名,但為了日後管理、辨識方便,建議使用網域名稱。

EX:我要設定追蹤的網站是 https://perryhuang.live/,所以我名稱就輸入 perryhuang.live

WordPress 網站安裝 Google 分析 通用GA & GA4

 

除了新版 Google Analytics 4 之外同時安裝通用 GA

下方的隱藏進階選項點擊打開後,會看到通用 Analytics(分析) 的 GA 選項,請再把右邊開關打開!

WordPress 網站安裝 Google 分析 通用GA & GA4

 

這邊跟資源名稱一樣,輸入網域名稱!然後按下下一步,這樣就可以同時安裝新版的 GA4、和通用版的 GA!

WordPress 網站安裝 Google 分析 通用GA & GA4

 

取得安裝於 WordPress 網站的追縱程式碼 gtag.js

然後等待一下後,應該會跑出如下畫面(有遇到幾次畫面會全白當掉,等太久的話就請直接重新整理就會跑出畫面!),點擊「全域網站代碼(gtag.js),會展開程式碼!

WordPress 網站安裝 Google 分析 通用GA & GA4

 

按下右邊的 icon 複製 Google 分析的 gtag.js 追蹤碼!這是要用來安裝在我們的 WordPress 網站上的!這樣資料才能導進 GA 來!

WordPress 網站安裝 Google 分析 通用GA & GA4

 

為 WordPress 安裝用來裝追蹤程式碼的外掛:Code Snippets

WordPress 網站安裝 Google 分析 通用GA & GA4

接著請回到 WordPress 後台,「外掛 -> 安裝外掛」搜尋安裝 Code Snippets,安裝完成後直接點擊啟用外掛。

在 Code Snippes 安裝 GA 程式碼

啟用 Code Snippes 後,會看到 WordPress 後台左邊選單多了一個「程式碼片段」的選項,點擊選擇「全部程式碼片段」,會看到下面畫面很多範例程式,找到其中的「JavaScript 程式碼片段範例」點下「再製」,會看到最下方複製了一個一模一樣的!點擊這個一模一樣的複製品進入!

WordPress 網站安裝 Google 分析 通用GA & GA4

 

上面的標題改名「GA 程式碼」,然後將我們上面步驟複製的程式碼貼到這邊來。完成後應該如下畫面!

P.S. 覆蓋掉中間本來的 <script>開頭、</script> 結尾的程式碼。

WordPress 網站安裝 Google 分析 通用GA & GA4

 

然後按下儲存並且啟用!這樣這段程式碼才會開始在網站作用!這此 Google 分析我們已經設定安裝完成!可以回 GA 看數據了!

WordPress 網站安裝 Google 分析 通用GA & GA4

安裝完成!回到 Google 分析頁面測試數據接收!

由於網站剛安裝好沒有數據,所以請自己連線到自己網站,就能看到「即時訪客人數上」有自己一個人!

WordPress 網站安裝 Google 分析 通用GA & GA4

切換新版 Google 分析和通用版 Google 分析

如果要切換新版和通用版 Google Analytics 的話,請點擊下圖紅色圈選處,就可以自由切換版本的數據來觀看!

新版 GA4 還在早期階段,我認為功能還不夠完整,會建議切換到下方介面的通用版 GA 介面為主來監測網站數據!

WordPress 網站安裝 Google 分析 通用GA & GA4

WordPress 網站安裝 Google 分析 通用GA & GA4
點擊即可切換 Google Analytics 4 和通用版的資料檢視

 

上一篇WordPress 設定靜態首頁後,如何找出本來的部落格頁面? 下一篇搭載M1的Macbook便宜又強大!開發者可以買嗎?(2021 更新)

WP黑色星期五特賣!

Divi 黑五25%優惠(一年一次的最大優惠),趁機可購買終生版本折價大!傳送門
Divi 90秒套版示範
Divi 完整教學1
Divi 完整教學2

WP黑色星期五特賣資訊