如何善用 GTM 的「環境」功能,發布代碼到測試網站?

Ian
I think, therefore I do.
7 min readFeb 17, 2024

GTM 中的「 環境 (enviroments)」是相當方便的一個功能,可以幫你將 GTM 代碼部署到不同階段的網站。

什麼是不同階段的網站呢?

在許多較為大型的網站當中,網站在上線之前可能會被切分成好幾個版本,例如給工程師專用的開發者測試網站或是給內部測試人員專用的臨時網站(Staging Site),當這兩個網站都沒問題之後,再將網站發布到正式站(Production/Live Site)供一般使用者訪問。

在之前的文章「 認識 GTM 帳戶結構:容器、工作區、版本以及環境」中,我們簡要介紹了「 環境」功能,接下來,我們將更詳細的解釋其概念與使用方式,讓你知道「 環境 」功能可以如何幫助你事半功倍,更謹慎且有效地的測試 GTM 代碼,避免在正式網站上出現錯誤。

什麼情況下會需要用到「環境」功能?

如果你不需要了解這個部分,請直接跳到 操作步驟

一般較為大型的網站,可能會將網站分為「 開發者測試網站(development site)」、「 臨時網站(staging site)」以及「 正式網站(Production/Live site)」,這樣做的目的是為了確保網站在上線時能夠順利運作,因為 正式網站基本上就是 臨時網站的複製版本,兩個網站會是完全一樣的,差別只有 臨時網站是一般使用者跟搜尋引擎無法訪問到的,因此只要 臨時網站驗收沒問題,工程師就會將其推送到 正式網站 ,讓網站正式上線,供一般使用者訪問和使用。

GTM 的「 環境」功能允許管理者只需管理一個 GTM 容器,並 將不同版本的 GTM 代碼發佈到不同環境進行測試 。這樣可以確保 GTM 代碼在正式網站上運作正常,並在測試網站上及時發現並修復錯誤,從而不影響正式網站的運作。

管理者可以先將 GTM 代碼發布到「 臨時網站」進行測試驗收,確認沒有問題後再推送到「 正式網站」,這樣做的好處在於最大程度地避免了 GTM 代碼導致「 正式網站 」出錯的可能性,尤其對於具有交易功能的網站來說,任何錯誤都是無法容忍的。

如何設定 GTM 的「環境」功能

建立「環境」

在「 預設環境 」區塊,我們會看到 Live 以及 Latest 環境,這兩個環境為 GTM 預設,無法刪除以及更改命名。

Live 代表已經上線到正式網站的版本,而 Latest 則是當前正在修改的容器版本,可以看到上圖範例中,Live 版本是 9,而 Latest 版本則是為 10,代表的目前有一個容器版本(版本 10)正在修改但尚未發佈到正式網站,如果發佈之後,Live 環境的版本編號就會變成 10。

在新增環境之後,我們開始進入「 環境 」設定的環節。

環境說明的部分是可填可不填的,不填寫也不會影響「 環境 」設置。基本上,環境名稱只要寫得清楚明確,讓人能夠清楚分辨不同的環境即可。

因為 新建立的「環境」中還沒有任何容器版本,因此在建立環境之後,GTM 會要求你選擇想要發佈到測試網站的「 容器版本 」,一般來說,我們會選擇發布最新版本的容器到測試網站上,以確保跟正式站所有的設定相同,也可以看自家專案需求做調整。

發佈之後,就可以看到我們建立的環境出現在版本管理介面當中。(原本只有「 最新」和「 已上線」),下圖中「 最新 Latest」環境為版本 10,而「 已上線 」環境和剛剛建立的測試環境都為版本 9。

安裝測試環境的 GTM 容器代碼

建立「 環境」之後,工作還沒有結束,我們必須要將該「 環境 」專屬的 GTM 容器代碼上傳到測試網站,才能在測試網站看到我們發佈到測試環境的代碼運作的樣子。

(就像是之前的 GTM 容器代碼安裝方式 一樣,只是這邊我們是安裝另一組測試站專屬的容器代碼。)

取得 GTM 容器程式碼片段之後,將該代碼片段交給工程師,請他們安裝在測試網站上,詳細的安裝方式可以參考文章: 如何安裝 GTM-Google 代碼管理工具?

進入測試環境的「預覽模式」

如果想要「 預覽」新建立的測試環境,我們不能透過 原本 GTM 介面中的「預覽」按鈕 進入預覽模式,必須要透過下面的方式:

GTM 介面選擇上方「 管理」頁籤 > 於「 容器」區塊中選擇「 環境」> 點擊想要預覽的「 環境名稱」或是右邊「 動作」下拉選單選擇「 共用連結

延伸閱讀: 如何用 GTM 「預覽模式」檢查代碼有無設定成功?

於「 到達網頁網址」欄位輸入測試站網址 > 複製下方預覽連結 > 貼入瀏覽器網址列 > 進入測試環境「 預覽模式

接下來的步驟,都跟 原本的「預覽模式一樣,唯一不同的是透過這個方式打開的是測試環境中的預覽模式, 只會顯示屬於該複製的預覽連結容器版本 ,而非當前正在修改的容器版本。

發佈容器到「測試」環境

假設今天我們更新了 GTM 容器中的代碼或是觸發條件等,想要先行發佈到測試站上,我們應該要怎麼做?

其實就跟一般代碼「 提交」的方式相同,唯一不同的是我們 需要更改所要發布的環境。

GTM 工作區介面右上角選擇「 提交」 > 點選提交變更介面左下角「 發布到環境」 > 選擇所要發布的環境名稱 > 「 發布 」容器

發布後,我們就可以在測試網站(Devlopement Site)上面看到我們所做的更動,而線上的正式站(Live)不會有任何影響,如果需要打開測試環境的「 預覽模式」,再參考 上一段的作法 就可以。

你可能有在我們其它文章中看過另一個作法,也就是 針對測試站我們會另開一個獨立的 GTM 容器,不與正式站的 GTM 容器共用,此舉是為了避免操作人員可能因為一時疏忽,在提交代碼的時候,忘了切換「 環境 」,將還未進行測試的代碼先行發布到了正式網站上。

然而,這種方法也有它的壞處,在代碼測試完成後,我們需要再次到正式站的 GTM 容器中進行設定,或者使用「 匯入容器 」功能將測試站的 GTM 容器代碼匯入到正式站的 GTM 容器中。這樣做可能會比較費時,需要額外的工作,但減少了出錯的可能性。

總結一下

GTM 的「環境」功能是一個相當方便且強大的工具,可以協助 GTM 操作人員更方便的管控 GTM 容器版本,並依據專案網站的規模來規劃不同的「 環境 」,只需要在提交代碼的時候多注意一下當下發布代碼是否有相對應到的正確環境就可以。

但如果你所管理的網站沒有這麼複雜,只有一個正式網站,那「環境」功能對你來說可能就不是那麼重要了,此時善用「預覽模式」的功能進行測試就足夠了。

--

--