找我們做網站
↑
Seo · Google Analytics 教學

用 Google Tag Manager 安裝 GA:申請帳戶到設定代碼教學

Google Analytics 教學發布 2019.03.25更新 2026.10.02閱讀約 6 分鐘
用 Google Tag Manager 安裝 GA:申請帳戶到設定代碼教學

重點整理
Google Tag Manager(GTM)讓你在網站只放一次程式碼,之後 GA、Hotjar 等追蹤代碼都在 GTM 後台新增與管理。本文示範申請帳戶、建立容器、安裝程式碼與新增 GA 代碼;文中為舊版 UA 代碼,GA4 請選「Google 代碼」。

Google Tag Manager 安裝 GA 追蹤碼 相對於使用 WordPress 主題編輯器或外掛導入的方式而言更為穩定,Google 代碼管理工具可以整合許多與網站相關的追蹤 ID ,以外部導入的方式讓追蹤程式碼在網站中可以正確運作,讓所有連動程式可以獲得統一管理,也能避免掉編輯程式碼導致網站問題的風險。
本篇教學將說明如何申請 Google Tag Manager 帳戶並與網站串接的方法,在第二小節也會將加入 GA 追蹤 ID 的操作步驟做完整的圖文解釋,增加代碼的方式不只適用於 Google Analytics ,像是 hotjar 這一類的網站分析工具,同樣也可以使用 Google 代碼管理工具導入。

Google 代碼管理工具帳戶申請步驟

第一步:進入 Google Tag Manager 點選 Start for free 按紐,以 Google 帳戶登入後就可以進入操作介面。

Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼

第二步:在代碼管理工具中點選建立帳戶。

Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼

第三步:下圖標示的位置分別填入帳戶名稱(網站名稱)、國家地區,容器設定請輸入網站網址,使用位置記得選擇網路,接者點選建立。

Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼

標示的位置打勾即可完成帳戶建立。

Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼

第四步:Google 代碼管理工具同樣需要加入網站串接程式碼,與直接加入 GA 追蹤程式碼不同的是只需要輸入一次 Google 代碼管理工具,其它的網站連動程式之後都可以在 Google 代碼管理工具上直接做串接,非常方便。

Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼

第五步:加入的方式同樣是是在 HTML 標籤 </head>上方與 <body>下方空白區域分別加入 Google 代碼管理工具提供的程式碼。

Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼

第六步:下圖是 <body>大致上放的位置,如果在 header.php 中找不到 <body>,那麼可以在 footer.php 中尋找,每一個網站安裝的主題架構都不相同,因此筆者無法一一列出,加入後記得點選更新檔案。

Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼

在 Google 代碼管理工具中設定 GA 追蹤程式碼

第一步:建立完成後會進到如下圖的畫面,點選新增代碼。

Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼

第二步:在 Google 代碼管理工具中每一組設定都可以視為一個容器,因此在代碼設定時必須為容器取名稱,如下圖左上角筆者直接輸入 GA 追蹤碼做為容器名稱,在日後也較方便統一管理,接者點選代碼設定,在代碼類型中選擇第一個 GA 分析。

Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼

第三步:在 GA 分析的欄位中設定變數,接者在追蹤編號的欄位中輸入 GA 追蹤 ID。

Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼

第四步:接者點選觸發條件,因為 GA 追蹤碼是針對整個網站做分析,因此在條件上請選擇 All Page (全部頁面),如圖二所示。

Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼

第五步:下圖是完成設定後的畫面,點選右上角的儲存。

Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼

第六步:Google Tag Manager 容器設定完成後必須要提交才會生效,在點選提交按鈕後,輸入此次變更的內容文字,作為不同版本的提示,接者點選發佈,如下圖所示。

Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼

第七步:完成後在進入下圖的畫面,則表示發佈完成。

Google Tag Manager 安裝 GA 追蹤碼
Google Tag Manager 安裝 GA 追蹤碼

用 GTM 安裝追蹤碼要注意什麼?

GTM 讓追蹤碼集中管理,但設定時要避免幾個常見錯誤:

  • 不要重複安裝 GA:用 GTM 載入 GA4 後,就要移除主題、外掛或手動貼上的 GA 程式碼,否則數據會重複計算。
  • 兩段容器程式碼都要放:一段放在 head,另一段 noscript 放在 body 開頭;WordPress 可用外掛或子主題加入。
  • 每次發布寫版本說明:出問題時才能快速找到是哪次修改並還原。
  • 控管帳戶權限:GTM 可以在網站上執行任意程式碼,只給需要的人發布權限。

常見問題

用 GTM 安裝 GA4,代碼類型要選什麼?

選「Google 代碼」,在代碼 ID 欄位填入 GA4 的 G- 開頭評估 ID,觸發條件選「Initialization – All Pages」或所有網頁。文中示範的通用 Analytics 代碼與 UA 追蹤 ID 已在 2023 年 7 月 1 日停止處理資料。

Google Tag Manager 是免費的嗎?

是的,Google 代碼管理工具一般版可以免費使用,用 Google 帳戶登入後就能建立帳戶與容器。另有企業用的 360 版本,一般中小企業網站使用免費版就足夠。

GTM 設定好後為什麼 GA 沒有資料?

最常見的原因是容器還沒「提交」發布。GTM 的修改要按右上角提交並發布版本才會生效;也可以先用「預覽」模式確認 Google 代碼有在頁面觸發,再到 GA4 即時報表查看。

結語

以 Google 代碼管理工具導入 GA 追蹤碼操作方式其實並不複雜,除了串接 GA 之外,也可以將 schema.org  結構化資料的標記內容加入到網站中執行,相關的教學之後如果有機會寫到 Google 代碼管理工具的介紹,會再詳細說明。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。