KARTEの計測タグを、Consent Management Platform(CMP)のツールと連携し、Opt-In(ユーザーから同意を得るまで計測しない)モードで動かす方法を紹介します。
各CMPによって実現方法が異なり、ここでは具体的な例を挙げて説明します。

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モードで動かすには、左のチェックボックスと必須のチェックボックス両方を外します
    null
  • 設定が完了したら、webtruのガイドに従い、サイトを更新すれば許諾を得るまではイベント計測は行いません

Cookie Consent用JavaScript Library

設定方法

  1. KARTEのタグ設定画面でOpt-Inモードを選択して発行したタグを、サイトに設定します
  2. 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>