フレームワーク
ConsentX 導入ガイド: React & Next.js
React や Next.js のアプリでも、ドキュメントの head から ConsentX を読み込めます。
要点
React & Next.js に Cookie 同意バナーを追加するには、ConsentX のスニペットをサイトの head に一度貼り付けるだけです。 Next.js では app/layout.tsx の <head> 内にスニペットを追加します(または next/script を strategy beforeInteractive で使用します)。通常の React アプリでは、public/index.html の </head> の前に追加してください。 以降、バナーはすべてのページで読み込まれ、同意前に必須でないトラッカーをブロックし、ダッシュボードで設定した DPDPA、GDPR、CCPA のルールを適用します。
React & Next.js への導入手順
1
スニペットをコピーする
ConsentX で Install を開き、アカウントの埋め込みスニペットをコピーします。ドメインに紐づいた小さな <script> タグ 1 つだけです。
2
head に貼り付ける
Next.js の場合: app/layout.tsx の <head> にスニペットを追加するか、next/script を strategy='beforeInteractive' で使用します。通常の React の場合: public/index.html の </head> の前に追加します。
3
公開する
サイトを保存して公開します。次回の読み込みから同意バナーが表示されます。
4
ダッシュボードで設定する
ConsentX でバナーのデザイン、Cookie カテゴリ、地域ごとのルールを設定します。変更は再デプロイなしで公開中のサイトに反映されます。
ワンタグ導入
サイトの head にスニペットを一度追加するだけです。バナーはすべてのページで自動的に読み込まれます。
Consent Mode v2 と事前ブロック
Google シグナルは既定で拒否され、訪問者が選択するまで必須でないトラッカーは動作しません。
地域対応ルール
1 つのバナーが、再デプロイなしでダッシュボードから GDPR、CCPA、LGPD、DPDPA に対応します。