Skip to content

數據酷

[GTM] 入門介紹 – 如何將 GTM 安裝 到網站?

[GTM] 入門介紹 – 如何將 GTM 安裝 到網站?

在上一篇入門介紹中有提到,只要安裝 Google 代碼管理工具,就可以直接透過平台設定及佈署所需代碼,無論是來自 Google Analytics 、 Google Ads 、 Facebook Pixel 或第三方合作夥伴的代碼都包含在內,本篇文章將會帶你認識 GTM 的帳戶架構以及如何安裝 GTM 到網站。

Google Tag Manager 帳戶架構

Google Tag Manager 帳戶架構

GTM 是由帳戶、容器和代碼所組成,一個帳戶可以容納許多容器,每個容器都擁有自己的安裝編號,將容器安裝到網站上後即可將容器內的所有設定及代碼套用至網站上。

在正常的使用狀況下, Google 建議每個公司僅使用一個帳戶,每個網站使用一個容器。即便如此,我們還是會常常碰到公司內不同部門使用不同帳戶,甚至同網站使用多組容器,這最終一定會導致數據追蹤與代碼的衝突。除此之外,隨著代碼的增長,管理分佈在多個帳戶與容器的代碼、觸發器與變數絕對會產生許多的麻煩。所以切記,每個公司使用一個帳戶,每個網站使用一個容器!

開始安裝 GTM

Step1: 建立/登入 Google 帳戶

在 GTM 帳戶架構中我們有提到 GTM 的安裝編號必須從容器當中取得,所以我們必需先登入 Google 帳戶,接下來才能前往 Google Tag Manager 建立新的 GTM 帳戶與容器並取得容器的安裝編號。GTM 帳戶與容器皆提供完整的使用者權限管理功能,因此在創建 GTM 帳戶和容器後只需將權限開給相關人員即可分享帳戶或容器的內容。

Step2: 創建帳戶與容器

Google Tag Manager 帳戶

到達 GTM 後可以看到所有擁有權限的 GTM 帳戶 (預設為空白),點擊右上方”建立帳戶”即可創建新的 GTM 帳戶。

建立 GTM 帳戶與容器

在創建新帳戶的同時,必須建立一個新的容器 (之後可以單獨建立新的容器在同帳戶底下),帳戶名稱與容器名稱並不會影響後續的使用,建議將帳戶名稱設定為公司名稱,容器名稱設定為網站名稱,以方便日後的辨識。在容器的部分目前提供了網路、 iOS 、 Android 、 AMP 四種容器種類,可以根據需求選擇相對應的類別,每種容器會有各自不同的代碼可供使用,且在創建之後不能修改容器類別。

備註:本篇文章只會針對”網路”(網站)類別的容器做安裝介紹,其他種類的安裝辦法可以參考官方文件

Step3: 取得 GTM 容器安裝編號

GTM 容器代碼

成功創建容器後可以在容器上方看到容器的安裝編號 GTM-xxxxxxx ,點擊安裝編號即可取得完整的安裝代碼,只需將完整的代碼放進網站源代碼中的 <head> 與 <body> 指定位置即可將 GTM 安裝至網站中。

注意:安裝 GTM 時必須將安裝代碼放進網站中的每一頁,否則將只有擁有 GTM 安裝代碼的頁面能夠正常使用 GTM。

WordPress 網站安裝 GTM
如果你的網站是使用 WordPress 來架設,也可以使用這個外掛,下載啟用後只需將容器編號(GTM-xxxxxxx)填入並儲存即可完成 GTM 的安裝。

WordPress GTM 外掛

Step4: 檢查是否安裝成功

開啟 Google Tag Manager 預覽功能

這是最後也是最重要的步驟,我們不會希望在開始使用後才發現 GTM 沒有安裝成成功。容器的右上方可以找到”預覽”按鈕,在正常情況下,我們通常會在代碼發布以前使用預覽功能檢查及測試代碼是否設置正確,在這裡我們也可以使用預覽功能來檢查 GTM 是否成功的安裝在網站上。點擊預覽後會出現一個橘色的方框顯示”正在預覽工作區”,這就表示 GTM 已經開啟了預覽功能。

在網站使用 google tag manager 預覽功能

開啟預覽功能後,回到網站重整頁面, GTM 的預覽視窗就會自動跳出,只要能夠看到預覽視窗就表示 GTM 已經成功的安裝在網站上。

廣告版位

文章許願池

想看什麼文章主題?
我們會儘快為您安排

廣告板位

文章許願池

想看什麼文章主題?
我們會儘快為您安排

廣告版位

文章許願池

想看什麼文章主題?
我們會儘快為您安排
Scroll To Top