cookie consent機能を加える24-CookieYes | GDPR Cookie Consent-
この記事について
Hello World
CookieYes | GDPR Cookie Consentのweb appで出力したCookie Policyを基に、GDPR対応で必要なクッキーポリシー用の固定ページを次の手順で作成した。
その他、環境整備に関する新情報。
同系列WordPress特化型レンタルサーバー
WordPress専用クラウド型レンタルサーバー『wpX Speed』
同系列安定型レンタルサーバー
格安ドメイン名取得サービス『Xserverドメイン』
その他キャンペーン中WordPress対応レンタルサーバー
ロリポップ公式サイト
ドメイン管理に関しては
格安ドメイン名取得サービス『Xserverドメイン』
MuuMuu Domain!
お名前.com
cookie consent機能を加える24-CookieYes | GDPR Cookie Consent-
日本語版クッキーポリシーの作成
日本語版として下記のコードを用意した。
<div id="jp-cookie-policy">
<h2>クッキーポリシー</h2>
<p>
発効日: 25-Jun-2023 <br>
最終更新日: 21-Jul-2023
</p>
<h5>cookieとは?</h5>
<div class="cookie-policy-p"><p>このクッキーポリシーでは、Cookie とは何か、その使用方法、使用する Cookie の種類、Cookie を使用して収集する情報とその情報の使用方法、Cookie 設定の管理方法について説明します。</p> <p>Cookie は、小分けされた情報を保存するために使用される小さなテキスト ファイルです。これらは、Web サイトがブラウザに読み込まれるときにデバイスに保存されます。これらの Cookie は、Web サイトを適切に機能させ、安全性を高め、より良いユーザー エクスペリエンスを提供し、Web サイトの動作やパフォーマンスを理解し、どこに改善が必要かを分析するのに役立ちます。</p></div>
<h5>クッキーの使用方法?</h5>
<div class="cookie-policy-p"><p>ほとんどのオンライン サービスと同様に、当 Web サイトはいくつかの目的でファーストパーティ Cookie とサードパーティ Cookie を使用します。ファーストパーティ Cookie は主に、Web サイトが正しく機能するために必要であり、個人を特定できるデータは収集しません。</p> <p>当 Web サイトで使用されるサードパーティ Cookie は主に、Web サイトのパフォーマンス、貴方が当 Web サイトとどのようにやり取りするかを理解すること、当サービスを安全に保つこと、貴方に関連する広告を提供すること、そして全体としてより優れた改善されたユーザー エクスペリエンスを提供し、今後の当 Web サイトとのやり取りを高速化することを目的としています。</p></div>
<h5>当サイトが使用するCookieの種類</h5>
<div class="cky-audit-table-element"></div>
<h5 style="margin-bottom:20px;">Cookieの設定を管理する</h5>
<a class="cky-banner-element">クッキーの設定</a> <br/>
<div><p>上のボタンをクリックすると、いつでも Cookie の設定を変更できます。これにより、Cookie 同意バナーに再度アクセスして設定を変更したり、同意をすぐに取り消したりすることができます。</p> <p>これに加えて、ブラウザごとに、Web サイトで使用される Cookie をブロックおよび削除するためのさまざまな方法が提供されています。ブラウザの設定を変更してCookieをブロック/削除することができます。以下に、主要な Web ブラウザの Cookie を管理および削除する方法に関するサポート ドキュメントへのリンクを示します。</p> <p>Chrome: <a href="https://support.google.com/accounts/answer/32050" target="_blank">https://support.google.com/accounts/answer/32050</a></p><p>Safari: <a href="https://support.apple.com/en-in/guide/safari/sfri11471/mac" target="_blank">https://support.apple.com/en-in/guide/safari/sfri11471/mac</a></p><p>Firefox: <a href="https://support.mozilla.org/en-US/kb/clear-cookies-and-site-data-firefox?redirectslug=delete-cookies-remove-info-websites-stored&redirectlocale=en-US" target="_blank">https://support.mozilla.org/en-US/kb/clear-cookies-and-site-data-firefox?redirectslug=delete-cookies-remove-info-websites-stored&redirectlocale=en-US</a></p><p>Internet Explorer: <a href="https://support.microsoft.com/en-us/topic/how-to-delete-cookie-files-in-internet-explorer-bca9446f-d873-78de-77ba-d42645fa52fc" target="_blank">https://support.microsoft.com/en-us/topic/how-to-delete-cookie-files-in-internet-explorer-bca9446f-d873-78de-77ba-d42645fa52fc</a></p><p>他の Web ブラウザを使用している場合は、ブラウザの公式サポート ドキュメントにアクセスしてください。</p></div>
<p class="cookie-policy-p">
Cookie Policy Generated By <a target="_blank" href="https://www.cookieyes.com/?utm_source=CP&utm_medium=footer&utm_campaign=UW">CookieYes - Cookie Policy Generator</a>.
</p>
</div>コードの補足
全体を<div id=”jp-cookie-policy”>と</div>で挟み込んでいる。
英語版クッキーポリシーの作成
英語版として下記のコードを用意した。
<div id="en-cookie-policy">
<h2>Cookie Policy</h2>
<p>
Effective Date: 25-Jun-2023 <br>
Last Updated: 21-Jul-2023
</p>
<h5>What are cookies?</h5>
<div class="cookie-policy-p"><p>This Cookie Policy explains what cookies are and how we use them, the types of cookies we use i.e, the information we collect using cookies and how that information is used, and how to manage the cookie settings.</p> <p>Cookies are small text files that are used to store small pieces of information. They are stored on your device when the website is loaded on your browser. These cookies help us make the website function properly, make it more secure, provide better user experience, and understand how the website performs and to analyze what works and where it needs improvement.</p></div>
<h5>How do we use cookies?</h5>
<div class="cookie-policy-p"><p>As most of the online services, our website uses first-party and third-party cookies for several purposes. First-party cookies are mostly necessary for the website to function the right way, and they do not collect any of your personally identifiable data.</p> <p>The third-party cookies used on our website are mainly for understanding how the website performs, how you interact with our website, keeping our services secure, providing advertisements that are relevant to you, and all in all providing you with a better and improved user experience and help speed up your future interactions with our website.</p></div>
<h5>Types of Cookies we use</h5>
<div class="cky-audit-table-element"></div>
<h5 style="margin-bottom:20px;">Manage cookie preferences</h5>
<a class="cky-banner-element">Cookie Settings</a> <br/>
<div><p>You can change your cookie preferences any time by clicking the above button. This will let you revisit the cookie consent banner and change your preferences or withdraw your consent right away. </p> <p>In addition to this, different browsers provide different methods to block and delete cookies used by websites. You can change the settings of your browser to block/delete the cookies. Listed below are the links to the support documents on how to manage and delete cookies from the major web browsers.</p> <p>Chrome: <a href="https://support.google.com/accounts/answer/32050" target="_blank">https://support.google.com/accounts/answer/32050</a></p><p>Safari: <a href="https://support.apple.com/en-in/guide/safari/sfri11471/mac" target="_blank">https://support.apple.com/en-in/guide/safari/sfri11471/mac</a></p><p>Firefox: <a href="https://support.mozilla.org/en-US/kb/clear-cookies-and-site-data-firefox?redirectslug=delete-cookies-remove-info-websites-stored&redirectlocale=en-US" target="_blank">https://support.mozilla.org/en-US/kb/clear-cookies-and-site-data-firefox?redirectslug=delete-cookies-remove-info-websites-stored&redirectlocale=en-US</a></p><p>Internet Explorer: <a href="https://support.microsoft.com/en-us/topic/how-to-delete-cookie-files-in-internet-explorer-bca9446f-d873-78de-77ba-d42645fa52fc" target="_blank">https://support.microsoft.com/en-us/topic/how-to-delete-cookie-files-in-internet-explorer-bca9446f-d873-78de-77ba-d42645fa52fc</a></p><p>If you are using any other web browser, please visit your browser’s official support documents.</p></div>
<p class="cookie-policy-p">
Cookie Policy Generated By <a target="_blank" href="https://www.cookieyes.com/?utm_source=CP&utm_medium=footer&utm_campaign=UW">CookieYes - Cookie Policy Generator</a>.
</p>
</div>コードの補足
全体を<div id=”en-cookie-policy”>と</div>で挟み込んでいる。
言語切り替えボタンの作成
<button id="change_pagelang_btn" onclick="change_htmllang()" class="cky-btn" style="color: #d0d0d0; border-color: #d0d0d0; background-color: transparent;"><span class="lang_jp">Switch Language to English</span><span class="lang_en">日本語へ切り替え</span></button>コードの補足
buttonタグ内に<span class=”lang_jp”>日本語時の表示</span>と<span class=”lang_en”>英語時の表示</span>を入れた。
ボタンにはcookie consent機能を加える21-CookieYes | GDPR Cookie Consent-のJavascriptを呼ぶ機能が入れてある。
言語毎の表示非表示切り替え機能の作成
言語毎の表示非表示は下のCSSによって実現させている。
<style>
a.cky-banner-element {
padding: 8px 30px;
background: #F8F9FA;
color: #858A8F;
border: 1px solid #DEE2E6;
box-sizing: border-box;
border-radius: 2px;
cursor: pointer;
}
html[lang="ja"] #en-cookie-policy{
display:none;
}
html[lang="en"] #jp-cookie-policy{
display:none;
}
html[lang="en"] .lang_jp{
display:none;
}
html[lang="ja"] .lang_en{
display:none;
}
</style>コードの補足
条件の例としてコードから抜粋したものを下に記す。
htmlのlangがjaの時、idがen-cookie-policyのタグは表示しない
html[lang="ja"] #en-cookie-policy{
display:none;
}日本語時に<div id=”en-cookie-policy”>と</div>で挟んだ部分を非表示にしている。
htmlのlangがenの時、classがlang_jpのタグは表示しない
html[lang="en"] .lang_jp{
display:none;
}英語時に<span class=”lang_jp”>と</span>で挟んだ部分を非表示にしている。
コードを全て合わせる
<style>
a.cky-banner-element {
padding: 8px 30px;
background: #F8F9FA;
color: #858A8F;
border: 1px solid #DEE2E6;
box-sizing: border-box;
border-radius: 2px;
cursor: pointer;
}
html[lang="ja"] #en-cookie-policy{
display:none;
}
html[lang="en"] #jp-cookie-policy{
display:none;
}
html[lang="en"] .lang_jp{
display:none;
}
html[lang="ja"] .lang_en{
display:none;
}
</style>
<button id="change_pagelang_btn" onclick="change_htmllang()" class="cky-btn" style="color: #909090; border-color: #d0d0d0; background-color: transparent;"><span class="lang_jp">Switch Language to English</span><span class="lang_en">日本語へ切り替え</span></button>
<h1 class="cookie-policy-h1">Cookie Policy</h1>
<div id="en-cookie-policy">
<h2>Cookie Policy</h2>
<p>
Effective Date: 25-Jun-2023 <br>
Last Updated: 21-Jul-2023
</p>
<h5>What are cookies?</h5>
<div class="cookie-policy-p"><p>This Cookie Policy explains what cookies are and how we use them, the types of cookies we use i.e, the information we collect using cookies and how that information is used, and how to manage the cookie settings.</p> <p>Cookies are small text files that are used to store small pieces of information. They are stored on your device when the website is loaded on your browser. These cookies help us make the website function properly, make it more secure, provide better user experience, and understand how the website performs and to analyze what works and where it needs improvement.</p></div>
<h5>How do we use cookies?</h5>
<div class="cookie-policy-p"><p>As most of the online services, our website uses first-party and third-party cookies for several purposes. First-party cookies are mostly necessary for the website to function the right way, and they do not collect any of your personally identifiable data.</p> <p>The third-party cookies used on our website are mainly for understanding how the website performs, how you interact with our website, keeping our services secure, providing advertisements that are relevant to you, and all in all providing you with a better and improved user experience and help speed up your future interactions with our website.</p></div>
<h5>Types of Cookies we use</h5>
<div class="cky-audit-table-element"></div>
<h5 style="margin-bottom:20px;">Manage cookie preferences</h5>
<a class="cky-banner-element">Cookie Settings</a> <br/>
<div><p>You can change your cookie preferences any time by clicking the above button. This will let you revisit the cookie consent banner and change your preferences or withdraw your consent right away. </p> <p>In addition to this, different browsers provide different methods to block and delete cookies used by websites. You can change the settings of your browser to block/delete the cookies. Listed below are the links to the support documents on how to manage and delete cookies from the major web browsers.</p> <p>Chrome: <a href="https://support.google.com/accounts/answer/32050" target="_blank">https://support.google.com/accounts/answer/32050</a></p><p>Safari: <a href="https://support.apple.com/en-in/guide/safari/sfri11471/mac" target="_blank">https://support.apple.com/en-in/guide/safari/sfri11471/mac</a></p><p>Firefox: <a href="https://support.mozilla.org/en-US/kb/clear-cookies-and-site-data-firefox?redirectslug=delete-cookies-remove-info-websites-stored&redirectlocale=en-US" target="_blank">https://support.mozilla.org/en-US/kb/clear-cookies-and-site-data-firefox?redirectslug=delete-cookies-remove-info-websites-stored&redirectlocale=en-US</a></p><p>Internet Explorer: <a href="https://support.microsoft.com/en-us/topic/how-to-delete-cookie-files-in-internet-explorer-bca9446f-d873-78de-77ba-d42645fa52fc" target="_blank">https://support.microsoft.com/en-us/topic/how-to-delete-cookie-files-in-internet-explorer-bca9446f-d873-78de-77ba-d42645fa52fc</a></p><p>If you are using any other web browser, please visit your browser’s official support documents.</p></div>
<p class="cookie-policy-p">
Cookie Policy Generated By <a target="_blank" href="https://www.cookieyes.com/?utm_source=CP&utm_medium=footer&utm_campaign=UW">CookieYes - Cookie Policy Generator</a>.
</p>
</div>
<div id="jp-cookie-policy">
<h2>クッキーポリシー</h2>
<p>
発効日: 25-Jun-2023 <br>
最終更新日: 21-Jul-2023
</p>
<h5>cookieとは?</h5>
<div class="cookie-policy-p"><p>このクッキーポリシーでは、Cookie とは何か、その使用方法、使用する Cookie の種類、Cookie を使用して収集する情報とその情報の使用方法、Cookie 設定の管理方法について説明します。</p> <p>Cookie は、小分けされた情報を保存するために使用される小さなテキスト ファイルです。これらは、Web サイトがブラウザに読み込まれるときにデバイスに保存されます。これらの Cookie は、Web サイトを適切に機能させ、安全性を高め、より良いユーザー エクスペリエンスを提供し、Web サイトの動作やパフォーマンスを理解し、どこに改善が必要かを分析するのに役立ちます。</p></div>
<h5>クッキーの使用方法?</h5>
<div class="cookie-policy-p"><p>ほとんどのオンライン サービスと同様に、当 Web サイトはいくつかの目的でファーストパーティ Cookie とサードパーティ Cookie を使用します。ファーストパーティ Cookie は主に、Web サイトが正しく機能するために必要であり、個人を特定できるデータは収集しません。</p> <p>当 Web サイトで使用されるサードパーティ Cookie は主に、Web サイトのパフォーマンス、貴方が当 Web サイトとどのようにやり取りするかを理解すること、当サービスを安全に保つこと、貴方に関連する広告を提供すること、そして全体としてより優れた改善されたユーザー エクスペリエンスを提供し、今後の当 Web サイトとのやり取りを高速化することを目的としています。</p></div>
<h5>当サイトが使用するCookieの種類</h5>
<div class="cky-audit-table-element"></div>
<h5 style="margin-bottom:20px;">Cookieの設定を管理する</h5>
<a class="cky-banner-element">クッキーの設定</a> <br/>
<div><p>上のボタンをクリックすると、いつでも Cookie の設定を変更できます。これにより、Cookie 同意バナーに再度アクセスして設定を変更したり、同意をすぐに取り消したりすることができます。</p> <p>これに加えて、ブラウザごとに、Web サイトで使用される Cookie をブロックおよび削除するためのさまざまな方法が提供されています。ブラウザの設定を変更してCookieをブロック/削除することができます。以下に、主要な Web ブラウザの Cookie を管理および削除する方法に関するサポート ドキュメントへのリンクを示します。</p> <p>Chrome: <a href="https://support.google.com/accounts/answer/32050" target="_blank">https://support.google.com/accounts/answer/32050</a></p><p>Safari: <a href="https://support.apple.com/en-in/guide/safari/sfri11471/mac" target="_blank">https://support.apple.com/en-in/guide/safari/sfri11471/mac</a></p><p>Firefox: <a href="https://support.mozilla.org/en-US/kb/clear-cookies-and-site-data-firefox?redirectslug=delete-cookies-remove-info-websites-stored&redirectlocale=en-US" target="_blank">https://support.mozilla.org/en-US/kb/clear-cookies-and-site-data-firefox?redirectslug=delete-cookies-remove-info-websites-stored&redirectlocale=en-US</a></p><p>Internet Explorer: <a href="https://support.microsoft.com/en-us/topic/how-to-delete-cookie-files-in-internet-explorer-bca9446f-d873-78de-77ba-d42645fa52fc" target="_blank">https://support.microsoft.com/en-us/topic/how-to-delete-cookie-files-in-internet-explorer-bca9446f-d873-78de-77ba-d42645fa52fc</a></p><p>他の Web ブラウザを使用している場合は、ブラウザの公式サポート ドキュメントにアクセスしてください。</p></div>
<p class="cookie-policy-p">
Cookie Policy Generated By <a target="_blank" href="https://www.cookieyes.com/?utm_source=CP&utm_medium=footer&utm_campaign=UW">CookieYes - Cookie Policy Generator</a>.
</p>
</div>コード構成
構成は下記の通り単純。前述してきたコード群にhタグを挿入した。
#＜CSSでの言語による表示非表示切り替え機能＞
#＜言語切り替えボタン＞
#<h1 class="cookie-policy-h1">Cookie Policy</h1>
#＜英語用表示部分＞
#＜日本語版クッキーポリシー部分＞まとめ
CSS以外は、バナー内での言語切り替えに使用したコードを流用する形で実装した。ボタンを連打するとバナー内に複数ボタンができてしまうが、徳川系ニート的には連打するような輩はほっとけばよいといった印象。
よろしく。