全新Google Tag Manager 預覽模式完整使用教學 - 數據酷

開始使用新版GTM 預覽模式. 開啟預覽模式; 預覽模式版位介紹 ; 安裝Tag Assistant 外掛. 預覽iframe 頁面; 預覽手機瀏覽器大小 ; 你知道開啟預覽模式會自動 ... Skiptocontent 使用者資訊 訪客 最新文章 文章分類 GA4資源 GoogleAnalytics GoogleDataStudio GoogleTagManager 報表範本 DataStudio參數應用範例 電商跨媒體整合報表 GoogleAnalytics常用報表 YouTube影片留言深入洞察分析 GA4分析報表new_releases 追蹤粉絲專頁 GA4分析報表範本 查看範本報表 精選案例分享 查看完整內容 全新GoogleTagManager預覽模式完整使用教學 最後更新日期 2021年9月2日|GoogleTagManager 使用GoogleTagManager預覽模式可以檢查容器代碼、觸發器與變數以及網站DataLayer(資料層)是否正常運作；在正常狀況下，我們會在發布容器版本前先使用預覽模式來檢查代碼是否能夠如預期的被觸發。

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

目錄 為什麼要改版？新版vs舊版開始使用新版GTM預覽模式開啟預覽模式預覽模式版位介紹檢查容器代碼資訊檢查容器變數資訊檢查容器資料層資訊更新預覽模式安裝TagAssistant外掛預覽iframe頁面預覽手機瀏覽器大小同時預覽多個視窗emogi圖示你知道開啟預覽模式會自動啟用GA4DebugMode嗎？使用GTM預覽模式有什麼好處？GTM預覽是否會影響GA數據？預覽模式測試代碼可以正常觸發，但是GA沒收到數據怎麼辦？ 為什麼要改版？ 大多數的人對於全新的預覽模式都覺得莫名其妙，Google為什麼要對一個可以正常使用的功能進行大改版？事實上，為了因應瀏覽器對於cookie的限制，這次的改版絕對是必須的。

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

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

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

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

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

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

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

預覽模式版位介紹 URL連結狀態–查看目前預覽的網址為何以及連結狀態。

可使用的容器–網站使用的容器都會出現在這裡，包含GTM容器、GA4資源、GoogleAds、DV360等等(本篇文章只會針對GTM容器做說明)。

預覽頁面狀態–紀錄頁面所有觸發器資訊，即使跳轉到新的頁面，原本的數據還是會被保留。

觸發器詳細資訊頁籤–點選觸發器後，可以透過這四個頁籤查看該觸發器的詳細資訊：Tags(代碼):查看有哪些代碼在選擇的觸發器有觸發，哪些沒有觸發。

Variables(變數):查看選擇的觸發器有哪些變數可使用以及變數回傳的值為何。

DataLayer(資料層):查看選擇的觸發器能讀取的dataLayer資訊為何，所有dataLayer資訊都可以轉為可使用的變數。

Errors(錯誤):如果選擇的觸發器有錯誤，可在此查看錯誤訊息。

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

單獨點擊代碼可查看代碼的詳細資訊，包含代碼的內容資訊(Properties)、觸發此代碼的觸發器(MessagesWhereThisTagFired)與代碼的觸發條件(FiringTriggers)。

由於是從總覽資訊(Summary)點擊查看代碼資訊的，能查看的資訊其實非常有限，接下來將會教大家如何查看完整的代碼資訊。

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

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

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

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

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

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

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

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

安裝TagAssistant外掛 TagAssistant是Google為Chrome瀏覽器開發的代碼檢測輔助程式，TagAssistant可以幫助解決、驗證各種GoogleTags的安裝問題，包括GoogleAnalytics、GoogleTagManager、GoogleAds轉換追蹤等等，安裝TagAssistant外掛並不是必須的，但建議安裝；安裝TagAssistant外掛可以解鎖GTM預覽模式的額外功能，安裝外掛後並不需要做額外的設定，就可以自動啟用以下功能： 預覽iframe頁面 啟用TagAssistant就可以正常的預覽iframe網站；舉例來說，當A網站iframe了B網站的頁面，開啟A網站的預覽模式時，B網站也會同時被預覽模式偵測到並開啟預覽模式(右下角會出現提示的小視窗)。

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

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

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

你知道開啟預覽模式會自動啟用GA4DebugMode嗎？ GoogleAnalytics4提供了DebugView即時報表，專門紀錄已開啟DebugMode的裝置行為，包含事件、參數以及使用者屬性的數據，詳細介紹與使用教學可以參考GA4DebugView功能介紹與使用教學。

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

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

GTM預覽是否會影響GA數據？ 在預覽模式下觸發的代碼視同正式代碼，所以GoogleAnalytics也會收到對應的數據；可依照需求將GTM代碼設定為只在正式環境發布，或是透過GA篩選器設定排除預覽模式產生的數據，所以不需要擔心預覽模式會影響GA數據。

預覽模式測試代碼可以正常觸發，但是GA沒收到數據怎麼辦？ 請再次確認是否已經將最新的GTM版本發布至正式環境。

前往GTM容器”版本”分頁，可以查看所有版本資訊，包含版本發布狀態。

Postsnavigation ←GTMDataLayer資料層基礎介紹GTM入門介紹–使用GTM埋設GA追蹤碼→ 數據顧問服務 數據酷顧問團隊提供企業專屬的數據解決方案 了解詳情 文章許願池 想看什麼文章主題？ 我們會儘快為您安排 填表單許願 數據顧問服務 數據酷顧問團隊提供企業專屬的數據解決方案 了解詳情 文章許願池 想看什麼文章主題？我們會儘快為您安排 填表單許願 數據顧問服務 數據酷顧問團隊提供企業專屬的數據解決方案 了解詳情 文章許願池 想看什麼文章主題？我們會儘快為您安排 填表單許願 為什麼要改版？新版vs舊版開始使用新版GTM預覽模式開啟預覽模式預覽模式版位介紹檢查容器代碼資訊檢查容器變數資訊檢查容器資料層資訊更新預覽模式安裝TagAssistant外掛預覽iframe頁面預覽手機瀏覽器大小同時預覽多個視窗emogi圖示你知道開啟預覽模式會自動啟用GA4DebugMode嗎？使用GTM預覽模式有什麼好處？GTM預覽是否會影響GA數據？預覽模式測試代碼可以正常觸發，但是GA沒收到數據怎麼辦？ ScrollToTop