Cookie同意管理

概要

Google Consent Modeを利用し、Cookieの使用に対するユーザーの同意状態を管理します。アクセス解析・広告Cookieについて、同意・拒否・個別設定を行うことができます。

設置方法

</body> の前に以下のタグを埋め込んでください。

<script src="common/js/k2-cookie.js" defer></script>

GA4を利用する場合

GA4を利用する場合は、<head> 内のGA4読み込みより前にConsent Modeの初期設定を記述します。GA_MEASUREMENT_ID は、使用するGA4プロパティの測定ID（G-XXXXXXXXXX）に置き換えてください。

Cookieへの同意がまだ得られていない段階では、アクセス解析・広告に関するデータ保存を denied（拒否）に設定します。

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

gtag('consent', 'default', {
  analytics_storage: 'denied',
  ad_storage: 'denied',
  ad_user_data: 'denied',
  ad_personalization: 'denied'
});
</script>

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

Cookie設定表示項目

Cookie設定のモーダルに表示させる項目は、k2-cookie.jsに記述してあります。こちらを適時変更してください。

51行目辺りからHTMLの記述で増減できます。

<div class="alertContents mb-8">
<ul>
<li>
<label>
<input type="checkbox" checked disabled>
<span class="inputCheck"></span>
必須Cookie
</label>
</li>
<li>
<label>
<input type="checkbox" id="setting-functional">
<span class="inputCheck"></span>
機能Cookie
</label>
</li>
<li>
<label>
<input type="checkbox" id="setting-analytics">
<span class="inputCheck"></span>
アクセス解析Cookie
</label>
</li>

<li>
<label>
<input type="checkbox" id="setting-ad">
<span class="inputCheck"></span>
広告Cookie
</label>
</li>
</ul>
</div>

178行目辺りからIDを取得して、オブジェクトに追加します。

const analytics = document.getElementById('setting-analytics');
const ad = document.getElementById('setting-ad');
const functional = document.getElementById('setting-functional');
const banner = document.getElementById('cookie-banner');

const consent = {
functional: functional?.checked ?? false,
analytics: analytics?.checked ?? false,
googleAds: googleAds?.checked ?? false
};

改変対象ファイル

CSS:: _modules.scss 内に改変対象箇所があります。

JS:: k2-cookie.js を設置してください。