Reactのクッキー同意：スクリプトを確実に止めるバナー
Reactのクッキー同意バナー
Reactのクッキー同意：スクリプトを制御するバナーの作り方 | We.Inc
Reactでクッキー同意バナーを作る方法。選択を保存し、同意後にのみアナリティクスを読み込み、Consent Modeの更新を送信します。react-cookie-consentパッケージのpropsも紹介します。
訪問者の選択をReactのstateに保持し、ファーストパーティのクッキーかブラウザーストレージに保存し、該当するカテゴリーが許可された場合にだけアナリティクスや広告のスクリプトを描画します。小さなフックとバナーコンポーネント1つで対応できます。パッケージを使いたい場合は、react-cookie-consentが拒否ボタン、クッキー名、有効期限のpropsを備えた既製のバナーを提供しています。
Reactサイトに同意機能を追加する2つの方法
- 自作する
- react-cookie-consentパッケージ
- カテゴリー（アナリティクス、広告）
- はい、必要なだけ
- デフォルトでは同意か拒否の1つの値
- 拒否ボタン
- はい
- デフォルトでオフ、enableDeclineButtonで有効化
- 選択の保存場所
- クッキーかストレージを自由に選択
- デフォルトではCookieConsentという名前のクッキー
同意バナーで難しいのは画面上の枠ではなく、訪問者が同意する前に必須でないものが一切実行されないようにすることです。Reactではこれはstateの問題です。選択についての唯一の情報源を持ち、コンポーネントはscriptタグを挿入する前にそれを確認します。下のライブデモはまさにそれを行っているので、同意するまでアナリティクスの読み込みがオフのままであることを確認できます。
- useConsentフックは、アプリの起動時に保存済みの選択を読み込み、setter関数とともに公開します。
- バナーは選択が保存されていない間だけ表示され、「すべて同意」、「すべて拒否」、初期状態がオフのカテゴリー別トグルを提供します。
- スクリプトローダーはscriptタグを追加する前にフックを確認するため、拒否された場合はタグが追加されません。
- Googleタグを使っている場合は、同じsetterが許可されたカテゴリーとともにConsent Modeの更新を送信します。
- アプリ内のどこかに置いた「クッキー設定」リンクで保存済みの選択を消去すると、バナーが再表示されます。
- バナーはルートレイアウトから描画し、深い階層のページへの直接アクセスを含むすべてのルートで表示されるようにしましょう。
- サーバーレンダリングを使う場合は、保存済みの選択をクライアントのeffect内でのみ読み込み、サーバーと最初のクライアント描画が一致するようにしましょう。
- バナーにはrole=dialogかラベル付きのregionを指定し、すべてのボタンをキーボードで操作できるようにしましょう。
- 選択と一緒にバージョン番号を保存しましょう。新しいカテゴリーを追加したら、番号を上げて再度確認します。
- 拒否の手段を設定画面の奥に隠さないでください。「すべて拒否」は「すべて同意」の隣に置きましょう。
よくある質問
react-cookie-consentはスクリプトをブロックしてくれますか？
いいえ。READMEによると、このパッケージは訪問者の回答をクッキーに保存し、onAcceptまたはonDeclineを呼び出すバナーです。アナリティクスを読み込むかどうかは引き続き自分で制御する必要があります。たとえば、スクリプトを追加する前にgetCookieConsentValueを確認します。
react-cookie-consentに拒否ボタンを追加するには？
enableDeclineButton propを設定します。デフォルトはfalseです。ボタンのテキストはデフォルトで"I decline"で、declineButtonTextで変更でき、押されたときにonDeclineが実行されます。
訪問者が選択を変更できるようにするには？
自作のフックなら、保存済みの値を消去すればバナーが戻ります。パッケージの場合はresetCookieConsentValueを呼び出します。クッキー名をデフォルトから変更した場合は、バナーに指定したのと同じ名前を渡してください。
同意はクッキーとブラウザーストレージのどちらに保存すべきですか？
ブラウザー側ではどちらでも機能します。クッキーはサーバーからも読めるため、どのタグを出力するかをサーバーが決める場合に便利です。ブラウザーストレージなら値がリクエストごとに送信されません。選択そのものを記憶する目的であれば、どちらも認められています。
ReactではConsent Modeの呼び出しをどこに置けばよいですか？
gtagのconsent defaultは、Reactの外、HTMLのhead内でGoogleタグより前に置き、最初に実行されるようにします。gtag('consent', 'update', ...)はReact内の同意ハンドラーから呼び出します。
隠すより止めるべき理由
- 拒否後にバナーが消えるだけで、index.htmlのアナリティクスのスニペットがすでに実行されていれば、訪問はそのまま記録されます。スニペットを、同意後にのみ描画されるコンポーネントへ移すのが解決策です。
- プラットフォームが自動で挿入するタグなど、移動できないタグについては、そのプラットフォームの同意設定かConsent Modeを使い、更新が届くまでタグが制限された状態で動作するようにします。
バナーのテスト
- プライベートウィンドウでサイトを開き、ブラウザーの開発者ツールでNetworkパネルを確認します。何も押す前は、アナリティクスや広告のリクエストが一切表示されないはずです。次に同意して、それらが開始されることを確認します。
- 「すべて拒否」でも同じことを繰り返し、別のページを再読み込みして拒否が記憶されていることを確認します。
自作する：フック、バナー、制御されたスクリプト
小さな3つの部品です。ライブラリーは使わず、React 18でも19でも動作し、上のデモと同じ仕組みです。
useConsentフック
クライアントで保存済みの選択を一度だけ読み込み、変更のたびに保存して通知します。
ConsentBannerコンポーネント
同意と拒否のボタンが並び、カテゴリーのチェックボックスは未チェックで始まります。
同意後にのみスクリプトを読み込む
scriptタグはカテゴリーが許可されたときにだけ作成されるため、拒否された場合はタグ自体が存在しません。
react-cookie-consentパッケージを使う
npm install react-cookie-consentでインストールします。以下は、2026年10月時点でREADMEに記載されているpropsとヘルパー、およびそのデフォルト値です。
react-cookie-consentのpropsとデフォルト値
- "bottom"
- バーの位置：top、bottom、none
- buttonText
- "I understand"
- 同意ボタンのテキスト
- enableDeclineButton
- 拒否ボタンを表示する
- declineButtonText
- "I decline"
- 拒否ボタンのテキスト
- cookieName
- "CookieConsent"
- 回答を保存するクッキーの名前
- onAccept / onDecline
- 訪問者が回答したときに独自のコードを実行する
- getCookieConsentValue(name)
- 保存された回答を読み込む
- resetCookieConsentValue()
- 保存された回答を削除し、バーを再表示させる
拒否ボタン付きのバナー
同意するとアナリティクスを読み込み、拒否すると任意のものは何も読み込みません。初回読み込み時の確認で再訪問者にも対応します。
ライブデモ：スクリプトを制御する同意バナー
架空のWebサイト
同意いただいた場合にのみ、アナリティクスと広告にクッキーを使用します。
すべて同意
すべて拒否
選択する
選択を保存
アナリティクス
広告
必須（常にオン）
読み込まれるもの
{c}：スクリプトを追加済み
{c}：ブロック中
まだ選択されていないため、任意のものは何も読み込まれません。
クッキー設定
送信されたConsent Modeの更新
まだありません。
このデモはこのブラウザー内でのみ選択を記憶します。どこにも送信されません。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る