Adobe Dynamic Tag Management (DTM) を用いた Cookiebot の導入手順を説明します。
1．DTM上でのクッキー同意バナーの導入方法
2．DTM上でCookiebotを利用し、Googleアナリティクスやアドセンス等のタグを制御方法
3．DTMを用いてクッキー宣言文をサブページ上に表示する方法
前提条件として、DTMのアカウントをお持ちで、ご利用のウェブサイトへのプロパティを作成し、ヘッダーとフッターのコードが埋め込まれていることを想定します。
1．DTM上でのクッキー同意バナーの導入方法
まず、データエレメントを作成します。このデータエレメントはCookiebotとDTMイベント制御のつなぎ目となります。
DTMプロパティ上にて、「Rules」タブをクリックし、次に「データエレメント」を、そして「Create New Data Element」のボタンをクリックします。
合計3つのデータエレメントを下記の値を元に作成してください。
Name：Path
“Cookie Consent Preferences” ：”cookie_consent_state.preferences”
“Cookie Consent Statistics” ：”cookie_consent_state.statistics”
“Cookie Consent Marketing” ：”cookie_consent_state.marketing”
全てのデータエレメントに関して、タイプとして「JS Object」、デフォルト値として「false」、そして持続性として「Pageview」を選択します。
例：「Cookie Consent Preferences」のデータエレメント設定
次に「Page Load Rules」のタブをクリックし、Cookiebotタグを全てのページに含むルールを作成します。
「Create New Rule」をクリックし、以下の値にてルールを設定してください。
Name: “Cookie Consent”
Conditions/Trigger rule at: “Top of Page”
Conditions/Add criteria for URL-Path: Path include “.*”, enable Regex
Javascript/Third Party Tag/Add new script: Name “Cookiebot Tag”, Type: “Sequential HTML”.
以下のコードを挿入してください。
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js?cbid=00000000-0000-0000-0000-000000000000" type="text/javascript" async></script><script>var cookie_consent_state = {};cookie_consent_state.preferences = 'false';cookie_consent_state.statistics = 'false';cookie_consent_state.marketing = 'false';function CookiebotCallback_OnAccept() { if (Cookiebot.consent.preferences) cookie_consent_state.preferences = 'true'; if (Cookiebot.consent.statistics) cookie_consent_state.statistics = 'true'; if (Cookiebot.consent.marketing) { cookie_consent_state.marketing = 'true'; _satellite.setCookie('sat_track', 'true'); } else { _satellite.setCookie('sat_track', 'false'); }}function CookiebotCallback_OnDecline(){ cookie_consent_state.preferences = 'false'; cookie_consent_state.statistics = 'false'; cookie_consent_state.marketing = 'false'; _satellite.setCookie('sat_track', 'false');}</script>cbid識別子の値「00000000-0000-0000-0000-000000000000」をお使いのCookiebot ID (Group ID)に置き換えてください。 DTMの設定は以下のようになります。
最後に同意バナーがウェブサイトに表示されるように変更を反映します。
2．クッキーの制御
ウェブサイト訪問者のクッキー同意を遵守するために、ウェブサイト上のクッキーを設定するスクリプトの動きを制御するロジックを定義する必要があります。Cookiebot は「Cookiebot」という名前のクライアントサイドのオブジェクトをExposeしています。このオプジェクトに対しDTM上でレファレンスをし、どのタイプのクッキーをサイト訪問者が同意するとクッキー同意状態を確認することが可能です。Cookiebot API についての詳細は以下を参照してください。
https://www.cookiebot.com/goto/developer
「Adobe Analytics」や「Google Analytics」等DTMでの親和性の高いツールに関しては、「General」＞「Tracker configuration」下のオプション「Enable EU compliance」にチェックを入れるだけで済みます。その他のスクリプトタグに関しては以下の説明通りイベント条件を追加する必要があります。
例：Google AdSense/DoubleClick
以下の例では、サイト訪問者がマーケティングクッキーに同意した場合にのみAdSenseのタグが発火するように、Cookiebotを使いDTM上でGoogle AdSenseのタグを制御する方法を示します。DTMは非同期的に読み込まれるので、非同期のバージョンのAdSenseのスクリプトを使用します。
DTM上にて、「Event Based Rules」のタブをクリックし、「Create New Rule」を選びます。 ルールに名前をつけ（例：「AdSense」）、以下の値を「Conditions」の箇所に入力します：
Event > Event Type: “dataelementchanged”
Event > Select Data Element: “Cookie Consent Marketing”
Rule Conditions > Add Criteria “Data – Data Element Value”: Data Element = “Cookie Consent Marketing”, Value = “true”
「Javascript / Third Party Tags」セクションには新たなスクリプトタイプの「Non-Sequential」を追加し、以下のコードを挿入してください（「000000000」をAdSense IDに置き換えてください）。
Cookiebot.getScript("//www.googleadservices.com/pagead/conversion_async.js", true, function () { window.google_trackConversion({ google_conversion_id: 000000000, google_custom_params: window.google_tag_params, google_remarketing_only: true }); });ルールを保存してください。このルールを承認し公開すると、Adsense はマーケティングクッキーにオプトインしたサイト訪問者にのみ発火するようになります。
3．クッキー宣言文の導入
クッキーポリシーやプライバシーポリシーの一部などのサブページにクッキー宣言文を表示させたい場合は、サブページのHTMLエレメントにスクリプトを挿入することで実現可能です。
まず、サブページへのURLパスを含む新たなルールを作成します（「/privacypolicy」など）。
「Page Load Rules」の下、「Create New Rule」をクリックし、次の値と共にルールを設定してください。
Name: “Cookie Declaration”
Conditions>Trigger rule at: “Onload”
Conditions>Add Criteria “URL – Path”: “Include” – “/privacypolicy” (change to your own URL path)
「Javascript / Third Party Tags」セクションには新たなスクリプトタイプの「Non-Sequential」を追加し、以下のコードを挿入してください。
var cookieDeclarationPlaceholder = document.getElementsByClassName("body-content")[0];var cookieDeclarationScriptTag = document.createElement("script");cookieDeclarationScriptTag.type = "text/javascript";cookieDeclarationScriptTag.id = "CookieDeclaration";cookieDeclarationScriptTag.src = "https://consent.cookiebot.com/00000000-0000-0000-0000-000000000000/cd.js";cookieDeclarationPlaceholder.appendChild(cookieDeclarationScriptTag);識別子値の「00000000-0000-0000-0000-000000000000」をCookiebot管理コンソールの「Your scripts」タブのGroup ID（Cookiebot ID）に置き換えてください。
またクラスネーム「body-content」を導入サイトのHTMLプレースホルダーエレメントのクラスネームに置き換えることをお忘れないようご注意ください。
イベント設定は以下のようになるはずです。
最後に、変更点を承認しサイトに公開してください。クッキー宣言文は定義したURLのページ要素の「body-content」クラスとして表示されます。