コラム

2021.06.25

【テックコラム】CMPはどのようにタグを制御するのか?

はじめに


前回のCMP関連テックコラム「【テックコラム】CMPタグをサイトに導入する際の注意点」では、CMPタグをサイトに設置する際のおすすめの設置場所や注意点についてご紹介しました。

こちらの記事で触れていますが、CMPはサイトを訪れたユーザーが同意管理バナーから「このカテゴリに含まれるサービスに対してCookieの情報を渡したくない」と設定した時、そのカテゴリの各種サービスタグがサイト上で発火しないよう制御を行います。

この記事では、CMPツールがタグを制御する方法の例をご紹介したいと思います。

● CMPがタグを制御する方法


ここでは、例として自動ブロック方式、手動ブロック方式それぞれでのタグ制御方法を紹介します。

タグの制御方法はどのCMPを利用するかによって異なります。
ここで紹介する機能がすべてのCMPで利用できるものでは無い点にご注意ください。各CMPでタグを制御するために必要な手順は、各CMPのドキュメントを参照してください。

1.コンテンツセキュリティポリシー(CSP)による制御

CMPから各種サービスタグを制御する際に、既存のタグに変更を加える必要がない自動ブロック方式でのタグ制御方法の一例として、Content-Security-Policy(CSP)というブラウザの機能を利用しているパターンを紹介します。

CSPはサイトにアクセスしたユーザーをクロスサイトスクリプティング攻撃やデータインジェクション攻撃などから守るためのブラウザのセキュリティ機能です。
CSPポリシーを記載したmetaタグをサイトに埋め込む、許可したドメイン以外との通信を遮断します。

CMPタグは、サイトの<head>~</head>内に以下のようなhttp-equiv属性の値にContent-Security-Policyを記載したmetaタグを書き込みます。

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: ws: domain1.example.com domain2.example.jp">

content属性の値には、設定値としてサイトに必要なサービスのドメイン、もしくは、ユーザーが同意管理バナーからCookieの利用に同意したサービスのドメインを記載します。ユーザーから拒否されているドメインやCMPが検知していないドメインは許可ドメインリストに無いため、通信をしようとするとブラウザによってブロックされます。

CSPによるタグの制御

この機能によってブロックを行う場合は、タグマネージャーの設定変更やサイトに直貼りされたタグの変更を行う必要はありませんが、CMPタグをサイトへ実装する前にCMP管理画面からページのスキャンを行い、サイト上で使われている各種サービスタグのドメインの分類を行うことが必須になります。

新しいサービスタグをサイトに実装する場合や、実装済みのサービスタグ経由で新しいドメインにアクセスが発生する場合は、再スキャンおよび分類を行います。

各種タグを経由して発生するリクエストのドメインも含めてCMPでの分類が必要になるという点では、非常に厳密な制御方法といえます。
同時に、CMP管理画面上での設定が漏れて必要なタグが動作しないということが無いよう注意が必要です。

Content-Security-Policyのmetaタグがサイト上で有効になる前に動くタグは制御できないため、他のタグよりも先に動くようにCMPタグをサイトに設置します。

2.タグマネージャーによる制御

タグマネージャーとCMPの連携でタグを制御する方法として、Google Tag Manager (GTM)と連携するパターンをご紹介します。
こちらは各タグに対してCMP連携のための設定を行う手動ブロック方式です。

GTMとの連携の場合、あらかじめGTMに設定した各サービスタグに対してCMPから送信されるカスタムイベントに合わせてタグが発火するようGTMのトリガーの設定を行います。

ユーザーがページを読み込んだタイミングや、同意管理バナーから同意状況を変更したタイミングでCMPがGTMのカスタムイベントを発生させます。
その際、カスタムイベントの値としてユーザーが許可しているサービスやカテゴリの情報を送信します。

カスタムイベントとそのイベントの値に応じたトリガーに応じて、GTMがタグを発火します。

タグマネージャー(GTM)による制御

先にCMP側で発火するかしないかを判定してからカスタムイベントが発生するため、ページの読み込み時に発火する設定をしていたタグ等は従来よりも読み込みのタイミングが遅くなります。タグ同士の読み込み順序が重要な場合は注意が必要です。

3.直貼りタグの書き換えによる制御

この方法で制御するためには、サイトに設置する各サービスタグに対して所属するカテゴリに応じた書き換えを行います。
タグマネージャー連携と同じく、手動ブロック方式です。

例えば、下記のようなタグを、

<script>
  // ここに各種サービスを呼び出すためのスクリプト
</script>

以下のように書き換えます。

<script type='text/plain' class='cmp-category-01'>
  // ここに各種サービスを呼び出すためのスクリプト
</script>

type属性にtext/plain、class属性にカテゴリ名を指定します。

タグのtype属性をtext/plainに書き換えることによって、ユーザーのページ読み込み時にはブラウザがタグをスクリプトと認識せず、スルーされます。

CMP側でユーザーの同意状況を確認した後、サイトの動作に必須、もしくはユーザーから許可されているタグであれば、CMPタグによってタグを発火します。
その際、CMPタグはclass名でこのタグの所属しているカテゴリを識別して、発火する/しないの判断を行います。

直貼りタグの制御

GTMでの制御と同じくタグの発火タイミングはCMP側で同意状況の確認を行った後になるため、従来よりも遅いタイミングでの発火になります。
発火タイミングの変更やタグの書き換えによる動作への影響に注意が必要です。

● さいごに


今回は、CMPがタグの制御を行う方法の一例をご紹介しました。

いずれの方法をとる場合も、事前のテスト環境での動作確認、本番環境への実装後の動作確認をそれぞれ行い、サイトや各タグの動きに問題がないことを確認しながら導入をすすめていくことをおすすめします。

繰り返しになりますが、タグの制御方法はCMPによって異なるので、CMPからタグを制御するための手順は各CMPのドキュメントをご参照ください。

弊社では事業会社様向けにCMPのご提案・導入支援を行っています。ご興味ございましたら是非お問い合わせください。

関連記事

本件に関するお問い合わせは下記にて承ります。
株式会社DataCurrent
info@datacurrent.co.jp