SEO 菜鳥成長史 · #28

CSP 擋掉 GA4 / GTM 怎麼辦?3 種被擋情境對照 + 5 分鐘排查 SOP

文 / Coolkid發布：2026-07-17閱讀約 9 分鐘

閱讀

中

摘要

GA4 或 GTM 裝了卻收不到數據，最常見的原因是 CSP(內容安全政策)的白名單漏了 Google 的網域。被擋只有 3 種情境，script-src 擋掉載入、connect-src 擋掉上報、GTM 還額外需要 frame-src。打開 F12 對照 console 的紅字，5 分鐘內就能定位是哪一種。

這篇跟之前的連載都不一樣。不是我又踩了新坑，是我第一次照 GSC 的訊號回頭補一篇文。

Lab 的 GSC 查詢裡，csp 相關的搜尋從週報 #3 到 #8 連續 6 期都有變體命中。

csp google analytics、ga4 csp、google analytics csp、csp ga、google tag manager csp，一共 5 個變體。

最有感的是 2026-07-15 那一期。

全站點擊崩到只剩 5 個，唯一逆勢進點擊的查詢就是「google tag manager csp」，1 個曝光、1 個點擊，100% 點閱率。

一個主題連續 6 週換不同的字來敲門，代表需求真實存在。

而我的舊文，也就是 #3 的踩坑紀錄，只回答了一半。當時我只寫自己撞到的那一種。

這篇把 CSP 擋 GA4 跟 GTM 的 3 種情境一次補齊，附上 console 紅字對照跟排查步驟，你不用再自己去翻官方的英文文件。

1. 先懂一件事:被 CSP 擋,只有「白名單沒有他」一種原因

CSP 可以想成網站門口的保全名單。

名單上分成好幾個欄位，誰可以進來執行程式、誰可以被連線傳資料、誰可以用內嵌框顯示。

每個欄位就是一條規則。

所以「GA4 被 CSP 擋掉」不是一種病，是三種。

Google 的工具要做三類動作，每一類對應一條規則，漏開哪一條就死在哪一關。

好消息是瀏覽器一定會在 console 用紅字告訴你是哪一條。你要做的只是看懂那行紅字。

2. 情境 1:script-src 擋掉載入 — console 直接紅給你看

症狀是這樣，GA4 或 GTM 的程式碼根本載不進來，後台永遠是 0。

F12 打開 console，會看到這種紅字：

紅字會直接指名是誰。

Refused to load the script
'https://www.googletagmanager.com/gtag/js?id=G-XXXX'
because it violates the following Content Security Policy
directive: "script-src 'self' 'unsafe-inline'"

翻成人話，你的 script-src 名單只放了自家跟行內，googletagmanager.com 不在名單上，瀏覽器直接拒絕載入。

解法是在 script-src 補上：

script-src 'self' 'unsafe-inline' https://*.googletagmanager.com;

這就是我 2026-05-11 撞到的那個問題。

自己半個月前鎖的 CSP，把當時全站 28 頁的 GA 一起悶掉，完整過程在 #3 那篇。

當時查半天以為自己貼錯位置，其實 console 第一行就把答案寫在臉上了。

3. 情境 2:connect-src 擋掉上報 — 最陰險,頁面看起來沒事

症狀是這樣，程式載進來了，網頁一切正常，你以為裝好了，但 GA4 即時報表永遠是 0。

因為數據要傳出去給 Google 的伺服器，而傳出去走的是 connect-src 這條規則，跟載入是兩關。

Refused to connect to
'https://region1.google-analytics.com/g/collect?...'
because it violates the following Content Security Policy
directive: "connect-src 'self'"

這一關陰險的地方在於，網頁畫面完全不會壞，不主動開 console 根本不會發現。

GA4 上報會打到好幾個端點，官方要求 connect-src 至少放行這三組。萬用字元寫在左側是合法的，能涵蓋地區端點：

connect-src 'self'
  https://*.google-analytics.com
  https://*.analytics.google.com
  https://*.googletagmanager.com;

我自己的站是 Vercel 靜態站加 gtag。

實測 script-src 一條加上 connect-src 這三條，就能穩定收到數據。

官方的完整清單還包含 doubleclick、google.com 這些廣告跟 Signals 相關的端點，有跑 Google Ads 或開 Signals 的站才需要，見第 5 節的對照表。

4. 情境 3:用 GTM 的人,還有兩個專屬關卡

先誠實聲明。我自己的站跑的是 gtag，直接埋 GA4。

情境 1 跟 2 是我親身除錯過的。

這一節的 GTM 專屬設定，是我丟給 agent 把官方指南抓回來對照整理的，2026-07-17 查核，不是親身踩坑。

GTM 比 gtag 多兩個關卡。第一，GTM 的預覽跟除錯模式，還有部分容器功能會用到內嵌框，要多開 frame-src：

frame-src https://www.googletagmanager.com;

第二，如果你在 GTM 容器裡用了自訂 JavaScript 變數，CSP 還得開 unsafe-eval。

官方文件明講這個權限「只在絕對必要時才用」，並建議改用自訂樣板取代。開了它等於把門開一個大縫，能不開就不開。

官方推薦的正規做法其實是一次性通行碼。

伺服器每次出頁面的時候生一個隨機值放進 script-src，GTM 會自動把這個通行碼傳給它注入的所有程式。

靜態站做不到「每次請求生隨機值」，所以像我這種 Vercel 靜態站走的是白名單網域法。兩條路都合法，看你的架構選。

5. 對照表:哪條規則該放哪些網域(Google 官方清單)

下表整理自 Google Tag Platform 的官方 CSP 指南。

官方還特別白紙黑字提醒，每個 Google 頂級網域都必須逐一列出。

因為 CSP 語法不允許在主機名右側使用萬用字元。想偷懶寫 google.* 是不合法的。

directive	GA4(gtag)最小集	官方完整清單另含(廣告 / Signals 用)
script-src	*.googletagmanager.com	—
connect-src	.google-analytics.com .analytics.google.com *.googletagmanager.com	.g.doubleclick.net .google.com 與各地區 TLD pagead2.googlesyndication.com
img-src	.google-analytics.com .googletagmanager.com	.g.doubleclick.net .google.com 與各地區 TLD
frame-src(GTM)	www.googletagmanager.com	—

「最小集」那一欄是我自己站上實測能穩定收數的組合，沒跑廣告、沒開 Signals。

右欄是官方的完整要求，之後要上 Google Ads 再照著補齊，不用一開始就全開。

6. 5 分鐘排查 SOP

五步走完就知道卡在哪。

Step 1 — 開網站按 F12,切到 Console 分頁,重新整理頁面。
Step 2 — 在 console 搜「Refused」。沒有任何紅字?那你的問題不是 CSP,去查 ID 有沒有貼錯或擋廣告外掛。
Step 3 — 讀紅字最後的引號:violates the following … directive 後面寫哪條(script-src / connect-src / frame-src),就是漏開哪關。
Step 4 — 對照第 5 節的表,把該 directive 補上對應網域;改的是出 CSP header 的地方(我是 vercel.json,你的可能在 nginx / meta tag / 主機設定)。改完一定要重新部署。
Step 5 — 回 GA4 後台開「報表 → 即時」,自己點一次網站。「過去 30 分鐘」有亮 1 就通了;標準報表要再等幾小時,不用慌。

7. 下一步:這篇本身就是一場公開實驗

說在前頭，這篇是 Lab 第一次「照 GSC 訊號補文」的實驗。

從已經連續 6 期有真實點擊的 csp 主題，往相鄰的搜尋需求擴，而不是憑感覺開新戰場。

上線後我會盯 4 期週報，追蹤這組查詢的變體數有沒有往外長。

也看點擊有沒有跟上。結果不管好壞，都會寫在之後的週報裡。

如果你照這篇修好了自己的 GA4，下一步建議把 GSC 也串起來，裝好監視器才看得到搜尋端的數據。流程在 #3 那篇的後半。

常見問題FAQ

GA4 裝了卻沒有數據,怎麼確認是不是 CSP 擋的?

開網站按 F12 看 console,搜「Refused」:有紅字寫 violates the following Content Security Policy directive 就是 CSP 擋的,紅字裡的 directive 名稱直接告訴你漏開哪條。完全沒紅字就不是 CSP,去查 Measurement ID 或擋廣告外掛。

CSP 要開哪些網域給 GA4?

最小集 4 條:script-src 加 *.googletagmanager.com;connect-src 加 *.google-analytics.com、*.analytics.google.com、*.googletagmanager.com。有跑 Google Ads 或開 Signals 才需要再照官方完整清單補 doubleclick 與 google 各地區網域。

GTM 跟 gtag 的 CSP 設定差在哪?

GTM 多兩關:預覽模式與部分容器功能需要 frame-src 開 www.googletagmanager.com;容器裡用「自訂 JavaScript 變數」還得開 unsafe-eval — 官方建議能免則免,改用 Custom Templates。

改了 CSP 之後多久看得到數據?

重新部署生效後,GA4「報表 → 即時」的過去 30 分鐘視窗,自己點一次網站通常 1 分鐘內就會亮。標準報表(非即時)要等幾小時到一天,別急著判定沒修好。

名詞解釋

內容安全政策（CSP, Content Security Policy）: 網站的白名單防火牆：只允許指定來源的程式跟資源執行，用來擋惡意注入。設太嚴會誤殺自己要用的工具。
指令（directive）: CSP 名單裡的一條規則欄位,例如 script-src 管「誰的程式可以執行」、connect-src 管「可以連線到誰」。
Console（主控台）: 瀏覽器按 F12 打開的訊息區,網頁被擋掉、出錯都會在這裡印紅字,是除錯第一站。
一次性通行碼（nonce）: 伺服器每次出頁面時生成的隨機字串,放進 CSP 後只有帶這個字串的程式能執行,比白名單更嚴格。靜態站通常做不到。
GTM（Google Tag Manager）: Google 的代碼管理工具:把 GA4、廣告追蹤等程式碼集中放進一個「容器」統一管理,不用逐頁改網站原始碼。
GA4（Google Analytics 4）: Google 的流量分析工具：訪客從哪來、看了什麼、停多久。GSC 管「搜尋結果上的表現」，GA4 管「進站後的行為」。
部署（deploy）: 把做好的網站或程式「推上線」讓所有人用得到的動作。
Vercel: 把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。

全站名詞表 · 166 條 →

看完這篇之前先確認:

適合你

GA4 裝了 console 一片紅、或即時報表永遠 0 的人
自己在 vercel.json / nginx 鎖過 CSP header 的靜態站
用 GTM 但預覽模式一直開不起來的人

不適合

WordPress 外掛全自動、從沒設過 CSP 的站(你大概率遇不到這題)
還沒開始裝 GA4 的人(先看 #3 的安裝全流程)
用 Plausible / Umami 等替代分析的站(排查方法可借,網域清單不同)

如果內容對你有用就太好了
隨喜斗內

NEXT CHAPTER ▸ #3 GA4+GSC 安裝踩坑:28 頁 GA 一起悶掉的原始事件