本記事では Google Tag Manager（以下 GTM）を使用しているウェブサイトへの Cookiebot インストール方法を解説します。
この方法により、GTM 内外のスクリプトは、サイト訪問者からの同意があるまで、自動的にブロックされます。
ステップ1. サイトへのスクリプトの埋め込み
1-1. dataLayer の記述
<head> ... </head> の可能な限り上部（かつ、既存の GTM スクリプトがある場合はそれより上）に、下記のスクリプトを記述します。
<!DOCTYPE html>
<html>
<head>
<title>Google Tag Manager & automatic cookie blocking</title>
<!-- Google Consent Mode -->
<script data-cookieconsent="ignore">
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments)
}
gtag("consent", "default", {
ad_personalization: "denied",
ad_storage: "denied",
ad_user_data: "denied",
analytics_storage: "denied",
functionality_storage: "denied",
personalization_storage: "denied",
security_storage: "granted",
wait_for_update: 500
});
gtag("set", "ads_data_redaction", true);
gtag("set", "url_passthrough", true);
</script>
<!-- End Google Consent Mode-->1-2. GTM スクリプトへの属性追加
1 のすぐ下に、 data-cookieconsent="ignore" 属性を追加した GTM スクリプトを記述します。
これは「Google同意モード」と呼ばれる、サイト訪問者の同意に従ってGoogleタグを発火する仕様に沿うための記述となります。
<!-- Google Tag Manager -->
<script data-cookieconsent="ignore">
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->これにより、Cookiebot に影響されず GTM が常に読み込まれるようになります。
1-3. Cookiebot スクリプトの挿入
2 の GTM スクリプトの直後に、自動Cookieブロック機能 (data-blockingmode="auto") を備えた Cookiebot スクリプトを挿入します。
<!-- Cookiebot CMP-->
<script
id="Cookiebot"
src="https://consent.cookiebot.com/uc.js"
data-cbid="YOUR_COOKIEBOT_ID"
data-blockingmode="auto"
type="text/javascript"
></script>
<!-- End Cookiebot CMP -->ソース側の変更は以上となります。
最終的に <head> ... </head> に下記のようなコードが記述されていればOKです。
<head>
<title>Google Tag Manager & automatic cookie blocking</title>
<!-- Google Consent Mode -->
<script data-cookieconsent="ignore">
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments)
}
gtag("consent", "default", {
ad_storage: "denied",
analytics_storage: "denied",
functionality_storage: "denied",
personalization_storage: "denied",
security_storage: "granted",
wait_for_update: 500
});
gtag("set", "ads_data_redaction", true);
gtag("set", "url_passthrough", true);
</script>
<!-- End Google Consent Mode-->
<!-- Google Tag Manager -->
<script data-cookieconsent="ignore">
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
<!-- Cookiebot CMP-->
<script
id="Cookiebot"
src="https://consent.cookiebot.com/uc.js"
data-cbid="abcdef12-3456-7890-abcd-ef1234567890"
data-blockingmode="auto"
type="text/javascript"
></script>
<!-- End Cookiebot CMP -->
...
</head>ステップ2. GTM 内で配信されているタグのクッキー設定
GTM で配信されている他のすべてのクッキー設定タグについては、こちらの GTM の記事「ステップ2. GTM上でのトリガー設定変更」 をご参照いただき、追加の配信トリガーを設定してください。
なお下記のタグについては、ステップ1「1. dataLayer の記述」で設定した Google 同意モードに対応しており、サイト訪問者の同意に基づき自動的にタグの配信を調節してくれるため、トリガーは「All Pages」のままで問題ありません。
- Google Ads
- Floodlight
- Google Analytics
- Conversion Linker
ステップ3. クッキースキャンして動作確認
サイト上のクッキーが、サイト訪問者からの同意前に、クッキーブロッカーによる取得制御が行われているかどうかを確認します。確認のためには Cookiebot から送付されるクッキースキャンレポートを開いてください（スキャンレポートについて）。
スキャンレポート上で「Blocked until accepted by user: No」の記載があるクッキーが、サイト訪問者の同意が得られる前に取得が始まっている可能性のあるものです。この項目が「No」の項目がない場合は、全てのクッキーが同意取得前にブロックされているため、特に追加の設定は必要ありません。
「No」の項目があった場合は以下の手順にて、それぞれのクッキーの同意前発火を防ぐために、それぞれのタグに若干の編集（マークアップ）を施します。
3-1. iframe タグの対応
対象が iframe タグの場合は src を data-src に置き換えてください。
それ以外のタグの場合は type="text/javascript" を type="text/plain" に置き換えているか、ない場合はタグに追記してください。
3-2. data-cookieconsent 属性の追加
data-cookieconsent 属性を、を対応するクッキーカテゴリーの値とともに、対象のスクリプトに追記してください。
- 統計カテゴリの場合:
data-cookieconsent="statistics" - 設定情報と統計カテゴリの両方の場合:
data-cookieconsent="preferences, statistics"
スクリプト例：
<script type="text/plain" data-cookieconsent="marketing" src="//widget.manychat.com/1234567891011.js"></script>3-3. 必須クッキーのブロック回避
逆に、クッキーブロッカーにより配信がブロックされては困るクッキーに関しては、以下のスクリプトをJSに追記することでブロックされなくなります。
この場合、ユーザーの同意に関わらず配信されますので、該当するクッキーを必須カテゴリ（Necessary）に分類することを推奨します。
<script data-cookieconsent="ignore"></script>設定完了後、コンソール上で再度クッキーのスキャンを行い、該当するクッキーが同意前にブロックされていることを確認してください。
実装上の注意点
dataLayer の名前変更
さらに dataLayer の名前を変更した場合は window.dataLayer を実際の dataLayer の名前に置き換えるようにしてください。
例えば window.gtmDataLayer = window.gtmDataLayer || [] のようになります。
GTM 内で Cookiebot の CMP タグを配信しているケース
GTM でテンプレートとして配信されている Cookiebot の CMP タグを利用しない点にご注意ください。すでに実装済みの方は、削除するか、一時停止するか、それに割り当てられたトリガーを削除します。
Cookiebot の CMP タグは、GTM で配信されるスクリプトのみをブロックするような、シンプルかつ簡潔な作業が必要なケースで機能します。こちらの記事を参照ください。