コンテンツ セキュリティ ポリシー（CSP）は、広くサポートされているウェブ セキュリティ標準で、特定のタイプのインジェクション攻撃を防ぐことを目的としています。CSP を使うと、デベロッパーはアプリケーションで読み込まれるリソースを管理できるようになります。このガイドでは、CSP を使用しているサイトに Google タグ マネージャーをデプロイする方法を説明します。
コンテナタグを有効にして CSP を使用する
CSP が設定されているページで Google タグ マネージャーを使用するには、タグ マネージャー コンテナコードの実行を許可する必要があります。このコードは、gtm.js スクリプトを挿入するインライン JavaScript コードとして構築されています。コード実行を許可する方法はいくつかあり、たとえばノンスまたはハッシュの使用が考えられます。推奨されるのは、ノンスを使用する方法です。レスポンスごとにサーバーが生成する推測できないランダムな値をノンスとして使用しましょう。ノンスの値は、Content-Security-Policy script-src ディレクティブで指定します。
Content-Security-Policy: script-src 'nonce-{SERVER-GENERATED-NONCE}'; img-src www.googletagmanager.com
次に、インラインのタグ マネージャー コンテナコードのノンス対応バージョンを使用し、インライン スクリプト要素のノンス属性を以下と同じ値に設定します。
<!-- Google Tag Manager -->
<script nonce='{SERVER-GENERATED-NONCE}'>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;var n=d.querySelector('[nonce]');
n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
その後、タグ マネージャーはすべてのスクリプトにノンスを伝播し、それがページに追加されます。
インライン スクリプトの実行を有効にするには、CSP でインライン スクリプトのハッシュを指定するなどの方法もあります。
ノンスまたはハッシュを使用した推奨方法に対応できない場合は、CSP の script-src セクションに 'unsafe-inline' ディレクティブを追加することで、タグ マネージャーのインライン スクリプトを有効にできます。
この方法を使用する場合は、CSP で以下のディレクティブが必要になります。
script-src: 'unsafe-inline' https://www.googletagmanager.com
img-src: www.googletagmanager.com
カスタム JavaScript 変数
CSP が存在する場合、カスタム JavaScript 変数はその実装方法の関係上 undefined と評価されます（CSP の script-src セクションに 'unsafe-eval' ディレクティブが指定されている場合を除く）。
script-src: 'unsafe-eval'
プレビュー モード
Google タグ マネージャーのプレビュー モードを使用するには、CSP に次のディレクティブを含める必要があります。
script-src: https://googletagmanager.com https://tagmanager.google.com
style-src: https://googletagmanager.com https://tagmanager.google.com https://fonts.googleapis.com
img-src: https://googletagmanager.com https://ssl.gstatic.com https://www.gstatic.com
font-src: https://fonts.gstatic.com data:
Google アナリティクス 4（Google アナリティクス）
Google アナリティクス 4（Google アナリティクス）タグを使用するには、CSP に次のディレクティブを含める必要があります。
script-src: https://*.googletagmanager.com
img-src: https://*.google-analytics.com https://*.googletagmanager.com
connect-src: https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com
Google シグナルを使用している Google アナリティクス 4（Google アナリティクス）デプロイメントにおいては、CSP に次のディレクティブを含める必要があります。
script-src: https://*.googletagmanager.com
img-src: https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com
https://*.g.doubleclick.net https://*.google.com https://*.google.<TLD>
connect-src: https://*.google-analytics.com https://*.analytics.google.com
https://*.googletagmanager.com https://*.g.doubleclick.net https://*.google.com https://*.google.<TLD>
ユニバーサル アナリティクス（Google アナリティクス）
ユニバーサル アナリティクス（Google アナリティクス）タグを使用するには、CSP に次のディレクティブを含める必要があります。
script-src: https://www.google-analytics.com https://ssl.google-analytics.com
img-src: https://www.google-analytics.com
connect-src: https://www.google-analytics.com
Google 広告コンバージョン
Google 広告のコンバージョン タグを使用するには、CSP に次のディレクティブを含める必要があります。
セキュアな接続の場合:
script-src: https://www.googleadservices.com https://www.google.com
img-src: https://googleads.g.doubleclick.net https://www.google.com https://google.com
非セキュアな接続の場合:
script-src: www.googleadservices.com www.google.com
img-src: googleads.g.doubleclick.net www.google.com google.com
Google 広告リマーケティング
Google 広告のリマーケティング タグを使用するには、CSP に次のディレクティブを含める必要があります。
セキュアな接続の場合:
script-src: https://www.googleadservices.com https://googleads.g.doubleclick.net https://www.google.com
img-src: https://www.google.com https://google.com
frame-src: https://bid.g.doubleclick.net
非セキュアな接続の場合:
script-src: www.googleadservices.com googleads.g.doubleclick.net www.google.com
img-src: www.google.com google.com
frame-src: bid.g.doubleclick.net
Floodlight
Floodlight ユーザーは、次の設定を使用して CSP を有効にできます。<FLOODLIGHT-CONFIG-ID> の値を、特定の広告主 ID を許可する場合はその Floodlight 広告主 IDに、すべての広告主 ID を許可する場合は * に置き換えます。
すべてのユーザー向け:
img-src: https://<FLOODLIGHT-CONFIG-ID>.fls.doubleclick.net
タグ マネージャーの「カスタム スクリプト」ビーコンの場合:
frame-src: https://<FLOODLIGHT-CONFIG-ID>.fls.doubleclick.net
イメージタグの場合:
img-src: https://ad.doubleclick.net
同意モードの場合:
img-src: https://ade.googlesyndication.com