はじめに

2022年4月より施行されるCookieに対し明確な規制が加わることになります。

GDPRに関しては、EU域内の企業など対象でしたが、日本も個人情報保護法の改正により対象になることになります。

Cookieには1st Party Cookieと3rd Party Cookieとあり、1st Party Cookieはそのサイトのみで使用するセッション管理やカートに入れるなどサイト内で完結するものを言います。

3rd Party Cookieは、Googleアナリティクスなど、第三者提供するものを指します。今回は、この3rd Party Cookieに対して規制が入ります。ここはGDPR同様です。

今回は、サイトに導入する例の記載します。

GDPR（EU一般データ保護規則）とは

EU域内にいる個人データを保護するためのEUにおけるルールであり、2018年5月25日より施行されました。

EUの個人データを取り扱う場合、EU域内に子会社や支店等の拠点を有している企業が対応となります。

個人データとは、識別された又は識別され得る自然人に関するあらゆる情報を意味します。例えば氏名、識別番号、位置情報、オンライン識別子(IPアドレス、クッキー識別子）、氏名を含まない閲覧履歴など含まれます。又は当該個人に関する物理的、生理的、遺伝子的、精神的、経済的、文化的若しくは社会的アイデンティティに特有な一つ若しくは複数の要素を参照することによって、直接的に又は間接的に、識別され得るものをいう

フォームなど個人データを取扱わないと思っていても、Googleアナリティクス、広告など導入している場合は、対象となります。

EUでは、ePrivacy指令（Directive on privacy and electronic communications）の

5条3項

ユーザーの端末装置に蓄積された情報を保管し、また、それらの情報にアクセスするためには、クッキーの利用目的を分かりやすく説明した上で同意を取得することが必要とされている。

ウェブサイトにおいて、ほとんど全てのCookieや類似の技術（例　Webビーコンなど）を使用する前にユーザーの同意を取得することが必要・・・

Cookieについての同意に関しては、

１．同意を必要とするCookieを使用してウェブサイトの全てのページにCookieバナー（クッキー同意）を表示する

２．Cookie通知のページへのウェブリンクにアクセスできるようにする

３．Cookieを使用しているページについて、ユーザーが同意した場合のみコンテンツを表示できるようにする

第三者提供するGoogleアナリティクスなどは..

個人関連情報取扱事業者が、提供先が個人関連情報を個人データとして取得することが想定されるときは、あらかじめ当該個人関連情報に係る本人の同意等が得られていることを確認しないで、当該個人関連情報を提供してはならないこととするもの。

CCPA（カリフォルニア消費者プライバシー法）

個人情報の範囲

2020年１月に施行されたカリフォルニア消費者プライバシー法（CCPA）においては、「個人情報」は以下のとおり定義されている。

第1798.140条(o)(1)

直接的・間接的に特定の消費者または世帯を識別する、関連付ける、記述する、連想できる、または、合理的に関連付けられる情報をいう。

識別子、資産記録、購買記録などの営利情報、インターネット上の閲覧履歴、生体情報、位置情報、雇用情報、消費者の嗜好なども、この定義に該当する場合には、個人情報に該当する。

CCPAでは、「個人情報」の「販売」が規制の対象となるが、価値のある対価と引換えに個人情報（Cookieなどのオンライン識別子を含む）を共有・転送する場合も含まれるよう・・

第1798.120条、第1798.135条でオプトアウト権が必要になる

オプトアウトとはユーザーが何らかの操作によって、機能を使えなくする意味。オプトインはその逆で機能を有効にする意味。

GDPR、CCPAともに同意が必要で、CCPAではオプトアウトが求められるように・・

本人からの同意取得の態様・方法について

当社は、第三者が運営するデータ・マネジメント・プラッ
トフォームからCookieにより収集されたウェブの閲覧履
歴及びその分析結果を取得し、これをお客様の個人
データと結びつけた上で、広告配信等の目的で利用い
たします。
上記の取扱に同意する

現時点は、上記のように同意をとればよいのですが、同意したくなく。拒否したいとなる場合、ブラウザーの設定でCookeiを使用しないなどの運用になります。

この場合に、使用しないにした場合、1st Party Cookieまで使用できなくなってしまいます。1st Party Cookieを使用していなければ問題はありませんが・・

この時に、GoogleアナリティクスなどのjavascriptのタグのON・OFFのみ行うなどの対応が必要です。

もしくは、Googleアナリティクスをオプトアウトする

個人情報保護法では、現時点では、同意を取る(強制でない)までの記載しかないので、Cookieを使用する機能を有効・無効する機能まで記載はありません。

window['ga-disable-UA-XXXXX-Y'] = true;

サイト対応方法

POPUPして同意するだけであれば、popupで同意しますか？と表示するだけでよいですが、今回はGoogleアナリティクスなどon/offできる

javascriptの紹介です。

GDPR準拠のものです。

Cookie Consent　 MIT License

https://github.com/orestbida/cookieconsent

ダウンロードして、srcの中のcookieconsent.cssとcookieconsent.jsを使用します。

機能として、

すべて受け入れる、受け入れないボタンがでるモードと、許可するモードなど個別設定で可能です。

注意点として、data-cookiecategoryを設定すると許可（受け入れする）しないとデフォルトをjsが無効です(設定による)。

デバッカー等で console.logで動作確認してください。

cookieconsent.js自体、設定をcookeiに保存します。クッキーを削除すると、再度同意POPUPが表示します。

使用方法

    <script defer src="../src/cookieconsent.js"></script>

上記JSの中で、cookieconsent.cssを呼び出しします。jsと同じフォルダーに入れる必要があります。

下記をhtmlでscriptで括るか、jsファイルにして読み込むかお好みで

サンプルを本家のものを適当に日本語化しています。

// obtain cookieconsent plugin
var cc = initCookieConsent();
// logo
var logo = ''; //svg ok
var cookie = '';	//絵文字
// run plugin with config object
cc.run({
    current_lang : 'ja',
    autoclear_cookies : true,                   // default: false
    theme_css: '../src/cookieconsent.css',
    cookie_name: 'cc_cookie_demo1',             // default: 'cc_cookie'
    cookie_expiration : 365,                    // default: 182
    page_scripts: true,                         // default: false
    // auto_language: null,                     // default: null; could also be 'browser' or 'document'
    // autorun: true,                           // default: true
    // delay: 0,                                // default: 0
    // force_consent: false,
    // hide_from_bots: false,                   // default: false
    // remove_cookie_tables: false              // default: false
    // cookie_domain: location.hostname,        // default: current domain
    // cookie_path: "/",                        // default: root
    // cookie_same_site: "Lax",
    // use_rfc_cookie: false,                   // default: false
    // revision: 0,                             // default: 0
    gui_options: {
        consent_modal: {
            layout: 'box',                      // box,cloud,bar
            position: 'bottom right',           // bottom,middle,top + left,right,center
            transition: 'slide'                 // zoom,slide
        },
        settings_modal: {
            layout: 'box',                      // box,bar
            // position: 'left',                // right,left (available only if bar layout selected)
            transition: 'slide'                 // zoom,slide
        }
    },
    onAccept: function (cookie) {
        console.log('onAccept fired ...');
        // delete line below
        typeof doDemoThings === 'function' && doDemoThings(cookie);
    },
    onChange: function (cookie, changed_preferences) {
        console.log('onChange fired ...');
        // If analytics category's status was changed ...
        if (changed_preferences.indexOf('analytics') > -1) {
            // If analytics category is disabled ...
            if (!cc.allowedCategory('analytics')) {
                // Disable gtag ...
                console.log('disabling gtag')
                window.dataLayer = window.dataLayer || [];
                function gtag() { dataLayer.push(arguments); }
                gtag('consent', 'default', {
                    'ad_storage': 'denied',
                    'analytics_storage': 'denied'
                });
            }
        }
        // delete line below
        typeof doDemoThings === 'function' && doDemoThings(cookie);
    },
    languages: {
        'ja': {
            consent_modal: {
                title: cookie + ' Cookieとプライバシー',
                description: '当社は、第三者が運営するデータ・マネジメント・プラットフォームからCookieにより収集されたウェブの閲覧履歴及びその分析結果を取得し、これをお客様の個人データと結びつけた上で、広告配信等の目的で利用いたします。<button type="button" data-cc="c-settings" class="cc-link">詳細設定</button>',
                primary_btn: {
                    text: 'Cookieを受け入れる',
                    role: 'accept_all'              // 'accept_selected' or 'accept_all'
                },
                secondary_btn: {
                    text: 'Cookieを受け入れない',
                    role: 'accept_necessary'        // 'settings' or 'accept_necessary'
                }
            },
            settings_modal: {
                title: logo,
                save_settings_btn: '設定を保存',
                accept_all_btn: 'すべて許可する',
                reject_all_btn: 'すべて拒否する',
                close_btn_label: '閉じる',
                cookie_table_headers: [
                    {col1: 'Cookie名'},
                    {col2: 'ドメイン'},
                    {col3: '有効期限'},
                    {col4: '説明'}
                ],
                blocks: [
                    {
                        title: 'クッキー使用の詳細設定 ',
                        description: 'Cookieを使用して、Webサイトの基本的な機能を確保し、オンラインエクスペリエンスを向上させます。 カテゴリごとに、いつでもオプトイン/オプトアウトするように選択できます。 Cookieやその他の機密データに関する詳細については、完全な<a href="#" class="cc-link">プライバシーポリシー</a>をお読みください。 ',
                    }, {
                        title: '必須クッキー',
                        description: 'このクッキーは、弊社のサイトを閲覧したり、サイト内の機能を使用するために必要なものです。また、このクッキーはユーザーの一回のブラウジングセッション内での行動履歴を記録する際にも使用されます。',
                        toggle: {
                            value: 'necessary',
                            enabled: true,
                            readonly: true          // cookie categories with readonly=true are all treated as "necessary cookies"
                        }
                    }, {
                        title: '分析用クッキー',
                        description: 'このクッキーは、弊社あるいはサードパーティのサービス提供者により、Web解析等、サイトの利用状況に関する情報を提供するために使用されます。',
                        toggle: {
                            value: 'analytics',     // there are no default categories => you specify them
                            enabled: false,
                            readonly: false
                        },
                        cookie_table: [
                            {
                                col1: '^_ga',
                                col2: 'google.com',
                                col3: '2 年',
                                col4: '説明 ...',
                                is_regex: true
                            },
                            {
                                col1: '_gid',
                                col2: 'google.com',
                                col3: '1 日',
                                col4: '説明 ...',
                            }
                        ]
                    }, {
                        title: '広告クッキー',
                        description: 'このクッキーは、ユーザーの興味関心や弊社のサイト内での行動を記録するため、サイトの閲覧履歴を保存する目的で使用されます。',
                        toggle: {
                            value: 'targeting',
                            enabled: false,
                            readonly: false
                        }
                    }, {
                        title: '詳細な情報',
                        description: 'クッキー（Cookie）ポリシーついて <a class="cc-link" href="#">クッキー（Cookie）ポリシー</a>.',
                    }
                ]
            }
        }
    }
});

表示オプションは上記オプションgui_optionsの部分を変更することで変更できます。

設定POPUPを自前で出すには、下記をお好みのボタンアクションで呼び出します。

  cc.showSettings(0);

消す場合

  cc.hideSettings(0);

本人からの同意POPUPは表示は

  cc.show(0);

消す場合

  cc.hide(0);

保存したクッキーを消す場合(cookieconsent.jsの設定値など)

	cc.eraseCookies('クッキー名');

オプション説明

Google Analyticsの例(gtag)

scriptタグのtypeがtext/plainであることと、data-cookiecategoryがあることに注意してください。

cookieconsent.jsでは、data-cookiecategoryの設定した値とsettings_modalのtoggle value値が一致させ、JSのon/offをscriptタグのtypeを変更することで実現しています。

この仕組みを利用して、サイトで使用するものを追加していくとこで、他のスクリプトも同様にon/offできます。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script type="text/plain" data-cookiecategory="analytics" async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script type="text/plain" data-cookiecategory="analytics">
    window.dataLayer = window.dataLayer || [];
    function gtag(){window.dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
</script>
<script defer src="<path-to-cookieconsent.js>"></script>
<script>
    window.addEventListener('load', function () {
        // obtain cookieconsent plugin
        var cookieconsent = initCookieConsent();
        // run plugin with config object
        cookieconsent.run({
            autorun: true,
            current_lang: 'ja',
            theme_css: '',
            autoclear_cookies: true,
            page_scripts: true,
            onFirstAction: function(user_preferences, cookie){
                // callback triggered only once
            },
            onAccept: function (cookie) {
                // ... cookieconsent クッキー承諾がクリックされたときに行う処理
            },
            onChange: function (cookie, changed_preferences) {
                // ... cookieconsent クッキー設定変更時に行う処理
            },
            languages: {
                ja: {
                    consent_modal: {
                        title: 'Cookieとプライバシー',
                        description: '当社は、第三者が運営するデータ・マネジメント・プラットフォームからCookieにより収集されたウェブの閲覧履歴及びその分析結果を取得し、これをお客様の個人データと結びつけた上で、広告配信等の目的で利用いたします。 <a aria-label="Cookie policy" class="cc-link" href="#">クッキーポリシー</a>',
                        primary_btn: {
                            text: '承諾',
                            role: 'accept_all'              // 'accept_selected' or 'accept_all'
                        },
                        secondary_btn: {
                            text: 'クッキーの設定',
                            role: 'settings'                // 'settings' or 'accept_necessary'
                        }
                    },
                    settings_modal: {
                        title: 'Cookie preferences',
                        save_settings_btn: 'Save settings',
                        accept_all_btn: 'すべて許可するる',
                        reject_all_btn: 'すべて拒否する',       // optional, [v.2.5.0 +]
                        cookie_table_headers: [
                            {col1: 'Cookie名'},
                            {col2: 'ドメイン'},
                            {col3: '有効期限'},
                            {col4: '説明'},
                        ],
                        blocks: [
                            {
                                title: 'クッキー使用の詳細設定',
                                description: 'Cookieを使用して、Webサイトの基本的な機能を確保し、オンラインエクスペリエンスを向上させます。 カテゴリごとに、いつでもオプトイン/オプトアウトするように選択できます。 '
                            }, {
                                title: '必須クッキー',
                                description: 'このクッキーは、弊社のサイトを閲覧したり、サイト内の機能を使用するために必要なものです。また、このクッキーはユーザーの一回のブラウジングセッション内での行動履歴を記録する際にも使用されます。',
                                toggle: {
                                    value: 'necessary',
                                    enabled: true,
                                    readonly: true
                                }
                            }, {
                                title: '分析用クッキー',
                                description: 'このクッキーは、弊社あるいはサードパーティのサービス提供者により、Web解析等、サイトの利用状況に関する情報を提供するために使用されます。',
                                toggle: {
                                    value: 'analytics',
                                    enabled: false,
                                    readonly: false
                                },
                                cookie_table: [
                                    {
                                        col1: '_ga',
                                        col2: 'www.omakase.net',
                                        col3: '2 年',
                                        col4: 'ユーザーを区別するために使用します。',
                                    },
                                    {
                                        col1: '_gid',
                                        col2: 'www.omakase.net',
                                        col3: '24 時間',
                                        col4: 'ユーザーを区別するために使用します。',
                                    },
                                    {
                                        col1: '_gat',
                                        col2: 'www.omakase.net',
                                        col3: '1 分',
                                        col4: 'ユーザーを区別するために使用します。',
                                    },
                                    {
                                        col1: 'AMP_TOKEN',
                                        col2: 'www.omakase.net',
                                        col3: '30 秒～1 年',
                                        col4: 'クライアント ID を AMP クライアント ID サービスから取得するために使用できるトークンが含まれています。他の有効な値によって、オプトアウト、処理中のリクエスト、AMP クライアント ID サービスからのクライアント ID の取得エラーが示されます。',
                                    },
                                    {
                                        col1: '_gac_',
                                        col2: 'www.omakase.net',
                                        col3: '90 日',
                                        col4: 'ユーザーのキャンペーン関連情報が含まれています。Google アナリティクスと Google 広告のアカウントをリンクしている場合は、オプトアウトしない限り、Google 広告ウェブサイトのコンバージョン タグでこの Cookie の情報が読み取られます。',
                                    },
                                ]
                            }, {
                                title: '詳細な情報',
                                description: 'クッキー（Cookie）ポリシーついて <a class="cc-link" href="#">クッキー（Cookie）ポリシー</a>.',
                            }
                        ]
                    }
                }
            }
        });
    });
</script>

cookie_tableの部分は、タグマネージャーなど、複数管理している場合、ここに追加していくイメージになります。

デモ1cookieconsent.jsで作ったサンプル

デモ2cookieconsent.jsで作ったサンプル

追記

Googleタグマネージャーで上記のサンプルを試したところ、プレビューなどできなことが判明。Googleタグマネージャーの同意モード使用する

サンプル

ad_storageも同様にしたい場合も同様に追加する。サンプルではad_storage(広告)はdeniedに設定、アナリティクスのみ有効

GTMを送るタグはtext/plainせず、有効にして置き、 gtag('consent', 'default', {'ad_storage': 'denied','analytics_storage': 'denied'});コマンドを送って置き

同意したときにgtag('consent', 'update', {'analytics_storage': 'granted'});を送る

あとはオプトイン・オプトアウトの設定したときにgtag('consent', 'update', {'analytics_storage': 'granted'})、grantedをdeniedにしたりする。

<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
その他HTMLタグ
    <script defer src="cookieconsent.js"></script>
    <script defer src="initCookieConsent()を初期化設定するjs"></script>
<script>
	// Define dataLayer and the gtag function.
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	// Default ad_storage to 'denied'.
	gtag('consent', 'default', {
		'ad_storage': 'denied',
		'analytics_storage': 'denied'
	});
</script>
<!-- Google Tag Manager -->
<script>
(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-XXXXXX');
</script>
<!-- End Google Tag Manager -->
<!--- enable analytics when "analytics" category is selected --->
<script type="text/plain" data-cookiecategory="analytics">
	gtag('consent', 'update', {
		'analytics_storage': 'granted'
	});
</script>

initCookieConsentの初期化でonAcceptイベントで下記を追加する。

    onAccept: function (cookie) {
        console.log('onAccept fired ...');
        if(cc.allowedCategory('analytics')){
            window.dataLayer = window.dataLayer || [];
            function gtag() {
                dataLayer.push(arguments);
            }
            gtag('consent', 'update', {
                'analytics_storage': 'granted'
            });
        }
    },

initCookieConsentの初期化でonChangeイベントで下記を追加する。

    onChange: function (cookie, changed_preferences) {
		console.log('onChange fired ...');
		if (cc.allowedCategory('analytics')) {
			gtag('consent', 'update', {
				'analytics_storage': 'granted'
			});
		}
		if (!cc.allowedCategory('analytics')) {
			gtag('consent', 'update', {
				'analytics_storage': 'denied'
			});
		}
    },

クッキーテーブルのメモ

自分で使うものを選んでください。

gtag.js および analytics.js で使用の Cookie

gtag('consent', 'update', {'analytics_storage': 'granted'});が使用できます。

gtag.js で使用の Cookie

ga.js - Cookie の使用

ga.jsは古い手法で、Cookieの使用する・しない設定がないので、gtag.jsを使用するようにしないといけません。

Adsence - Cookie の使用

Adsence自動広告: パーソナライズされていない広告の広告コード

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pubxxx" crossorigin="anonymous"></script>
<script>
(adsbygoogle=window.adsbygoogle||[]).requestNonPersonalizedAds=1;
(adsbygoogle=window.adsbygoogle||[]).push({google_ad_client: "ca-pubxxx", enable_page_level_ads: true});
</script>

Adsence自動広告で同意の場合

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pubxxx" crossorigin="anonymous"></script>
<script>
//パーソナライズされていない広告でデフォルト
(adsbygoogle=window.adsbygoogle||[]).requestNonPersonalizedAds=1;
(adsbygoogle=window.adsbygoogle||[]).push({google_ad_client: "ca-pubxxx", enable_page_level_ads: true});
</script>

	onAccept: function (cookie) {
		console.log('onAccept fired ...');
		if(cc.allowedCategory('advertising')){
			//同意を得られたらパーソナライズド広告
			(adsbygoogle=window.adsbygoogle||[]).requestNonPersonalizedAds=0;
			(adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=0;
		}
	},
	onChange: function (cookie, changed_preferences) {
		console.log('onChange fired ...');
		if (cc.allowedCategory('advertising')) {
			//同意を得られたらパーソナライズド広告
			(adsbygoogle=window.adsbygoogle||[]).requestNonPersonalizedAds=0;
			//広告表示を再開
			(adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=0;
		}
		if (!cc.allowedCategory('advertising')) {
			//同意を得られないなら、パーソナライズされていない広告
			(adsbygoogle=window.adsbygoogle||[]).requestNonPersonalizedAds=1;
			//広告表示を再開
			(adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=0;
		}
	},

追記2

フォント類や、jquery.min.jsとかって・・・外部のCDNとかって・・・

IPアドレスとか・・・渡っちゃうよね・・・オプトアウトとかって・・

GDPR向けだと・・・怖い気がします・・・日本の改正個人情報保護法関しては...

下記は、CDNとか使用せず、自サーバーへ置くのがベストですね。。

https://use.fontawesome.com/releases/
https://fonts.googleapis.com/
https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

google fontの開発者やり取り

https://github.com/google/fonts/issues/1495

最終的には、フォントを自サーバー（ローカル）に置く

なので、サードパーティのAPIの利用も注意が必要です。チャットとか..

追記3

日本経済新聞の2022年2月13日

米にGoogleアナリティクスの情報送信　仏当局「違法」って。。

facebook いいね、googleマップ、youtube動画など・・自社ホームページに付けた場合とか・・

あと、IPアドレスに関して、IP単品では個人情報に当たらない感じで、アクセス時間、IPアドレス、ブラウザータイプなどサーバーログがあって

お問い合わせ、会員制のサイト、チャット、ブラウザーのログインを使用しているなど。複合してしまうと、IPがコンピュータ識別子となる可能性があるので注意が必要です。

要は、お問い合わせした時間とサーバーログの時間など照合することで特定できるとか、会員がログインした時間、登録時のIPを保持しているなど・・・

こういった感じで、関連でき個人情報とリンクできるものであれば個人関連情報となり、この識別子を第三者へ提供してはだめですよ。ってはなし。あとプライバシーマークとかの管理で、個人関連情報をコンプラにいれるのかなぁ・・疑問

あと、プロバイダーも事件性などあれば、IPで特定できたりはするかと。。

追記4

もし、承諾時にログを取るなど必要な場合は、

onAccept、onChangeに

ダミーのhtmlを作成してサーバーにアップします。

	onAccept: function (cookie) {
ここに該当のタグ
$.ajax({
	url: 'https://あなたのサイト/ゼロバイトのhtmlファイル名',
	type: 'get',
	data: {
		mode: 'analytics granted'
	},
	dataType: 'html'
});

アクセスログに下記を記録できます。

xxx.xxx.xxx.xxx - - [xx/xx/2022:15:09:34 +0900] "GET /ゼロバイトのhtmlファイル名?mode=advertising+granted HTTP/1.1" 200 399 "https://xxxxxxxxxxxx" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36 Edg/99.0.1150.30"

もしくは、呼び出し先をphpなど設置してログをとるなど・・

追記5

タグマネージャーの別の方法。analytics_storage': 'denied'で先に送っておく方法

例は下記を対象

・Google広告(ad_storage)

・Googleアナリティクス(analytics_storage)

<head>​
	<script>​
		window.dataLayer = window.dataLayer || [];​
		function gtag(){dataLayer.push(arguments);}​
		// Revoke consent by default​
		gtag('consent', 'default', {​
			'ad_storage': 'denied',​
			'analytics_storage': 'denied'​
		});​
	</script>​
	<script>​
		// Google Tag Manager (configured with GA internally)​
		(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-XXXXXXX');​
	</script>​
<script defer src="cookieconsent.js"></script>​
<script defer src="cookieconsentの初期化用js"></script>​
</head>
<body>
<!--いつも通りのタグマネージャーのやつ-->
	<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
	height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

initCookieConsentの初期化でonAccept,onChangeイベントで下記を追加する。

	onAccept: function (cookie) {
		console.log('onAccept fired ...');
		if(cc.allowedCategory('analytics')){
			gtag('consent', 'update', {
				'analytics_storage': 'granted'
			});
		}
		if (cc.allowedCategory('advertising')) {
			(adsbygoogle=window.adsbygoogle||[]).requestNonPersonalizedAds=0;
			(adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=0;
		}
	},
	onChange: function (cookie, changed_preferences) {
		console.log('onChange fired ...');
		if (cc.allowedCategory('analytics')) {
			gtag('consent', 'update', {
				'analytics_storage': 'granted'
			});
		}
		if (!cc.allowedCategory('analytics')) {
			gtag('consent', 'update', {
				'analytics_storage': 'denied'
			});
		}
		if (cc.allowedCategory('advertising')) {
			(adsbygoogle=window.adsbygoogle||[]).requestNonPersonalizedAds=0;
			(adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=0;
		}
		if (!cc.allowedCategory('advertising')) {
			(adsbygoogle=window.adsbygoogle||[]).requestNonPersonalizedAds=1;
			(adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=0;
		}
	},

追記6

パッケージのjs、cssを変更せずに色替え！

githubでバージョンが上がっても上書きできるように。。

<style>
.ccv_mode2 {
    --cc-bg: #181b1d;
    --cc-text: #d8e5ea;
    --cc-btn-primary-bg: #a6c4dd;
    --cc-btn-primary-text: #000;
    --cc-btn-primary-hover-bg: #c2dff7;
    --cc-btn-secondary-bg: #33383c;
    --cc-btn-secondary-text: var(--cc-text);
    --cc-btn-secondary-hover-bg: #3e454a;
    --cc-toggle-bg-off: #667481;
    --cc-toggle-bg-on: var(--cc-btn-primary-bg);
    --cc-toggle-bg-readonly: #454c54;
    --cc-toggle-knob-bg: var(--cc-cookie-category-block-bg);
    --cc-toggle-knob-icon-color: var(--cc-bg);
    --cc-block-text: #b3bfc5;
    --cc-cookie-category-block-bg: #23272a;
    --cc-cookie-category-block-bg-hover: #2b3035;
    --cc-section-border: #292d31;
    --cc-cookie-table-border: #2b3035;
    --cc-webkit-scrollbar-bg: #667481;
    --cc-webkit-scrollbar-bg-hover: #9199a0;
}
:ccv_mode{
    --cc-bg: #fff;
    --cc-text: #2d4156;
    --cc-btn-primary-bg: #2d4156;
    --cc-btn-primary-text: var(--cc-bg);
    --cc-btn-primary-hover-bg: #1d2e38;
    --cc-btn-secondary-bg: #eaeff2;
    --cc-btn-secondary-text: var(--cc-text);
    --cc-btn-secondary-hover-bg: #d8e0e6;
    --cc-toggle-bg-off: #919ea6;
    --cc-toggle-bg-on: var(--cc-btn-primary-bg);
    --cc-toggle-bg-readonly: #d5dee2;
    --cc-toggle-knob-bg: #fff;
    --cc-toggle-knob-icon-color: #ecf2fa;
    --cc-block-text: var(--cc-text);
    --cc-cookie-category-block-bg: #f0f4f7;
    --cc-cookie-category-block-bg-hover: #e9eff4;
    --cc-section-border: #f1f3f5;
    --cc-cookie-table-border: #e9edf2;
    --cc-overlay-bg: rgba(4, 6, 8, .85);
    --cc-webkit-scrollbar-bg: #cfd5db;
    --cc-webkit-scrollbar-bg-hover: #9199a0;
}
</style>
<script>
//クラス替え！
	document.body.classList.toggle('ccv_mode');
//	document.body.classList.toggle('ccv_mode2');
</script>

追記7

個人情報保護委員会ウェブサイトで下記の記述があったので電話してみた。

個人情報の保護に関する法律についてのガイドライン に関するＱ＆Ａ

（法第31条の適用の有無について）

Ｑ８－10

A社が自社のウェブサイトにB社のタグを設置し、B社が当該タグを通じてA社ウェブサイトを閲覧したユーザーの閲覧履歴を取得している場合、

A社はB社にユーザーの閲覧履歴を提供したことになりますか。

Ａ８－10

個別の事案ごとに判断することとなりますが、A社がB社のタグにより収集される閲覧履歴を取り扱っていないのであれば、A社がB社に閲覧履歴を

「提供」したことにはならず、B社が直接にユーザーから閲覧履歴を取得したこととなると考えられます。このため、B社がそのタグを通じて閲覧

履歴を取得することについて、法第31条第１項は適用されないと考えられます。

なお、個人情報取扱事業者であるB社は、閲覧履歴を個人情報として取得する場合には、偽りその他不正の手段によりこれを取得してはならず

（法第20条第１項）、また、個人情報の利用目的を通知又は公表する必要があります（法第21条第１項）。

個人情報の保護に関する法律についてのガイドライン（通則編）

法第31条（第1項）

個人関連情報取扱事業者は、第三者が個人関連情報（個人関連情報データベース等を構成するものに限る。以下この章及び第6章において同じ。）

を個人データとして取得することが想定されるときは、第27条第1項各号に掲げる場合を除くほか、次に掲げる事項について、あらかじめ個人情報

保護委員会規則で定めるところにより確認することをしないで、当該個人関連情報を当該第三者に提供してはならない。

当該第三者が個人関連情報取扱事業者から個人関連情報の提供を受けて本人が識別される個人データとして取得することを認める旨の当該本人の

同意が得られていること。

(略)

規則第26条（第1項）

法第31条第1項の規定による同項第1号に掲げる事項の確認を行う方法は、個人関連情報の提供を受ける第三者から申告を受ける方法その他の適切な方法とする

電話で聞いてみたこと

Google Analyticsはどうなるのですか？と聞いてみた。

担当者は、Google Analyticsそのようなツールの機能はわかりませんが・・・と前置きに・・

結果は、A社、B社が同一の関連情報をもって紐付けできなければ、第3者の同意は不要的な・・

たぶんGoogle Analyticsでgtagコマンドで、ユーザーIDとか認識できるようなものを送ってるとか・・同意が必要?

単にGoogle Analytics設置して、PV見るぐらいは、同意は不要な感じ・・・

まぁ。各ツール使い方次第では、同意がいるので注意が必要ですね。ECサイトなど、ユーザーID送ってGoogle AnalyticsでEコマース使うとか・・

ウェブフォントとか、CDNは問題なさそう？・・

あと、これは、日本国内でのって話で今後、日本もGDPRの感じになっていた場合は・・・

出典

出典：個人情報保護委員会ウェブサイト

個人情報の保護に関する法律についてのガイドラインに関するＱ＆Ａ　

https://www.ppc.go.jp/personalinfo/faq/APPI_QA/#q8-10

個人情報の保護に関する法律についてのガイドライン（通則編）

https://www.ppc.go.jp/personalinfo/legal/guidelines_tsusoku/#a3-7-3