改正個人情報保護法対応のクッキーバナー

らら
らら

はじめに

以前、説明していた。下記で、以前は、GDPR対応のものにしていたが、GDPR対応をやめた話。。

2022年4月より施行される改正個人情報保護法について

2022年4月より施行される改正個人情報保護法について
https://www.omakase.net/blog/2022/01/kojinjyouho.html

つかったもの。

前回の記事同様下記・・

GDPR準拠のものです。これをオプトイン・アウトを使用せず。POPUP機能だけ使用します。

Cookie Consent  MIT License

https://github.com/orestbida/cookieconsent

Google系のコード

こちらはそのまま。。


var GA_CODE = 'UA-XXXXXX-1';
var G4_CODE = 'G-XXXXXXX';
var newScript = document.createElement('script');
newScript.async = true;
newScript.src = 'https://www.googletagmanager.com/gtag/js?id='+GA_CODE;
var firstScript = document.getElementsByTagName('script')[0];
firstScript.parentNode.insertBefore(newScript, firstScript);
window.dataLayer = window.dataLayer || [];
function gtag() {dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', GA_CODE);
gtag('config', G4_CODE);

クッキーバナーの設定など

下記を変更します。


<script defer src="/js/cookieconsent/cookieconsent.js"></script>
<script defer src="/js/cookieconsent/cookieconsent_init.js"></script>
<!-- Google Adsence Personalized -->
<script>
(adsbygoogle=window.adsbygoogle||[]).requestNonPersonalizedAds=1;
(adsbygoogle=window.adsbygoogle||[]).push({google_ad_client: "ca-pub-xxxxxxxxxxxxx", enable_page_level_ads: true});
</script>
<!-- Google Adsence Personalized -->
<!-- Google Analytics no cookei -->
<script>
	// Define dataLayer and the gtag function.
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	// Default ad_storage to 'denied'.
	gtag('consent', 'default', {
		'analytics_storage': 'denied'
	});
</script>
<!-- Google Analytics no cookei -->
<!-- Google Analytics Approval Cookei Use -->
<script type="text/plain" data-cookiecategory="analytics">
	gtag('consent', 'update', {
		'analytics_storage': 'granted'
	});
</script>
<!-- Google Analytics Approval Cookei Use -->

変更後。

下記だけ...


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

cookieconsent_init.jsの内容 変更前


// obtain cookieconsent plugin
var cc = initCookieConsent();
window.dataLayer = window.dataLayer || [];
function gtag() {
	dataLayer.push(arguments);
}
// run plugin with config object
cc.run({
	current_lang: 'ja',
	autoclear_cookies: true,				// default: false
	theme_css: '/common/js/cookieconsent/cookieconsent.css',
	cookie_name: 'ccv_cookieconsent',		// default: 'cc_cookie'
	cookie_expiration: 365,					// default: 182
	page_scripts: true,						// default: false
	force_consent: false,					// default: false
	//mode:'opt-out',
	// auto_language: null,					// default: null; could also be 'browser' or 'document'
	// autorun: true,						// default: true
	// delay: 0,							// default: 0
	// 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: 'cloud',				// box,cloud,bar
			position: 'bottom center',		// bottom,middle,top + left,right,center
			transition: 'slide'				// zoom,slide
		},
		settings_modal: {
			layout: 'bar',					// box,bar
			position: 'left',				// right,left (available only if bar layout selected)
			transition: 'slide'				// zoom,slide
		}
	},
	/* End new options added in v2.4 */
	onFirstAction: function(user_preferences, cookie){
		console.log('onFirstAction fired ...');
		// callback triggered only once
	},
	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;
		}
		if (cc.allowedCategory('advertising')) {
			gtag('consent', 'update', {
				'ad_storage': 'granted'
			});
		}
		if (!cc.allowedCategory('advertising')) {
			gtag('consent', 'update', {
				'ad_storage': 'denied'
			});
		}
	},
	languages: {
		'ja': {
			consent_modal: {
				title: 'Cookieとプライバシー',
				description: '当社は、第三者が運営するデータ・マネジメント・プラットフォームからCookieにより収集されたウェブの閲覧履歴及びその分析結果を取得し、これをお客様の個人データと結びつけた上で、広告配信等の目的で利用いたします。<a class="cc-link" href="/cookie-policy.html">クッキー(Cookie)ポリシー</a><br><button type="button" data-cc="c-settings" class="cc-link">詳細設定</button>',
				primary_btn: {
					text: '承諾',
					role: 'accept_all'	  //'accept_selected' or 'accept_all'
				},
				secondary_btn: {
					text: 'クッキーの設定',
					role: 'settings'	   //'settings' or 'accept_necessary'
				},
				revision_message: '<br><br> Dear user, terms and conditions have changed since the last time you visisted!'
			},
			settings_modal: {
				title: 'クッキーの設定',
				save_settings_btn: '設定を保存',
				accept_all_btn: 'すべて許可する',
				reject_all_btn: 'すべて拒否する',
				close_btn_label: 'Close',
				cookie_table_headers: [
					{col1: 'クッキー名'},
					{col2: 'ドメイン'},
					{col3: '有効期限'},
					{col4: '説明'}
				],
				blocks: [
					{
						title: 'クッキー使用の詳細設定',
						description: '当社は、第三者が運営するデータ・マネジメント・プラットフォームからCookieにより収集されたウェブの閲覧履歴及びその分析結果を取得し、これをお客様の個人データと結びつけた上で、広告配信等の目的で利用いたします。 <a class="cc-link" href="/cookie-policy.html">クッキー(Cookie)ポリシー</a>',
					}, {
						title: '必須クッキー',
						description: 'このクッキーは、弊社のサイトを閲覧したり、サイト内の機能を使用するために必要なものです。また、このクッキーはユーザーの一回のブラウジングセッション内での行動履歴を記録する際にも使用されます。',
						toggle: {
							value: 'necessary',
							enabled: true,
							readonly: true  //cookie categories with readonly=true are all treated as "necessary cookies"
						},
						cookie_table: [
							{
								col1: 'ccv_cookieconsent',
								col2: 'www.xxxxx.xxx',
								col3: '1 年',
								col4: 'クッキーバナー(クッキー同意画面)の設定で使用します。',
							},
						]
					}, {
						title: '分析用クッキー',
						description: 'このクッキーは、弊社あるいはサードパーティのサービス提供者により、Web解析等、サイトの利用状況に関する情報を提供するために使用されます。',
						toggle: {
							value: 'analytics',
							enabled: false,
							readonly: false
						},
						cookie_table: [
							{
								col1: '_ga',
								col2: 'www.xxxxx.xxx',
								col3: '2 年',
								col4: 'ユーザーを区別するために使用します。',
							},
							{
								col1: '_gid',
								col2: 'www.xxxxx.xxx',
								col3: '24 時間',
								col4: 'ユーザーを区別するために使用します。',
							},
							{
								col1: '_gat',
								col2: 'www.xxxxx.xxx',
								col3: '1 分',
								col4: 'ユーザーを区別するために使用します。',
							},
							{
								col1: 'AMP_TOKEN',
								col2: 'www.xxxxx.xxx',
								col3: '30 秒~1 年',
								col4: 'クライアント ID を AMP クライアント ID サービスから取得するために使用できるトークンが含まれています。他の有効な値によって、オプトアウト、処理中のリクエスト、AMP クライアント ID サービスからのクライアント ID の取得エラーが示されます。',
							},
							{
								col1: '_gac_<property-id>',
								col2: 'www.xxxxx.xxx',
								col3: '90 日',
								col4: 'ユーザーのキャンペーン関連情報が含まれています。Google アナリティクスと Google 広告のアカウントをリンクしている場合は、オプトアウトしない限り、Google 広告ウェブサイトのコンバージョン タグでこの Cookie の情報が読み取られます。',
							},
						]
					}, {
						title: '広告クッキー',
						description: 'このクッキーは、ユーザーの興味関心や弊社のサイト内での行動を記録するため、サイトの閲覧履歴を保存する目的で使用されます。',
						toggle: {
							value: 'advertising',
							enabled: false,
							readonly: false,
							reload: 'on_disable'			// New option in v2.4, check readme.md
						},
						cookie_table: [
							{
								col1: 'APISID, NID, SID, 1P_JAR, 3PSID, _Secure-3PAPISID, __Secure-HSID, __Secure-3PSID, __Secure-APISID, __Secure-SSID, SEARCH_SAMESITE, ID, DSID, IDE, test_cookie, __Secure-3PSIDCC, __Secure-3PAPISID, SIDCC',
								col2: 'www.xxxxx.xxx',
								col3: '2年',
								col4: 'Google一連のサードパーティCookieで、直近の検索履歴やオンライン行動に従いGoogleサイトが分析したユーザーの興味に基づき、パーソナライズド広告を表示します。',
							},
							{
								col1: '_gcl_au, _gclxxxx',
								col2: 'www.xxxxx.xxx',
								col3: '3か月',
								col4: '_gcl_au, _gclxxxx Google AdsenseのサードパーティCookieで、ユーザーが広告からサイトにアクセスした際に広告パフォーマンスを追跡します。 永続的 3カ月',
							},
							{
								col1: 'AID, TAID, ONZ, ANID',
								col2: 'www.xxxxx.xxx',
								col3: '2年',
								col4: 'GoogleのサードパーティCookieで、端末間で広告をパーソナライズし、コンバージョンを追跡します。ユーザーのGoogleアカウント情報を使用してリンクされた端末を追跡します。',
							},
							{
								col1: 'HSID, SSID, APISID, SAPISID, VISITOR_INFO1_LIVE cookie, YSC PREF cookie, LOGIN_INFO, GPS, YTSESSION, awxxxx',
								col2: 'www.xxxxx.xxx',
								col3: '2年',
								col4: 'これはGoogleのサードパーティCookieで、YouTubeの視聴状況や埋め込み動画が含まれるページでの行動を登録します。',
							},
							{
								col1: 'DV',
								col2: 'www.xxxxx.xxx',
								col3: '6週間',
								col4: 'Googleが使用するサードパーティCookieで、検索表示の設定に基づき広告を最適化します。',
							},
							{
								col1: 'CONSENT',
								col2: 'www.xxxxx.xxx',
								col3: '20年',
								col4: 'GoogleのサードパーティCookieで、Cookieの同意設定を登録します。',
							},
						]
					}, {
						title: 'ソーシャルメディアクッキー',
						description: 'これらのクッキーは、ソーシャルメディアの共有ボタンもしくは「いいね」ボタンなどを使用して情報を共有する場合に使用します。',
						toggle: {
							value: 'social',
							enabled: true,
							readonly: true,
							reload: 'on_disable'			// New option in v2.4, check readme.md
						},
						cookie_table: [
							{
								col1: '_ldbrbid',
								col2: 'www.xxxxx.xxx',
								col3: '2 年',
								col4: 'line.me LINEで送るで使用する。LINEクッキーです。',
							},
							{
								col1: 'datr,fr,locale,sb',
								col2: 'www.xxxxx.xxx',
								col3: '',
								col4: 'これらはクッキーは第三者のFacebook クッキーです。これらのクッキーは希望するユーザーがFacebookのアカウントにログインし、我々のウェブサイトのコンテンツをフレンドと共有することを可能にします。これらのクッキーがあなたのアカウントへのアクセスを我々に許可することや、あなたのアカウントに係る機密情報を我々に提供することはありません。',
							},
						]
					}, {
						title: '詳細な情報',
						description: 'クッキー(Cookie)ポリシーついて <a class="cc-link" href="/cookie-policy.html">クッキー(Cookie)ポリシー</a>.',
					}
				]
			}
		}
	}
});

cookieconsent_init.jsの内容 変更後

クッキーの設定ボタン消しました。secondary_btn

descriptionから設定ボタンのリンクを外しています。

許可・設定時のアクションはすべて削除・・

settings_modalはほんとは・・いらないです。。


// run plugin with config object
cc.run({
	current_lang: 'ja',
	autoclear_cookies: true,				// default: false
	theme_css: '/common/js/cookieconsent/cookieconsent.css',
	cookie_name: 'ccv_cookieconsent',		// default: 'cc_cookie'
	cookie_expiration: 365,					// default: 182
	page_scripts: true,						// default: false
	force_consent: false,					// default: false
	//mode:'opt-out',
	// auto_language: null,					// default: null; could also be 'browser' or 'document'
	// autorun: true,						// default: true
	// delay: 0,							// default: 0
	// 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: 'cloud',				// box,cloud,bar
			position: 'bottom center',		// bottom,middle,top + left,right,center
			transition: 'slide'				// zoom,slide
		},
		settings_modal: {
			layout: 'bar',					// box,bar
			position: 'left',				// right,left (available only if bar layout selected)
			transition: 'slide'				// zoom,slide
		}
	},
	/* End new options added in v2.4 */
	onFirstAction: function(user_preferences, cookie){
		console.log('onFirstAction fired ...');
		// callback triggered only once
	},
	onAccept: function (cookie) {
		console.log('onAccept fired ...');
	},
	onChange: function (cookie, changed_preferences) {
		console.log('onChange fired ...');
	},
	languages: {
		'ja': {
			consent_modal: {
				title: 'Cookieとプライバシー',
				description: '当社は、第三者が運営するデータ・マネジメント・プラットフォームからCookieにより収集されたウェブの閲覧履歴及びその分析結果を取得し、これをお客様の個人データと結びつけた上で、広告配信等の目的で利用いたします。<a class="cc-link" href="/cookie-policy.html">クッキー(Cookie)ポリシー</a><br>',
				primary_btn: {
					text: '承諾',
					role: 'accept_all'	  //'accept_selected' or 'accept_all'
				},
				revision_message: '<br><br> Dear user, terms and conditions have changed since the last time you visisted!'
			},
			settings_modal: {
				title: 'クッキーの設定',
				save_settings_btn: '設定を保存',
				accept_all_btn: 'すべて許可する',
				reject_all_btn: 'すべて拒否する',
				close_btn_label: 'Close',
				cookie_table_headers: [
					{col1: 'クッキー名'},
					{col2: 'ドメイン'},
					{col3: '有効期限'},
					{col4: '説明'}
				],
				blocks: [
					{
						title: 'クッキー使用の詳細設定',
						description: '当社は、第三者が運営するデータ・マネジメント・プラットフォームからCookieにより収集されたウェブの閲覧履歴及びその分析結果を取得し、これをお客様の個人データと結びつけた上で、広告配信等の目的で利用いたします。 <a class="cc-link" href="/cookie-policy.html">クッキー(Cookie)ポリシー</a>',
					}, {
						title: '必須クッキー',
						description: 'このクッキーは、弊社のサイトを閲覧したり、サイト内の機能を使用するために必要なものです。また、このクッキーはユーザーの一回のブラウジングセッション内での行動履歴を記録する際にも使用されます。',
						toggle: {
							value: 'necessary',
							enabled: true,
							readonly: true  //cookie categories with readonly=true are all treated as "necessary cookies"
						},
						cookie_table: [
							{
								col1: 'ccv_cookieconsent',
								col2: 'www.xxxxx.xxx',
								col3: '1 年',
								col4: 'クッキーバナー(クッキー同意画面)の設定で使用します。',
							},
						]
					}, {
						title: '分析用クッキー',
						description: 'このクッキーは、弊社あるいはサードパーティのサービス提供者により、Web解析等、サイトの利用状況に関する情報を提供するために使用されます。',
						toggle: {
							value: 'analytics',
							enabled: false,
							readonly: false
						},
						cookie_table: [
							{
								col1: '_ga',
								col2: 'www.xxxxx.xxx',
								col3: '2 年',
								col4: 'ユーザーを区別するために使用します。',
							},
							{
								col1: '_gid',
								col2: 'www.xxxxx.xxx',
								col3: '24 時間',
								col4: 'ユーザーを区別するために使用します。',
							},
							{
								col1: '_gat',
								col2: 'www.xxxxx.xxx',
								col3: '1 分',
								col4: 'ユーザーを区別するために使用します。',
							},
							{
								col1: 'AMP_TOKEN',
								col2: 'www.xxxxx.xxx',
								col3: '30 秒~1 年',
								col4: 'クライアント ID を AMP クライアント ID サービスから取得するために使用できるトークンが含まれています。他の有効な値によって、オプトアウト、処理中のリクエスト、AMP クライアント ID サービスからのクライアント ID の取得エラーが示されます。',
							},
							{
								col1: '_gac_<property-id>',
								col2: 'www.xxxxx.xxx',
								col3: '90 日',
								col4: 'ユーザーのキャンペーン関連情報が含まれています。Google アナリティクスと Google 広告のアカウントをリンクしている場合は、オプトアウトしない限り、Google 広告ウェブサイトのコンバージョン タグでこの Cookie の情報が読み取られます。',
							},
						]
					}, {
						title: '広告クッキー',
						description: 'このクッキーは、ユーザーの興味関心や弊社のサイト内での行動を記録するため、サイトの閲覧履歴を保存する目的で使用されます。',
						toggle: {
							value: 'advertising',
							enabled: false,
							readonly: false,
							reload: 'on_disable'			// New option in v2.4, check readme.md
						},
						cookie_table: [
							{
								col1: 'APISID, NID, SID, 1P_JAR, 3PSID, _Secure-3PAPISID, __Secure-HSID, __Secure-3PSID, __Secure-APISID, __Secure-SSID, SEARCH_SAMESITE, ID, DSID, IDE, test_cookie, __Secure-3PSIDCC, __Secure-3PAPISID, SIDCC',
								col2: 'www.xxxxx.xxx',
								col3: '2年',
								col4: 'Google一連のサードパーティCookieで、直近の検索履歴やオンライン行動に従いGoogleサイトが分析したユーザーの興味に基づき、パーソナライズド広告を表示します。',
							},
							{
								col1: '_gcl_au, _gclxxxx',
								col2: 'www.xxxxx.xxx',
								col3: '3か月',
								col4: '_gcl_au, _gclxxxx Google AdsenseのサードパーティCookieで、ユーザーが広告からサイトにアクセスした際に広告パフォーマンスを追跡します。 永続的 3カ月',
							},
							{
								col1: 'AID, TAID, ONZ, ANID',
								col2: 'www.xxxxx.xxx',
								col3: '2年',
								col4: 'GoogleのサードパーティCookieで、端末間で広告をパーソナライズし、コンバージョンを追跡します。ユーザーのGoogleアカウント情報を使用してリンクされた端末を追跡します。',
							},
							{
								col1: 'HSID, SSID, APISID, SAPISID, VISITOR_INFO1_LIVE cookie, YSC PREF cookie, LOGIN_INFO, GPS, YTSESSION, awxxxx',
								col2: 'www.xxxxx.xxx',
								col3: '2年',
								col4: 'これはGoogleのサードパーティCookieで、YouTubeの視聴状況や埋め込み動画が含まれるページでの行動を登録します。',
							},
							{
								col1: 'DV',
								col2: 'www.xxxxx.xxx',
								col3: '6週間',
								col4: 'Googleが使用するサードパーティCookieで、検索表示の設定に基づき広告を最適化します。',
							},
							{
								col1: 'CONSENT',
								col2: 'www.xxxxx.xxx',
								col3: '20年',
								col4: 'GoogleのサードパーティCookieで、Cookieの同意設定を登録します。',
							},
						]
					}, {
						title: 'ソーシャルメディアクッキー',
						description: 'これらのクッキーは、ソーシャルメディアの共有ボタンもしくは「いいね」ボタンなどを使用して情報を共有する場合に使用します。',
						toggle: {
							value: 'social',
							enabled: true,
							readonly: true,
							reload: 'on_disable'			// New option in v2.4, check readme.md
						},
						cookie_table: [
							{
								col1: '_ldbrbid',
								col2: 'www.xxxxx.xxx',
								col3: '2 年',
								col4: 'line.me LINEで送るで使用する。LINEクッキーです。',
							},
							{
								col1: 'datr,fr,locale,sb',
								col2: 'www.xxxxx.xxx',
								col3: '',
								col4: 'これらはクッキーは第三者のFacebook クッキーです。これらのクッキーは希望するユーザーがFacebookのアカウントにログインし、我々のウェブサイトのコンテンツをフレンドと共有することを可能にします。これらのクッキーがあなたのアカウントへのアクセスを我々に許可することや、あなたのアカウントに係る機密情報を我々に提供することはありません。',
							},
						]
					}, {
						title: '詳細な情報',
						description: 'クッキー(Cookie)ポリシーついて <a class="cc-link" href="/cookie-policy.html">クッキー(Cookie)ポリシー</a>.',
					}
				]
			}
		}
	}
});

さいごに

うちでは、英語ページがないので。

ご利用に際してで下記を追加しておきました・・

当サイトのサービス対象国

当サイトに掲載されている情報は、日本国内のお客様に提供する商品およびサービスの情報であり、日本国内に在住されているお客様を対象としています。

関連記事