在將 GTM 代碼發佈到網站之前，我們千叮嚀萬交代一定要使用「 預覽」功能來測試代碼在網站上運作的情況，儘管你是照著我們之前的文章：「 如何用 GTM 預覽功能檢查代碼設定？」來進行，但有時就是天不從人願，GTM「 預覽 」功能不知道什麼原因就停止運作了，只能得到以下畫面。
- 我確定都把代碼安裝到網站上了，為什麼跟我說沒有？
- 工程師說他裝了，我怎麼還是看不到？
- 昨天還好好的，怎麼今天就不行了？
想必這是許多人在使用 GTM 時曾經碰到的情況，如果是剛接觸 GTM 的你，面對這樣的狀況心裡應該有更多的問號卻不知道如何處理？
不用擔心，今天這篇文章，我們會列出幾個常見的錯誤，下次如果遇到這種情況，就可以先依照清單上的項目一一除錯，或許就能解決「 預覽 」功能無法使用的問題了。
先從最簡單的開始處理
檢查容器代碼是否正確
常見的錯誤之一，你管理著許多 GTM 帳戶，有些給工程師的測試站使用，有些給 Staging 網站使用，忙中有錯，「 預覽 」功能啟動了錯誤的網站，此時可以檢查安裝在網站上的 GTM 容器代碼是否與眼前正在操作的 GTM 容器代碼相同。
最常見的情況就是：
- 在 A 容器「預覽」功能中打開了使用 B 容器的網站。
- GTM 容器根本沒有安裝到網站上。
ㅤ
你可以用以下這兩個方法確認：
#1. 透過 Tag Assistant 套件
下載 Google Tag Assistant Companion Chrome 擴充套件，接著在要「 預覽 」的網站啟動套件後，輸入網址，會看到以下畫面（其實也就是 GTM 預覽模式的畫面），最上方「GTM-xxxxx」 開頭的就是該網站所使用的容器 ID。
接著可以比對一下是否跟當前 GTM 操作介面的容器 ID 是一樣的。
其實 GTM「 預覽」功能打開的就是 Tag Assistant，如果透過「 預覽 」功能啟動測試網站卻得到以下畫面時，觀察一下上方的代碼標籤，通常第一個會是你當前正在操作的容器 ID，緊接在後的則是網站上安裝的容器 ID。
ㅤ
#2. 透過網頁開發者工具檢查
網站頁面上按右鍵 > 點擊「 檢查」> 開發者工具介面中 Ctrl+F or Cmd+F 打開搜尋欄位 > 輸入 「 GTM-」 或是「 完整容器 ID 」 > 確認網站上安裝的 GTM 容器是否與當前正在操作的相符。
如果沒有任何搜尋結果，那就是 GTM 容器沒有安裝到網站上，請與工程師確認。
ㅤ
是否使用同一個瀏覽器？
「 預覽」模式功能必須要在同一個瀏覽器底下開啟才可以正常運作，「 預覽 」功能啟動之後，GTM 會打開一個新的視窗或是頁籤，請確認是否都屬於同一個瀏覽器。
像是瀏覽器 Chrome 可以讓你登入不同的使用者帳號，同時開啟很多個瀏覽器，使用「 預覽模式」時，必須要注意是否在 A 帳號的 Chrome 操作 GTM，卻在 B 帳號的 Chrome 中打開了「 預覽模式 」的畫面。
（這情況很少發生，但難保不會有人在雙螢幕作業的情況下，「不小心」 複製了網址貼到其它螢幕上的瀏覽器 觀察，卻複製到了不同登入帳號的瀏覽器當中。）
ㅤ
把整個瀏覽器或是頁籤(Tab)關閉重開
如果上述的解方都無法解決你的情況，有時我們可以直接回歸到最原始的做法，也就是 重新啟動整個瀏覽器或是頁籤 。
先把 GTM 操作頁面的頁籤關閉，然後重新打開，或是直接關閉整個瀏覽器，接著重新啟動回到 GTM 操作介面當中。
ㅤ
注意瀏覽器是否阻擋了彈出的視窗？
當點下「 預覽」功能卻發現沒有任何反應，可以注意瀏覽器上方網址列是否有出現「 彈跳視窗阻擋」的提醒，如果有的話，記得設定成允許，這也是很常見的「 預覽 」模式無法開啟的情況，但也相對好處理多了。
移除「預覽模式」網址中的參數
在打開「 預覽模式 」時，如果你有特別注意到網站測試畫面的網址列的話，你應該會發現這網址列有點不一樣，會看到一串參數在網址列的後面，如下圖：
有時候可能是因為這個參數在作祟，我們可以將其移除測試看看。
在啟動 GTM「 預覽」功能時，可以注意到輸入網址列的下方有個欄位可以設定，不要將其打勾，然後連結要測試的網站，或許「 預覽 」功能就可以正常運作了。
只要不打勾，測試網站的網址就不會帶上參數 ?gtm_debug=1717213677499 。
GTM 容器代碼是否因編碼問題被更改了？
過去我們曾經提醒過，在請工程師安裝 GTM 容器時，不要將容器代碼直接複製貼上在 Email 或是 Word 檔案當中，否則可能會因為編碼的問題，造成容器代碼被更改產生錯誤，最常見的就是「引號」被改寫的問題，可以參考這篇文章的範例： 11 個可能造成 GTM 代碼沒有啟動的原因？
因此，我們除了可以用網頁開發者檢查工具檢查站上的代碼是否正確以外，也可以用較正確的方式將容器代碼交給工程師，避免因為編碼的問題影響了容器的正常運作。
什麼是正確的方式呢？
可以參考這篇文章：「 如何準備給工程師的 GA4 電子商務 Data Layer 資料層文件？ 」，雖然是在講電子商務事件，但邏輯是一樣的，只是我們放在 gist 上的是 GTM 容器代碼。
瀏覽器廣告阻擋套件影響「預覽模式」的啟動
如果你的瀏覽器有安裝如 Adblocker、 Adguard 或是 Ghostery 這一類的廣吿阻擋擴充套件，請先嘗試將套件關閉在打開預覽模式，觀察是否是因為這些擴充套件的影響。
除了這些擴充套件以外，如果你是 使用 Brave 瀏覽器操作 Google Tag Manager 也會造成問題 ，因此既然是 Google 的產品，我們還是都用 Chrome 來處理就可以了。
「環境」的「預覽模式」啟動方式不一樣
GTM 中的「 環境」功能可以幫助我們 將代碼部署到不同階段的網站 當中，方便我們更正確的測試，確保發佈到正式站的代碼萬無一失，不會讓網站出錯。
（關於「環境」功能的操作方式，建議先看這篇文章： 如何善用 GTM 的「環境」功能，發布代碼到測試網站？ ）
看完上面那篇文章之後，相信你就能理解這個段落在說明的情況了，因此如果你是要開啟特定「 環境」的預覽模式，就不能直接在 GTM 操作介面中，點選「 預覽 」按鈕的方式來開啟，而是要透過以下的步驟：
GTM 介面選擇上方「 管理」頁籤 > 於「 容器」區塊中選擇「 環境」> 點擊想要預覽的「 環境名稱」或是右邊「 動作」下拉選單選擇「 共用連結 」
詳細的圖文教學操作步驟，請參考文章： 如何進入測試環境的「預覽模式」？
內容安全策略 CSP 阻擋了「預覽」模式的啟動
「 內容安全策略 (Content Security Policy, CSP) 」是一種網頁安全標頭，主要是用在防止跨站腳本攻擊 (Cross-Site Scripting, XSS)、資料注入攻擊等常見的網頁攻擊，如果你有在網頁 <head></head> 的位置看到類似下圖的代碼，就必須要跟網站工程師討論，允許網站載入 GTM 的網域 tagassistant.google.com 。
Referrer Policy 影響了「預覽」模式的運作
Referrer Policy 是一種安全機制，用於控制瀏覽器在發送 HTTP 請求時如何處理 Referer 參數的行為，這有助於維持安全性，防止敏感信息不小心洩露至其它網站中，而且網站可以根據不同的需求，設置多種模式，是一種靈活且強大的機制，用於保護用戶隱私、增強網站安全性，並管理不同來源間的信息共享。
如果你在網頁中使用了 <meta name="referrer" content="none">，這將會影響到 GTM 的「預覽」模式，因為這將阻止瀏覽器正確地發送 Referer ，從而影響了 GTM 在預覽模式中的正常運作。
Data Layer 推送方式的錯誤
過去我們提到過，Data Layer 資料層的存在對於 GTM 非常重要，GTM 透過抓取 Data Layer 中的資料，讓代碼得以運作，但是推送 Data Layer 的方式正確與否，也會影響到「 預覽 」功能的正常運作。
正確的 Data Layer 推送代碼應為：
// 初始化 Data Layer
window.dataLayer = window.dataLayer || [];
// 推送初始頁面信息到 Data Layer
window.dataLayer.push({
‘event’: ‘pageview’,
‘pagePath’: ‘/home’,
‘pageTitle’: ‘Home Page’
});
而不是
// 初始化 Data Layer
window.dataLayer = [];
// 推送初始頁面信息到 Data Layer
window.dataLayer.push({
‘event’: ‘pageview’,
‘pagePath’: ‘/home’,
‘pageTitle’: ‘Home Page’
});
直接使用 window.dataLayer = [] 重設 Data Layer 是不建議的，因為這會清空先前推送到 Data Layer 的所有數據，造成 GTM 損壞，「 預覽 」模式也無法正確啟動。
如果對於 資料層 Data Layer 尚不熟悉的朋友，可以參考這篇文章： Data Layer 資料層是什麼？為什麼學 GTM 也要熟悉 Data Layer？
使用者同意聲明模式影響了「預覽」功能的啟動
這是在國外論壇上看到的，使用者同意聲明模式「可能」會擋住「 預覽」功能的啟動，如果從未在網站上按下同意按鈕，你的「 預覽模式 」便不會成功啟動。
這題的解法很簡單，按下同意然後再重新啟動一次「 預覽 」功能就可以了。
對於同意聲明模式尚不了解的朋友，可以參考這篇： 如何用 GTM 設定「Google 同意聲明模式（Consent Mode）」? 以及這篇： 如何用 GTM 的「同意聲明總覽」控制代碼的啟動？，相信可以幫助你對「 同意聲明模式 」有更進一步的認識。
總結一下
最後，我們來統整一下，未來如果遇到「 預覽 」功能無法正常運作時，可以先依照這幾個方式嘗試排除錯誤，如果還是不行，可以到我們的社群媒體上詢問，告知所遇到的狀況，讓我們協助你排除，也許會因此發現影響「預覽」功能正常運作的新問題。
如果有這樣的情況，我們也會逐步更新這篇內容，方便大家以後可以更快速的排除錯誤：）
