ConsentDock - 超軽量 Cookie / Privacy 同意ウィジェット（デモ）

まずはこれだけ（3ステップ導入）

ConsentDock は「サイトに後付けできる」ことを最重視しています。
最小構成なら、1行の script 追加で動作します。

1

consentdock.js を配置

ご利用のサーバに consentdock.js を置きます。

2

head に script を追加

できるだけ <head> に置くと事故が減ります（GAより先に）。

3

必要なら設定を上書き

window.CONSENTDOCK_CONFIG を追加して文言や表示位置を変更できます。

最小（コピペ）

<script src="/consentdock.js" defer></script>

ポイント

「同意/拒否」の状態は localStorage に保存されるため、リロードしても再表示されません。再表示したい場合は後述のデモ操作（reset/open）を参照してください。

デモ（このページで動作確認）

画面下（または中央）に ConsentDock が表示されます。
同意/拒否を押してからページをリロードし、表示されないこと（状態が保存されること）を確認してください。

Stateunknown

Storage Key-

Consent Modeenabled

dataLayer-

初心者向けメモ: 状態はブラウザに保存されます。別ブラウザ/シークレットモードでは「初回」に戻ります。まずは btn-reset で戻して試すのが安全です。

何ができる？（できない？）

できること（実用最小）

同意 / 拒否 / 詳細初回のみ表示 localStorage保存 Consent Mode v2 1ファイル完結

“日本サイトで困りがちな最低限” に絞った設計です。制作会社・WordPress・静的サイトでの後付け導入に向きます。

できないこと（非ゴール）

IAB TCF ベンダー管理自動スキャン管理画面大規模CMP

ConsentDock はIAB TCF 準拠のフル CMP を目指しません。スコープを小さく保ち、現場で導入しやすいことを優先します。

GA4 / Google Consent Mode v2 連携

なぜ「head に置く」の？

GA4 などのタグが先に実行されると、未同意でも計測が始まる可能性があります。
そのため 可能なら consent default: denied を早めに設定しておくのが安全です。

推奨（堅牢な順序）

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
  ad_storage: 'denied',
  analytics_storage: 'denied',
  ad_user_data: 'denied',
  ad_personalization: 'denied',
  wait_for_update: 500
});
</script>

<script src="/consentdock.js" defer></script>

<!-- GA4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
gtag('js', new Date());
gtag('config', 'G-XXXXXXX');
</script>

注意: “Consent Mode のシグナル” と “実際のタグ挙動” は別物です。
タグ側の設定や実装（GA4 / Google タグ / GTM）により、期待する動作が変わることがあります。

「動かない」原因で多いのは CSP です

企業サイトなどでは CSP（Content Security Policy）が厳しく、<style> の注入がブロックされる場合があります。
ConsentDock は 1ファイル完結のため、CSS を <style> として注入します。

症状: 何も表示されない / コンソールに CSP エラーが出る（style-src で拒否される）

対策 A（簡単）: style-src 'unsafe-inline'

Content-Security-Policy: style-src 'unsafe-inline' ...

対策 B（推奨）: nonce 運用

nonce を採用しているサイトでは、cspNonce を設定し、注入される style タグに nonce を付与します。

<script>
window.CONSENTDOCK_CONFIG = {
  cspNonce: "YOUR_NONCE_VALUE"
};
</script>
<script src="/consentdock.js" defer></script>

制作・カスタム開発のご依頼

ConsentDock は 門王（https://monou.jp）が制作しています。
GA4 / Consent Mode 設計や、サイトへの組み込み・カスタマイズの 開発依頼を受け付けています。

monou.jp を見る

補足（詳細）

リポジトリ構成

/
├─ docs/
│  └─ index.html
├─ consentdock.js
├─ README.md
└─ LICENSE

Public API

ConsentDock.open();      // 再表示
ConsentDock.reset();     // 状態リセット
ConsentDock.getState();  // 'unknown' | 'granted' | 'denied'