Google Analyticsのトラッキングコードを貼るとRefused to execute inline script because it violates the following Content Security Policy directive

Google Analyticsのトラッキングコードの説明では

このプロパティで使用できる Global Site Tag（gtag.js）トラッキングコードです。このコードをコピーして、トラッキングするすべてのウェブページの内の最初の要素として貼り付けてください。ページにすでに Global Site Tag が配置されている場合は、以下のスニペットの config 行のみを既存の Global Site Tag に追加してください。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXX-X');
</script>

とあるけど、実際にHTMLに張り付けるとエラーが出る。

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' https: 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-...='), or a nonce ('nonce-...') is required to enable inline execution.

これはCSPに違反していることが原因

developer.mozilla.org

コンテンツセキュリティポリシー (CSP) は、クロスサイトスクリプティング (XSS) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤーです。これらの攻撃はデータの窃取からサイトの改ざん、マルウェアの拡散に至るまで、様々な目的に用いられます。

今回はインラインで張り付けたJSがXSSの可能性を疑われるためCSP違反に該当する。

ググると

「タグを使ってポリシーを指定する」
「Content-Security-Policy HTTP ヘッダーを返すように設定する」

といった対策が出てくると思うけど、今回のような場合はJSファイルを作ってsrcで読み込むように変更するのがてっとり早い。

// googleAnalytics.js
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-XXXXXXXX-X');

<!-- foo.html -->
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script src="/googleAnalytics.js"></script>

...

</head>