はじめに
WaterPunch の LP および技術ブログに、Google Analytics 4（GA4） と Cookie 同意バナー を実装しました。EU 向け Consent Mode v2 を意識しつつ、日本の事業者向けサイトとしてシンプルに保った構成を記録します。
Consent Mode と GA4 の実装
初回訪問時にバナーを出し、同意前は analytics_storage: denied。同意後だけ gtag.js を読み込み、選択は localStorage に保存して2回目以降はバナーを出しません。AdSense 審査でも、プライバシーポリシー・Cookie 説明・拒否手段は外せません。
Consent Mode の default
consent.js 読み込み時点で default を設定します。
gtag('consent', 'default', {
analytics_storage: 'denied',
ad_storage: 'denied',
ad_user_data: 'denied',
ad_personalization: 'denied',
wait_for_update: 500
});
同意後に GA4 を読み込む
「同意する」クリック時のみ、動的に gtag.js を挿入します。拒否時は読み込みません。
gtag('consent', 'update', { analytics_storage: 'granted' });
loadGoogleAnalytics();
測測 ID は site-config.js の gaMeasurementId に集約し、1 箇所で管理しています。
全ページ共通
LP・法務ページ・ブログ記事すべてに同じ consent.js とバナー HTML を配置。フッターからプライバシーポリシーへリンク。
静的サイトで気をつけた点
- 同意前に GA を読み込まない … 審査・プライバシーの両面で重要
- 拒否してもサイトは普通に使える … 解析だけオフ
- 個人情報ページ（contact.html） を別 URL で用意
- meta description / canonical を各ページに静的に記載
ブログ記事を JavaScript だけで描画していた時期は、クローラーから本文が見えない問題がありました。現在は 静的 HTML 生成 に切り替え、記事本文も初期 HTML に含めています。
AdSense 申請前に揃えたもの
プライバシーポリシー、お問い合わせ・運営者情報、Cookie 同意、十分なオリジナルコンテンツ（技術ブログ）。同意バナーは AdSense 専用タグではなく、プライバシー対応として入れています。
閉じ方
静的サイトでも Consent Mode v2 + 同意後読込は難しくありません。計測 ID と文言を config に集約し、全ページで同じバナーを使う構成が運用しやすいです。
WaterPunch では G-96ZG6G53DW を使用しています（site-config.js 参照）。