全新 Google Tag Manager 預覽模式完整使用教學

使用 Google Tag Manager 預覽模式可以檢查容器代碼、觸發器與變數以及網站 Data Layer (資料層)是否正常運作；在正常狀況下，我們會在發布容器版本前先使用預覽模式來檢查代碼是否能夠如預期的被觸發。

如果你本來就有使用 Google Tag Manager ，你應該已經發現預覽模式已經默默的改版，且這次改版， Google 並沒有提供任何的緩衝時間，原本的預覽模式已經切換成新的版本，這也表示我們必須重新適應新的預覽模式，本篇文章將會說明新版和舊版的差異，並提供完整的使用說明。

為什麼要改版？

大多數的人對於全新的預覽模式都覺得莫名其妙， Google 為什麼要對一個可以正常使用的功能進行大改版？事實上，為了因應瀏覽器對於 cookie 的限制，這次的改版絕對是必須的。

第三方 cookie

舊版預覽模式使用的是第三方 cookie ，少了這個 cookie ，預覽模式基本上就無法運作了，這也是為什麼先前在阻擋第三方 cookie 的瀏覽器無法正常的使用 GTM 預覽模式(例如 Safari 、 Chrome 無痕模式等等)。

事實上，由於使用者對於個資的保護意識越來越強烈，整個網路產業已經慢慢的將第三方 cookie 淘汰（包含 Google Chrome 在內），這也意味著舊版預覽模式停止運作是遲早的問題；因此，在這次的改版， GTM 預覽模式已經從原本的第三方 cookie 轉移為第一方 cookie 。

新版 vs 舊版

開始使用新版 GTM 預覽模式

開啟預覽模式

點擊 GTM 容器右上方的預覽按鈕後會開啟新的預覽視窗，如果視窗沒自動跳出請檢查瀏覽器是否阻擋彈跳視窗，從點擊預覽到視窗開啟可能會需要好幾秒鐘(這也是新版預覽模式的一大痛點)。

新的視窗跳出後，在 URL 的欄位填入要預覽的網址，然後點擊 Start 。

備註：下方有一個選項 Include debug signal in the URL，打勾之後預覽模式的頁面網址會自動帶入預覽模式的參數(gtm_debug=x)，這可以幫助系統判定預覽模式是否為開啟的狀態，除非網站會因為這個參數導致錯誤，不然建議開啟這個選項，可以讓預覽模式更穩定。

啟動預覽模式後會自動開啟一個新的視窗跳轉到剛剛填入的 URL，這時候總共會有三個視窗(GTM 容器、預覽視窗、目標 URL)，如果連結成功在預覽視窗會看到下方的圖示。

開啟目標 URL 的視窗右下角會出現一個提示視窗，上面會顯示目前的狀態(連結成功或失敗)。

預覽模式版位介紹

1. URL 連結狀態 – 查看目前預覽的網址為何以及連結狀態。
2. 可使用的容器 – 網站使用的容器都會出現在這裡，包含 GTM容器、GA4資源、Google Ads、DV360等等(本篇文章只會針對GTM 容器做說明)。
3. 預覽頁面狀態 – 紀錄頁面所有觸發器資訊，即使跳轉到新的頁面，原本的數據還是會被保留。
4. 觸發器詳細資訊頁籤 – 點選觸發器後，可以透過這四個頁籤查看該觸發器的詳細資訊：
   • Tags(代碼): 查看有哪些代碼在選擇的觸發器有觸發，哪些沒有觸發。
   • Variables(變數): 查看選擇的觸發器有哪些變數可使用以及變數回傳的值為何。
   • Data Layer(資料層): 查看選擇的觸發器能讀取的 dataLayer 資訊為何，所有 dataLayer 資訊都可以轉為可使用的變數。
   • Errors (錯誤): 如果選擇的觸發器有錯誤，可在此查看錯誤訊息。

檢查容器代碼資訊

選擇代碼分類頁籤時，預設會顯示代碼在頁面的總覽資訊(Summary)，可以看到當前所有已觸發的代碼(Tags Fired)與未觸發的代碼(Tags Not Fired)，除此之外，也可以單獨點選左側的觸發器查看觸發器哪些代碼有觸發，哪些代碼沒有觸發。

單獨點擊代碼可查看代碼的詳細資訊，包含代碼的內容資訊(Properties)、觸發此代碼的觸發器(Messages Where This Tag Fired)與代碼的觸發條件(Firing Triggers)。由於是從總覽資訊(Summary)點擊查看代碼資訊的，能查看的資訊其實非常有限，接下來將會教大家如何查看完整的代碼資訊。

要查看完整的代碼資訊首先要找到該代碼的觸發器(可以從上一步的觸發此代碼的觸發器資訊欄位找到)，以上圖頁面瀏覽代碼來說，因為觸發器是網頁瀏覽(Container Loaded)，所以選擇網頁瀏覽觸發器時可以看到代碼是有成功觸發的，如果選擇其他的觸發器(DOM Ready)則會變成未觸發。

先選擇觸發器再點擊代碼查看詳細資訊時，可以看到代碼的詳細資訊介面已經有點不一樣了，下方的觸發條件多了檢查的符號(打勾與打叉)，當觸發條件打勾即代表有達成該觸發條件，所有觸發條件都打勾時代碼就會觸發；當我們使用複雜的觸發條件時就可以利用這個功能來檢查代碼是否按照預期達成所有的觸發條件，如果沒有，也可以很輕鬆的就找出是哪一項觸發條件沒有達成。

除了觸發條件以外，代碼詳情的右上方可以看到多了一個選項Display Variables as(這個選項不會出現在 Summary )，預設Names只會顯示代碼所使用的變數名稱，手動選擇Values即可將變數展開變數顯示實際的數值。

檢查容器變數資訊

選擇變數分類頁籤時，預設會顯示變數在頁面的總覽資訊(Summary)，但並不會有任何變數資訊出現，這是正常的，因為變數在每一個觸發器都有可能改變，所以要查看變數必須要分別點選每一個觸發器來查看該觸發器的變數值是什麼。

舉例來說，點擊數據酷網站訂閱與與我們聯繫按鈕時，會產生兩個 Link Click 觸發器，分別點擊兩個觸發器可以查看所有的變數，可以看到其中 Click Text 和 Click URL 都因為點擊的目標不同而有著不同的變數值；除了查看變數以外，也可以利用這個方式來檢查我們要使用的觸發器是否儲存著正確的變數值。

檢查容器資料層資訊

點擊左側任一個觸發器時，在 Data Layer 頁籤(Data Layer values after this Message區塊)可以查看該觸發器能讀取到的全部 dataLayer 資訊(包含其他觸發器送出的 dataLayer 資訊)，在上方有一個 API Call 的區塊則可以看到選擇的觸發器所送出的 dataLayer.push 資訊，之所以會叫 API Call 是因為這邊不只可以看到 dataLayer.push 的資訊，如果觸發器有送出 gtag 的訊號，也會同步出現在這個區塊。

備註：當我們重複發送名稱相同但數值不同的資訊時，新的資訊就會覆蓋舊的資訊，詳細資訊可以參考 GTM Data Layer 資料層基礎介紹。

更新預覽模式

開啟預覽模式後如果想要載入新的變更，重整預覽視窗並不會載入新的變更，必須回到 GTM 容器重新點擊預覽，並重複先前所有步驟重新啟動預覽視窗，新的變更才會套用到預覽模式。

安裝 Tag Assistant 外掛

Tag Assistant 是 Google 為 Chrome 瀏覽器開發的代碼檢測輔助程式，Tag Assistant 可以幫助解決、驗證各種 Google Tags 的安裝問題，包括 Google Analytics 、 Google Tag Manager 、 Google Ads 轉換追蹤等等，安裝 Tag Assistant 外掛並不是必須的，但建議安裝；安裝 Tag Assistant 外掛可以解鎖 GTM 預覽模式的額外功能，安裝外掛後並不需要做額外的設定，就可以自動啟用以下功能：

預覽 iframe 頁面

啟用 Tag Assistant 就可以正常的預覽 iframe 網站；舉例來說，當 A 網站 iframe 了 B 網站的頁面，開啟 A 網站的預覽模式時， B 網站也會同時被預覽模式偵測到並開啟預覽模式(右下角會出現提示的小視窗)。

預覽手機瀏覽器大小

預設預覽目標 URL 會在另外一個全新的視窗開啟，啟用 Tas Assistant 外掛後，目標 URL 會在新的分頁開啟，這讓我們可以將視窗切換成手機瀏覽器大小，且因為預覽視窗是獨立的，所以不會被手機版的視窗大小影響。

同時預覽多個視窗

預設情況下，如果預覽的網頁開啟新的分頁，新分頁並不會連結到原本的預覽模式，所有預覽行為必須在一開始開啟的視窗下完成，開啟 Tag Assistant 外掛後，如果預覽網頁開啟新的分頁，新分頁也會連結到原本的預覽模式，可以同時預覽並紀錄多個分頁的行為。

emogi 圖示

開啟 Tag Assistant 外掛後，因為支援了多視窗的功能，所有預覽視窗都會隨機出現一個 emoji 符號，讓你可以快速配對預覽視窗。

你知道開啟預覽模式會自動啟用 GA4 Debug Mode 嗎？

Google Analytics 4 提供了 Debug View 即時報表，專門紀錄已開啟 Debug Mode 的裝置行為，包含事件、參數以及使用者屬性的數據，詳細介紹與使用教學可以參考 GA4 Debug View 功能介紹與使用教學。

更多預覽模式的說明可以參考官方文件。