KARTEの計測タグを、Consent Management Platform（CMP）のツールと連携し、Opt-In（ユーザーから同意を得るまで計測しない）モードで動かす方法を紹介します。
各CMPによって実現方法が異なり、ここでは具体的な例を挙げて説明します。
[注意] この記事は計測タグv1の利用を前提としています
計測タグv2を利用している場合は、代わりに下記の記事をご確認ください。
KARTE のタグ v2 で OptIn/OptOut を設定する方法 | スタートガイド / タグ設置・イベント計測 / 計測タグ | KARTEサポートサイト
KARTE計測タグ Opt-Inモードの概要
KARTE計測タグのOpt-Inモードでは、 _karte_consent というCookieに同意の有無（accepted/rejected）を保存し、acceptedの場合のみイベント計測を開始する仕様となっています。
使用方法
- Cookieの設定方法
window.__karte_acceptメソッドを使用してCookieの設定を行ってください- 承諾の場合は、
window.__karte_accept(true) - 拒否の場合は、
window.__karte_accept(false)
- 承諾の場合は、
- Cookieの設定有無の確認方法
window.__is_karte_before_consent()を実行し、trueが返ってきたら、未設定となります
各種ツールとの連携方法
webtru 同意管理ツール
KARTEのタグ設定画面でOpt-Inモードは使用せず、タグ発行してください（自動検出されなくなります）設定方法
- webtruの同意管理プロを用いて、計測タグを設定するサイトのURLを入力してサイト設定情報を作成するとKARTEが自動検出されます
- KARTEをOpt-Inモードで動かすには、左のチェックボックスと必須のチェックボックス両方を外します
- 設定が完了したら、webtruのガイドに従い、サイトを更新すれば許諾を得るまではイベント計測は行いません
Cookie Consent用JavaScript Library
設定方法
- KARTEのタグ設定画面でOpt-Inモードを選択して発行したタグを、サイトに設定します
- KARTEの使用目的に応じた許諾をとるようJavaScript Libraryの設定をサイトHTML内のbodyに追加します
- 承諾された時は
window.__karte_accept(true)を呼び出し、拒否された場合はwindow.__karte_accept(false)を呼び出します
- 承諾された時は
設定例：Analytics目的で許諾を取る例（使用目的に応じて、適宜内容は変更してください）
<script defer src="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.8.0/dist/cookieconsent.js"></script>
<script>
window.addEventListener("load", function () {
var cc = initCookieConsent();
// run plugin with your configuration
cc.run({
current_lang: 'en',
autoclear_cookies: true, // default: false
theme_css: 'https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@v2.8.0/dist/cookieconsent.css',
page_scripts: true, // default: false
// mode: 'opt-in' // default: 'opt-in'; value: 'opt-in' or 'opt-out'
// delay: 0, // default: 0
// auto_language: '', // default: null; could also be 'browser' or 'document'
// autorun: true, // default: true
// force_consent: false, // default: false
// hide_from_bots: false, // default: false
// remove_cookie_tables: false // default: false
// cookie_name: 'cc_cookie', // default: 'cc_cookie'
// cookie_expiration: 182, // default: 182 (days)
// cookie_necessary_only_expiration: 182 // default: disabled
// cookie_domain: location.hostname, // default: current domain
// cookie_path: '/', // default: root
// cookie_same_site: 'Lax', // default: 'Lax'
// use_rfc_cookie: false, // default: false
// revision: 0, // default: 0
onFirstAction: function (user_preferences, cookie) {
// callback triggered only once on the first accept/reject action
},
onAccept: function (cookie) {
// callback triggered on the first accept/reject action, and after each page load
if (cookie.level.includes("karte")) {
// 承諾された時はwindow.__karte_accept(true)を呼び出す
typeof window.__karte_accept === 'function' && window.__karte_accept(true);
} else {
// 拒否された時はwindow.__karte_accept(false)を呼び出す
typeof window.__karte_accept === 'function' && window.__karte_accept(false);
}
},
onChange: function (cookie, changed_categories) {
// KARTE
if (changed_categories.includes("karte")) {
if (cookie.level.includes("karte")) {
// 承諾された時はwindow.__karte_accept(true)を呼び出す
typeof window.__karte_accept === 'function' && window.__karte_accept(true);
} else {
// 拒否された時はwindow.__karte_accept(false)を呼び出す
typeof window.__karte_accept === 'function' && window.__karte_accept(false);
}
}
},
languages: {
'en': {
consent_modal: {
title: 'We use cookies!',
description: 'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent. <button type="button" data-cc="c-settings" class="cc-link">Let me choose</button>',
primary_btn: {
text: 'Accept all',
role: 'accept_all' // 'accept_selected' or 'accept_all'
},
secondary_btn: {
text: 'Reject all',
role: 'accept_necessary' // 'settings' or 'accept_necessary'
}
},
settings_modal: {
title: 'Cookie preferences',
save_settings_btn: 'Save settings',
accept_all_btn: 'Accept all',
reject_all_btn: 'Reject all',
close_btn_label: 'Close',
cookie_table_headers: [
{ col1: 'Name' },
{ col2: 'Domain' },
{ col3: 'Expiration' },
{ col4: 'Description' }
],
blocks: [
{
title: 'Cookie usage 📢',
description: 'I use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="#" class="cc-link">privacy policy</a>.'
}, {
title: 'Strictly necessary cookies',
description: 'These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly',
toggle: {
value: 'necessary',
enabled: true,
readonly: true // cookie categories with readonly=true are all treated as "necessary cookies"
}
}, {
title: 'Analytics cookies (<a href="https://karte.io/" class="cc-link">KARTE</a>)',
description: 'Collect information about how you use the website, which pages you visited and which links you clicked on. Please read the full <a href="https://karte.io/karte-policy-en.html" class="cc-link">privacy policy</a>.',
toggle: {
value: 'karte', // KARTE用の設定
enabled: false,
readonly: false
},
}, {
title: 'More information',
description: 'For any queries in relation to our policy on cookies and your choices, please <a class="cc-link" href="#yourcontactpage">contact us</a>.',
}
]
}
}
}
});
});
</script>