チュートリアル2026年10月16日 | FlexyConsent

同意が得られるまでスクリプトをブロックする方法：3つの手法を比較

問題：早すぎるタグの発火

同意バナーは、その背後のタグがユーザーの選択を尊重して初めて機能します。最もよくある失敗は単純です。バナーは表示されているのに、誰かがクリックする前に、アナリティクスや広告のスクリプトがすでに読み込まれ、識別子を設定してしまっているのです。これを解消するには、同意が得られるまでスクリプトをブロックする必要があります。実用的な方法は3つあります。

手法1：スクリプトのタイプを書き換える

ブラウザは、scriptタグのtypeがJavaScriptのタイプである場合にのみ実行します。typeをtext/plainに変更すると、ブラウザはそのスクリプトを無視します。そのうえで、そのスクリプトがどの同意カテゴリーに属するかを示すデータ属性を追加します。

向いているケース：テンプレート内の、数個の既知のインラインまたは外部スクリプト。注意点：他のスクリプトによって挿入されるスクリプトは、テンプレートを通らないため書き換えられません。

手法2：タグマネージャーでタグを制御する

タグがGoogle Tag Managerなどのツールにある場合は、コンテナをページに残したまま、同意に対応したトリガーで発火を制御できます。各タグに同意の要件を設定し、対応する同意状態が許可されたときだけタグマネージャーが発火させます。大きな利点は一元管理です。マーケティング担当者がテンプレートに触れずにタグを追加でき、ルールもタグとともに引き継がれます。

向いているケース：マーケティングタグが多いサイト。注意点：コンテナの外にハードコードされたスクリプトや、独自にさらにスクリプトを読み込むカスタムHTMLタグ。

手法3：同意を受けて動的にスクリプトを読み込む

この方法では、scriptタグをページから完全に取り除き、同意イベントの後にだけそれらを挿入する関数を書きます。シングルページアプリケーションや、完全な制御を求める開発者にとって、最もクリーンな選択肢です。

  1. CMPからの同意コールバックを待ち受けます。
  2. どのカテゴリーが許可されたかを確認します。
  3. script要素を作成し、srcを設定して、ドキュメントに追加します。
  4. スクリプトのloadハンドラーで、初期化コードを実行します。

向いているケース：ビルド工程のある最新のアプリケーション。注意点：再訪問ユーザーの処理を忘れること。保存された選択は、新たなクリックなしに、ページ読み込み時に読み込みを開始させる必要があります。

同意撤回への対応

同意前のブロックは仕事の半分にすぎません。ユーザーが後で同意を撤回した場合は、ツールの呼び出しを止め、識別子の読み書きを続けないようにしてください。ページからスクリプトを削除しても、すでにメモリ上にあるコードは消えないため、撤回後にリロードするのが最も簡単で確実な方法であることが多いです。

どれを選ぶべきか

テスト方法

  1. キャッシュを消去したプライベートウィンドウを開きます。
  2. ページを読み込む前に、ブラウザの開発者ツールのNetworkタブとApplicationタブを開きます。
  3. ページを読み込み、バナーには触れません。アナリティクスや広告のリクエストが送信されず、関連するCookieやストレージ項目も現れないことを確認します。
  4. 1つのカテゴリーだけを承認し、対応するスクリプトだけが読み込まれることを確認します。
  5. すべてを拒否してリロードし、最初の確認を繰り返します。
  6. 同意を撤回し、上で説明した動作を確認します。

FlexyConsentの位置づけ

FlexyConsentはIAB TCF 2.4とGoogle Consent Mode v2に対応し、Google認定のCMP（CMP ID 317）です。どのブロック手法を選んでも、バナーの役割は、ユーザーが何を選んだかを示す明確なシグナルをコードに渡すことです。すべてのスクリプトがそれに従うようにするのは、あなたの役割です。

重要ポイント

← ブログ すべて読む →