GO TOP

LINE ID
andykao1026

Email
[email protected]

Address
10488 台北市中山區南京東路3段219號9樓

GA4 安裝教學 (一) – 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

最新更新日期: 2023 年 12 月 13 日

今年 Google 已公布,通用 Analytics (以下簡稱 GA3 ) 將於 2023 年 7 月 1 日停止使用的消息,目前 Google Analytics 4 (以下簡稱 GA4 ) 的功能雖然還沒有完善,但我們應該先將網站埋上 GA4 追蹤碼,完成相關設定並盡早開始學習 GA4 的介面; GA4 強化了數據報表的部分,除了讓操作者更方便的製作出屬於自己的報表以外,還可以分享報表給團隊的所有人,讓公司內部的行銷人員可以快速的分析網站數據,透過這些數據精準的制定線上平台的行銷策略。

小編將分為兩篇文章,講解如何將 WordPress 網站串接 Google Analytics 4 及 Google Tag Manager (以下簡稱GTM) ,並透過 GTM代碼 設定,將 WordPress購物車網站 所引發的 view_itemview_item_listselect_itemadd_to_cartremove_from_cartview_cartbegin_checkoutadd_payment_infoadd_shipping_info 以及 purchase 等 電子商務事件 正確導入 GA4,即可在 GA4 報表中產出每個階段的詳細報表。

(1) 安裝教學 (一) – 快速將 WordPress 網站串接 GTM 及 GA4
講解如何安裝並設定 GTM4WP 外掛,將 WordPress 網站串接 GTM 及 GA4,並驗證是否成功串接 。

(2) 安裝教學 (二) – 快速將 WordPress 電商網站的電子商務事件正確導入至 GA4
講解如何使用 GTM4WP 外掛以及 GTM,將 Woocommerce 的 加強型電子商務追蹤 正確的導入至 GA4。

※注意: 本篇教學不會使用 PixelYourSitePixel Caffeine 、Lara’s 以及 Google官方的 Site Kit by Google 等外掛如果網站目前已經使用了上述外掛埋設GA追蹤碼的話,將會有重複上傳GA數據的可能,因此建議先將上述的外掛關閉後,再繼續進行以下的教學。

何謂 Google Tag Manager ?

Google Tag Manager (以下簡稱GTM)無法提供數據分析、投放廣告、計算再行銷等功能,小編覺得GTM好比一個轉發器,先至網頁安裝GTM追蹤碼,再經由設定代碼(Tag)觸發條件(Triggers)變數(Variables),將使用者的操作軌跡,利用事件的方式,將資訊傳送到第三方服務,像是 Google Analytics、Google AdWords、FB Pixel 和 Bing 等等。

 

如何申請 Google Tag Manager 追蹤碼?

(1) 前往 GTM 官方網站

搜尋 Google Tag Manager 或 GTM ,接著點擊網址進入。

快速將 WordPress 使用 GTM 串接 Google Analytics 4

(2) 建立 GTM 帳戶

登入個人Google帳號後,點擊『 建立帳戶 』

快速將 WordPress 使用 GTM 串接 Google Analytics 4
在帳戶設定中輸入『 帳戶名稱』 ->  在容器設定輸入『 容器名稱』,目標廣告平台選擇『 網路 』-> 點擊『 建立 』
快速將 WordPress 使用 GTM 串接 Google Analytics 4

快速將 WordPress 使用 GTM 串接 Google Analytics 4

跳出Google代碼管理工具服務合約條款後,勾選『 我也接受GDPR所要求的資料處理條款 』後, 點擊右上方『 是 』

快速將 WordPress 使用 GTM 串接 Google Analytics 4

接著會跳出安裝Google 代碼管理工具視窗,如果您不是透過外掛掛載GTM追蹤碼,就要將以下程式碼放進網站中,本篇教學將使用外掛,因此只接點擊右下角『 確認 』即可

快速將 WordPress 使用 GTM 串接 Google Analytics 4

(3) 取得 GTM 追蹤碼

在預覽按鈕旁的GTM-XXXXXXX ( 7 位數字 ) 就是您的『 GTM追蹤碼』,請先複製下來,稍後設定會用的到

快速將 WordPress 使用 GTM 串接 Google Analytics 4

(4) 發布 GTM 追蹤碼

這個步驟非常重要,成功建立帳戶後此帳戶的GTM追蹤碼還不會生效,因此需要右上角點擊『 提交 』按鈕

快速將 WordPress 使用 GTM 串接 Google Analytics 4

版本名稱代表此次變更的原因標題,可留空白,自行選擇是否輸入,接著點擊『 發布 』

快速將 WordPress 使用 GTM 串接 Google Analytics 4

等 GTM 唱完歌以後,此次變更即發布成功

快速將 WordPress 使用 GTM 串接 Google Analytics 4

發布成功後,會列出變更的詳情,此篇教學不會詳細說明,想要瞭解的同學可自行上網 Google

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

 

如何在 WordPress 網站上,埋設 GTM 追蹤碼?

(1) 安裝並啟用 GTM4WP 外掛

搜尋『 GTM 』關鍵字,找到 GTM4WP 項目,點擊『 立即安裝 』

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

點擊『 啟用 』

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

(2) 設定 GTM4WP 外掛,掛載 GTM 追蹤碼

當您啟用外掛後,就會出現『 To start using Google Tag Manager for WordPress,please enter your GTM ID 』通知,點擊『 enter your GTM ID 』進入設定

將『 步驟2.3 』複製的『 GTM追蹤碼』貼至『 Google 代碼管理工具容器ID 』,接著點擊『儲存設定 』

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

將『 啟用/停用容器代碼 』設定『 啟用 』 -> 『 GTM容器代碼相容模式 』設定『 頁面頁尾 』 -> 接著點擊『儲存設定 』

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

 

如何驗證 WordPress 網站,是否成功埋設 GTM 追蹤碼?

(1) 使用 Chrome 安裝 Tag Assistant (by Google)

Chrome 線上應用程式商店 搜尋 Tag Assistant ,點選加到 Chrome

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

接著點選新增擴充功能

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

點選右上方拼圖的圖示,接著點擊『 Tag Assistant 圖示  』旁的圖釘

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

點選右上方 Tag Assistant 圖示後,選取『 Done 』

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

(2) 驗證 GTM 追蹤碼

前往要驗證的網站後,點選右上方『 Tag Assistant 圖示 』後,選取『 Enable 』

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

接著就會轉換成此畫面

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

重整頁面後,標籤就會出現數字,數字代表此網頁使用了幾個追蹤碼

接著點選『 右上方 Tag Assistant 圖示 』後,選取『 Allow 』

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

接者會跳出要求其他權限的彈跳視窗,選取『 允許 』

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

再重整一次畫面後,看到『 Google Tag Manager 』的項目,檢查『 下方GTM追蹤碼 ID 』是否正確並『 亮綠燈 』,則代表成功掛載GTM追蹤碼

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

 

贊助商連結

如何在 WordPress 網站,串接 Google Analytics 4 ?

(1) 取得 GA4 追蹤碼

前往 Google Analytics 後台後,前往『 左下角齒輪 』 ->  點擊『 資料串留 』

選取要追蹤的『 資料串流 』

接著就會跳此資源的『 網頁串留詳情 』,先將『 加強行評估 』開啟後,並複製『 評估ID 』也就是 GA4 追蹤碼

(2) 在 GTM 設定 GA4 追蹤碼

前往GTM後台,進入『 代碼 』,點擊『 新增 』

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

接著輸入代碼的名稱,此教學取名為『 GA4-Page View 』,接著點擊『 代碼設定新增 』

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

接著會彈跳出代碼類型,此時選取『 Google代碼 』

在『 評估ID 』的地方,輸入『 步驟 5.1 』的『 GA4追蹤碼 』,設定下方『 配置設定 』

1、配置參數: seed_page_view 

2、值: true

點擊下方觸發條件,接著會彈跳出選擇觸發條件視窗,此時選取『 All Pages 』

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

點擊『 儲存 』

點擊右上角『 提交 』

版本名稱代表此次變更的原因標題,可留空白,自行選擇是否輸入,接著點擊『 發布 』

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

等 GTM 唱完歌以後,此次變更即發布成功

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

發布成功後,會列出變更的詳情,此篇教學不會詳細說明,想要瞭解的同學可自行上網 Google

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

 

如何驗證 WordPress 網站,是否成功串接 Google Analytics 4?

(1) 驗證 GA4 追蹤碼

前往要驗證的網站後,點選右上方『 Tag Assistant 圖示 』後,會看到『Global site tag (gtag.js) 』的項目,檢查『 下方GA4追蹤碼 ID 』是否正確,正確則代表成功掛載GA4追蹤碼

GA4 安裝教學 (一) - 快速將 WordPress 串接 Google Tag Manager 及 Google Analytics 4

 

下一篇:GA4 安裝教學 ( 二 ) – 快速將 WordPress 網站串接 Google Analytics 4 加強型電子商務

 

贊助Donate

如果您覺得我寫的文章有幫助到您,歡迎您請我喝杯咖啡

(總點閱次數 : 1,448 , 今日點閱數數 : 1 )
Andy 高嘉松
Andy 高嘉松

✓ 擁有8年MIS經驗以及使用WordPress製作過許多大型形象官網以及電商購物車網站
✓ 針對不同產業別給予專業建議及規劃,製作知名品牌網站,如黃色小鴨、佳世達等網站
✓ 熱愛研究網路服務、市場趨勢、用戶行為和動機, 熟悉GA、GTM、GSC工具
✓ 擅長數據分析、邏輯思考、資訊架構、系統整合

»購物車案例   »形象官網案例   »多語系網站案例

文章: 62
霍普行銷 Hope’s Marketing - 網站製作 | 平面設計 | 廣告投放 | 網路行銷