11 個 GTM「預覽」功能無法啟動的原因

在將 GTM 代碼發佈到網站之前，我們千叮嚀萬交代一定要使用「預覽」功能來測試代碼在網站上運作的情況，儘管你是照著我們之前的文章：「如何用 GTM 預覽功能檢查代碼設定？」來進行，但有時就是天不從人願，GTM「預覽」功能不知道什麼原因就停止運作了，只能得到以下畫面。

  • 我確定都把代碼安裝到網站上了，為什麼跟我說沒有？
  • 工程師說他裝了，我怎麼還是看不到？
  • 昨天還好好的，怎麼今天就不行了？

想必這是許多人在使用 GTM 時曾經碰到的情況，如果是剛接觸 GTM 的你，面對這樣的狀況心裡應該有更多的問號卻不知道如何處理？

不用擔心，今天這篇文章，我們會列出幾個常見的錯誤，下次如果遇到這種情況，就可以先依照清單上的項目一一除錯，或許就能解決「預覽」功能無法使用的問題了。

本篇重點

先從最簡單的開始處理

檢查容器代碼是否正確

常見的錯誤之一，你管理著許多 GTM 帳戶，有些給工程師的測試站使用，有些給 Staging 網站使用，忙中有錯，「預覽」功能啟動了錯誤的網站，此時可以檢查安裝在網站上的 GTM 容器代碼是否與眼前正在操作的 GTM 容器代碼相同。

先確認 GTM 操作介面中的容器 ID

最常見的情況就是：

  1. 在 A 容器「預覽」功能中打開了使用 B 容器的網站。
  2. GTM 容器根本沒有安裝到網站上。

你可以用以下這兩個方法確認：

#1. 透過 Tag Assistant 套件
下載 Google Tag Assistant Companion Chrome 擴充套件，接著在要「預覽」的網站啟動套件後，輸入網址，會看到以下畫面（其實也就是 GTM 預覽模式的畫面），最上方「GTM-xxxxx」 開頭的就是該網站所使用的容器 ID。

接著可以比對一下是否跟當前 GTM 操作介面的容器 ID 是一樣的。

透過 Tag Assistant 打開網站後的畫面

其實 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> 的位置看到類似下圖的代碼，就必須要跟網站工程師討論，是否有阻擋 GA4 或是 GTM 的載入，如果有，請工程師允許網站載入 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 的「同意聲明總覽」控制代碼的啟動？，相信可以幫助你對「同意聲明模式」有更進一步的認識。

總結一下

最後，我們來統整一下，未來如果遇到「預覽」功能無法正常運作時，可以先依照這幾個方式嘗試排除錯誤，如果還是不行，可以到我們的社群媒體上詢問，告知所遇到的狀況，讓我們協助你排除，也許會因此發現影響「預覽」功能正常運作的新問題。

如果有這樣的情況，我們也會逐步更新這篇內容，方便大家以後可以更快速的排除錯誤：）

  1. 先從最簡單的開始處理
    • 檢查容器代碼是否正確
    • 是否使用同一個瀏覽器？
    • 把整個瀏覽器或是頁籤(Tab)關閉重開
    • 注意瀏覽器是否阻擋了彈出的視窗？
  2. 移除「預覽模式」網址中的參數
  3. GTM 容器代碼是否因編碼問題被更改了？
  4. 瀏覽器廣告阻擋套件影響「預覽模式」的啟動
  5. 「環境」的「預覽模式」啟動方式不一樣
  6. 內容安全策略 CSP 阻擋了「預覽模式」的啟動
  7. Data Layer 推送方式的錯誤
  8. 使用者同意聲明模式影響了「預覽」功能的啟動

延伸閱讀

如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎看看其它文章，繼續探索（這坑？這地獄？這片樂土？）

同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）

Tags