GTM 預覽模式就像許多演唱會、頒獎典禮的預演一樣，任何正式登台前的演出，都會先經過一番彩排，使用 Google 代碼管理工具時也是一樣，我們透過 GTM 設定好追蹤代碼、觸發條件以及變數，都可以預先透過 GTM 預覽模式在網站上面事先「預演」一遍，確定代碼是照我們想要的方式呈現或是將正確變數值送到 GA4 後，我們才會將代碼正式發佈到網站上。
這個動作相當重要，如果發佈的代碼與網站衝突，小狀況的話可能是讓網站跑版，出大事的話可能讓網站的交易功能停擺，所以任何代碼發布前，請先透過 GTM 「預覽模式」檢查一遍，謹慎三思而後行。
如何啟動 GTM 預覽模式？
- 要啟動預覽模式，首先來到 GTM 主畫面，點擊右上角的「預覽」按鈕。
(工作區變更數如果不是為 0，代表有新增代碼、觸發條件或是變數，如果 GTM 帳號是由多人管理，請記得先看一下變更紀錄新增、刪減或是修改了什麼東西，避免提交出了自己都不知道是在做什麼的代碼。)
ㅤ - 接著我們來到輸入網址的頁面，請輸入安裝 GTM 代碼的網站網址後點擊「連結」按鈕。
ㅤ - 連結後，會另開新分頁或是新視窗，畫面中會顯示你的網站（畫面右邊），這邊可以注意到的事情是右下角會有一個 Tag Assistant 已連結的提醒小視窗，告訴你除錯的資訊都會在 Tag Assistant 視窗中（圖中左邊橘框處），而網站網址後面也會加上 gtm_debug=xxxxxx 的參數，由此可判斷此畫面是測試模式，非正式站。
ㅤ - 接著我們回到預覽模式介面，也就是 Tag Assitant 視窗，這部分我們先講如何確定代碼有成功觸發就好，其它的部分如變數頁面 （Variables）、資料層（Data Layer）的部分，我們會另外做一期跟大家解說。
畫面左邊紅框處是負責顯示網站所有作動紀錄，你在網站上的任何點擊、捲動以及預設事件，都會顯示在這邊，同樣也包含頁面載入、代碼啟動這些資訊，隨著你在網頁上的動作，這邊會不斷地跳出新的資訊。
（關於這五個最先啟動的事件，可以參考文章：認識 GTM 網頁觸發條件）
右邊則是此頁面有啟動的代碼以及有設定但未啟動的代碼，可以看到畫面中只有 GA4 的代碼因為是設定全站觸發所以被啟動，而下方兩個追蹤出站連結還有 IG Logo 點擊的代碼則因為沒有人點擊所有沒有啟動。
ㅤ - 接著當我們點擊網站連結後，可以看到左邊紅框處多了幾個事件紀錄，記錄著「連結點擊」以及剛剛在網站上面的「捲動」行為，這些都會被記錄下來並傳送相關資訊於 Data Layer 當中，方便未來我們取用（用來傳送給 GA4 或是觸發其他代碼）
而右邊我們可以看到原本在下方的未被觸發的代碼移到上面來了，代表我們設定的代碼成功被啟動，因為這是 GA4 事件，所以我們理應在 GA4 當中也會看到相對應的事件名稱。
ㅤ - 來到 GA4 當中的「即時報表」中，可以看到事件中（右邊紅框）出現了「Outbound_link_click」以及「有人點擊你的IG-Logo啦-!」事件被傳送到 GA4 當中了，同時也可以看到有來自 tagassistant.google.com 的使用者（左邊紅框），也就是剛剛在進行測試的我。
這樣我們就可以很確定我們設定的代碼，有照我們想要的方式被啟動，而 GA4 也有接收到相對應的資料。
除了透過即時報表觀看以外，我們也可以到 GA4 的「Debug View」當中看到 GTM 送進來的事件。
ㅤ - 確認所有設定都沒問題之後，發佈提交到網站上面即可，如此一來代碼就會在網站上正式運作，網站的使用者在網站上只要有符合你所設定的觸發條件，就會啟動相對應的代碼。
ㅤ - 搞定，記得幫網站新增代碼或是有做任何修改時，都必須要先使用預覽模式 Tag Assistant 進行確認，才不會無腦發布後讓正式站出亂子，否則你可能就會馬上接到工程師部門打來的電話。
點擊代碼卡片獲得更多資訊
如果我們點擊左邊事件列表中的其中一個項目，例如下圖中的 Scroll Depth，可以看到右邊出現被觸發的代碼卡片，點開卡片我們可以獲得更多與該事件相關的資訊還有觸發此事件的條件設定為何。
透過事件卡內部的資訊來確認設定的事件參數是否正確，以及當代碼未成功觸發時，我們可以在這邊看到是不是因為觸發條件沒有正確設定所以造成代碼未成功啟動。
題外話：Click 不只是 Click
在上面步驟 5 的地方，我們看到左邊有個 Link Click 紀錄，除了觸發了我們代碼之外，同時也推送了這條連結的許多相關資訊到 Data Layer，例如連結的 URL、Class、CSS 層級以及是否另開視窗等資訊。
而這些資訊都可以對應到 GTM 中的變數如：Click URL、Click Classes、Click Target 以及 Click Element 等等。
這也就是為什麼我們能在點擊事件中抓到參數值的原因，因為我們可以將這些變數應用在追蹤事件的代碼當中，當 GA4 事件代碼觸發之後，除了事件名稱以外，也同時將相關的參數傳送給 GA4。
以下圖為例，當使用者點擊了外部連結時，GTM 就會發送一個「Outbound_link_click」的事件到 GA4，同時帶著當下被點擊的連結（Click URL）以及被點擊的文字（Click Text）兩個參數值，未來我們就可以在 GA4 報表當中看到這些資訊。
關於 Data Layer 這個部分，可以參考這篇文章：Data Layer 資料層是什麼在 GTM 中擔綱的角色是什麼？
延伸閱讀
如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎看看其它文章，繼續探索（這坑？這地獄？這片樂土？）
同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）