如何安裝 GTM-Google 代碼管理工具?

如果你是接手公司網站,已經安裝 GTM 完畢,那麼這篇就不用繼續看下去了。

但如果是自己架設了網站並且尚未安裝 GTM,這篇文章會教你該如何進行 Google 代碼管理工具容器的安裝,完成這一步之後,接下來我們就可以開始進行網站追蹤的設定,如果你還不知道什麼是 Google 代碼管理工具,那可以參考這篇文章「Google 代碼管理工具是什麼?」,可以幫助你對 GTM 有進一步的認識,也可以正確了解到這工具是否可以幫助你解決你當前網站所面臨的問題。

在開始之前,接下來的安裝方式需要對網站的 HTML 有些基本的認識,只要知道怎麼找到網站原始碼中的 <head> 以及 <body> 標籤就可以了,如果不知道也沒關係,跟著以下步驟,也能正確安裝好你的 Google 代碼管理工具。

接下來的教學會根據我們自建的 WordPress 網站安裝,但如果你是其它類型網站,基本原理都是一樣的,(例如 Blogger 等)。

(WordPress 本身也有提供許多 GTM 相關安裝外掛,例如 Google 推出的 sitekit 或是知名的 GTM4WP,網路上搜尋一下選擇一個使用就可以。這篇文章是基於自建本地端測試站的安裝方式,也是幫助你從根本了解到底是把 GTM 容器代碼裝到了網站上什麼樣的位,未來在進行新專案時,儘管不是你自行安裝 GTM,了解這些流程也能幫助到你與工程師的溝通。)


透過修改網站原始碼安裝 GTM

下載 HTML 編輯器

開始之前,先下載網站 HTML 編輯器 Sublime Text(或是任何你慣用的 HTML 編輯器都可以),我們將直接修改網站原始碼進行 GTM 的安裝。

打開本地端網站資料夾

在架站軟體「Local」的介面中,打開網站資料夾,我們可以找到資料夾所在位置,然後用 HTML 編輯器開啟檔案進行編輯。

如果不知道如何自行架設本地端網站,可以參考這篇文章:GTM 做中學最快!自建免費 WordPress 網站練習 GTM 設定

在編輯器中打開 Header 檔案

如果是透過 WordPress 自建網站,我們所需要的檔案位置通常會在 Local Sites > 「網站名稱 > App > public > wp-content > themes > 「佈景主題名稱」> header.php

接著我們透過 Sublime Text 編輯器打開該檔案,會來到以下畫面,因為 GTM 會有兩段代碼分別要安裝在 頁面 <head> 以及 <body> 標籤的部分,只要找到這兩個地方,整個安裝代碼程序就算完成一半了。

找到 GTM 安裝代碼

GTM 操作介面 > 點選「管理」頁籤 > 安裝 Google 代碼管理工具 > 複製代碼

放置 GTM 代碼

將代碼分別透過 Sublime Text 放置在 header.php 檔案內 <head></head> 以及 <body></body> 標籤的部分,點擊儲存。

大功告成,接著就可以透過預覽模式來確認代碼是否有在站上正常運作,如果一切順利安裝,你就會在預覽模式中看到以下畫面。

如果你是依照學習指南編排的順序看到這邊,你應該還不會知道什麼是預覽模式,沒關係,我們可以先跳過去看這篇文章了解 GTM 的預覽模式:「如何用 GTM 「預覽模式」檢查代碼有無設定成功?

這樣就代表 GTM 容器已經順利安裝到網站上面,就可以開始進行所需要的網站追蹤設定,例如幾個網站基本追蹤代碼: GA4 評估 IDMeta 廣告 Pixel 的安裝以及 Google Ad 轉換追蹤碼的安裝。


透過 WordPress 外掛安裝 GTM

如果你的網站是用 WordPress 架站,我們也可以透過 WP 官方提供的外掛來完成 GTM 的安裝,以下我們以「GTM4WP」為例:

#1 Google 搜尋「GTM4WP」或是 WP 後台左側面板 > 外掛 > 搜尋「GTM4WP

#2 安裝之後,回到 WP 後台左側面板,可以看到「設定」項目中會多出一個 Google Tag Manager 的選項。

WP 後台左側面板 > 設定 > Google Tag Manager

#3 於「一般設定」頁籤中,填入 GTM 容器的 ID,這邊不需要填入整串 JS 代碼,只要填入 GTM ID 並儲存設定就可以。

至於 GTM ID 在哪裡呢?請看下一步驟。

#4 GTM 介面上找到 GTM ID。

#5 搞定,跟前一段所說的一樣,最後記得要透過「預覽模式」測試一下,確認網站是否已經與 GTM 連結。


總結

經過了上述的安裝步驟之後,相信已經對 GTM 的安裝方式有了瞭解,但並不是每間公司你都可以碰觸到網站原始碼,有些市面上的電商網站甚至只需要你在後台填入 GTM 代碼 ID 就可以將網站與 Google 代碼管理工具連結了。

而透過 WordPress 架設的網站,也有許多 GTM 容器安裝外掛可以使用,例如 Google 官方的 Site Kit 外掛,只要你登入 Google 帳號,就可以將你有權限的服務,連結到你的 WP 網站當中,或是開頭以及文中教學提到的 GTM4WP 都是相當方便的 GTM 安裝外掛。

雖然一年要進行代碼安裝的次數可能不超過三次,畢竟這就是一次工,不過自己走一遍還是有好處的,最起來可以從根本了解 Google 代碼管理工具是如何與網站連結,遇到新網站時,也才會更清楚知道自己需要什麼樣的資源來幫助你更順利建構網站代碼的追蹤。


延伸閱讀

如果你很喜歡這篇文章並且覺得內容有幫助,又剛有些多餘時間,歡迎你看看其它文章,繼續探索(這坑?這地獄?這片樂土?)

同時,如果對於內容有疑問或是建議,也歡迎你留言告訴我們:)