ウェブサイトに Cookie 同意バナーを設置する方法
スクリプトタグ 1 行、GTM、WordPress、Shopify で Cookie 同意バナーを設置し、トラッカーがブロックされているかを検証するまでの手順ガイド。
Cookie 同意バナーが実際にしていること
Cookie 同意バナーとは、誰かが初めてサイトを訪れたときに表示される小さな通知で、必須ではない Cookie やトラッカーに同意するかどうかを尋ねるものです。GDPR、UK PECR のルール、インドの DPDPA といった法令のもとでは、バナーはシステムの目に見える一部分にすぎません。本当の仕事はその下で行われます。解析、広告ピクセル、チャットウィジェットなどの必須ではないスクリプトは、訪問者が同意を与えるまで動作してはなりません。
この区別が重要なのは、メッセージを表示するだけで Google Analytics や Meta のピクセルがページ読み込み時に発火してしまうバナーは準拠とみなされないからです。規制当局は、同意はトラッカーが読み込まれる前に取得しなければならず、後からでは不十分だと明確に示してきました。したがってバナーを設置する目的は、同時に 2 つあります。明確な選択肢を示すことと、その選択がなされるまでトラッカーをブロックすることです。
方法 1：スクリプトタグ 1 行（あらゆるウェブサイト）
バナーを設置する最も手早い方法は、HTML の head にスクリプトを 1 つ入れることです。ConsentX のダッシュボードでウェブサイトを作成すると、サイトキー付きの embed.js を参照する 1 行の埋め込みスニペットが得られます。他のスクリプトより先に読み込まれるよう、head のできるだけ上の方に貼り付けてください。
解析タグや広告タグよりも上に配置します。順序が重要なのは、ConsentX が先に登録されることで、その下にあるトラッカーを訪問者が判断するまで押しとどめられるからです。ダッシュボードでトラッカーを正しくタグ付けしておけば、ローダーは初回訪問時にそれらをブロックしたままにし、同意が与えられた瞬間に解放します。
この方法は、手書きのサイト、静的サイトジェネレーター、HTML の head を自分で管理できるフレームワークのいずれでも使えます。間にプラグインの層が入らないため、最もすっきりした方法でもあります。
方法 2：Google Tag Manager
トラッカーをすでに Google Tag Manager で管理しているなら、ConsentX も GTM 経由で追加できます。新しいカスタム HTML タグを作成し、埋め込みスニペットを貼り付け、他のすべてより先に実行されるよう「同意の初期化」トリガーで発火するよう設定します。
よりすっきりしたやり方は、バナーを Google Consent Mode と組み合わせることです。GTM のタグを自由に発火させるのではなく、同意ステータスで制御し、訪問者が選択した時点で ConsentX がそのステータスを更新します。こうすれば GTM 自体が同意が与えられるまでタグを押しとどめるようになり、これはまさに規制当局が期待する挙動です。
ConsentX を GTM 経由で読み込みながら、解析タグは同意チェックなしに All Pages で発火したままにする、というよくある間違いは避けてください。トラッカーが制御されていなければ、バナーは飾りにすぎず、リスクは残ったままです。
方法 3：WordPress
WordPress では重いプラグインは必要ありません。最も簡単な方法は、ヘッダー・フッター用のコードプラグインやテーマのカスタム head コード欄から埋め込みスニペットをテーマのヘッダーに追加し、サイト全体の head で読み込まれるようにすることです。
SEO プラグインやキャッシュプラグインを使っている場合は、スニペットが除去されたり遅延読み込みされたりしない場所に配置してください。同意ローダーを遅延させると、初期化される前にトラッカーがすり抜けてしまうことがあるためです。追加したあとはページキャッシュをクリアし、訪問者に新しい head のマークアップが届くようにします。
WordPress のサイトは複数のプラグインから同時にトラッカーを読み込むことが多いため、バナーに頼る前に、ダッシュボードのトラッカー検出ですべてのスクリプトを洗い出してタグ付けしてください。
方法 4：Shopify
Shopify では、theme.liquid を編集し、head 要素の中の上の方に埋め込みスニペットを貼り付けてテーマに追加します。Shopify のテーマはファーストパーティのスクリプトやアプリのスクリプトをいくつも読み込むため、ローダーを head の高い位置に置くことが重要です。
Shopify にはストアフロント向けの独自の顧客プライバシー・同意 API もあります。可能であれば ConsentX をそのシグナルに接続し、Shopify ネイティブのピクセルも他のトラッカーと同じように訪問者の選択を尊重するようにしてください。チェックアウトのページではストアフロントのページにはないスクリプトが読み込まれることがあるため、チェックアウトの流れでもテストしましょう。
バナーが本当にトラッカーをブロックしているかをテストする方法
テストは多くのチームが飛ばしてしまう工程ですが、実際に準拠できているかを決めるのはこの工程です。新しいプライベートブラウジングのウィンドウでサイトを開き、ブラウザの開発者ツールを開いて、ページの読み込み中に Network タブを観察します。バナーで何かをクリックする前の段階では、解析ドメインや広告ドメインへのリクエストが 1 つも見えないはずです。
次に「拒否する」をクリックして再読み込みします。トラッカーは現れないままで、Application タブや Storage タブにマーケティング用の Cookie が出てこないはずです。続いて「同意する」をクリックし、トラッカーが読み込まれ Cookie が現れることを確認します。選択する前にトラッカーが発火する場合は、スクリプトが head の中で低い位置に置かれているか、そのトラッカーがブロック対象としてタグ付けされていないかのどちらかです。
このテストは、トップページ、商品ページやコンテンツページ、チャットウィジェットや埋め込み動画のあるページなど、主要な数種類のページで繰り返してください。こうしたページは追加のサードパーティスクリプトを読み込むことが多いためです。
本ガイドは一般的な情報提供を目的とした平易な解説であり、法的助言ではありません。自社の義務については有資格の弁護士にご確認ください。