マニュアルブロッキング

Posted on 2023-03-20

自動ブロックはクッキーの設定を防ぐための迅速かつ簡単な方法ですが、クッキーを設定するための要素を手動でマークアップするメリットとして以下いくつかの理由があります。

ウェブサイトのパフォーマンスへの影響を極力少なくしたい場合
どのような要素をブロックし、どのような状況で読み込むかを完全に制御したい場合
自動ブロックがウェブサイトに影響を与え、多くの調整を要する場合

（例えば、data-cookieconsent="ignore "属性を付与する要素が、実際にブロックする必要がある要素よりも多い場合、手動で要素をマークアップする方が楽になります）

data-cookieconsent属性の使用

インラインスクリプト

インラインスクリプトをマークアップするには

type属性を "text/plain "に設定します。

これはブラウザにスクリプトをプレーンテキストと見なすよう指示するため、実質的にスクリプトを無効にすることができます。

data-cookieconsent属性を追加し、以下の値のいずれかを割り当てます。

「preferences」、「statistics」、「marketing」のいずれかを指定します。この属性は、Cookiebotスクリプトがスクリプトを有効にして読み込む必要がある条件を定義します。

例：スクリプトのマークアップ

この基本的なインラインスクリプトは、ユーザー名という名前のクッキーを設定します。

<script type="text/javascript">
  document.cookie = "username=John Smith; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
</script>

このiframeをマークアップして、「設定情報（preferences）」カテゴリのクッキーへの同意を求めるには、次のようにします。

<script type="text/plain" data-cookieconsent="preferences">
  document.cookie = "username=John Smith; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
</script>

data-cookieconsentの有効な値は次のとおりです。data-cookieconsentの有効な値は、「preferences」、「statistics」、「marketing」または「ignore」です。また、data-cookieconsent="statistics, marketing"のように、これらのカテゴリー（"ignore "を除く）を組み合わせて使用することができます。「Ignore」は自動ブロックにのみ影響し、この文脈では関係ありません。必須Cookieの「necessary」または未分類Cookieの「unclassified」は有効な値ではないので、決して使用しないでください。代わりに、必須Cookieのスクリプトはマークアップしないようにします。

外部要素

外部要素は通常、スクリプト、iframe、画像などで、src属性で外部リソースを指します。前述のように、スクリプトはtypeを "text/plain "に設定することで、クッキーを設定できないようにすることができます。しかし、iframeや画像にはtype属性がないため、このタイプの要素には次のような別のアプローチが用いられています。

src 属性を data-cookieblock-src に変更します。これにより、表示するコンテンツを定義するsrc属性が技術的に欠落しているため、画像/iframeが無効になります。
data-cookieconsent属性を追加し、以下の値のいずれかを割り当てます。"preferences"、"statistics"、"marketing "のいずれかを指定します。

この属性は、Cookiebotスクリプトを有効にして読み込む必要がある条件を定義します。

例：iframeをマークアップ

このiframeは、YouTubeから動画を読み込んでいます。

<iframe src="https://www.youtube.com/embed/fyvwLAPNfXY"></iframe>

このiframeをマークアップして、「マーケティング」カテゴリのCookieへの同意を要求する場合。

<iframe
  data-cookieconsent="marketing"
  data-cookieblock-src="https://www.youtube.com/embed/fyvwLAPNfXY"
></iframe>

CSSを使用した同意に依存するコンテンツ

Cookiebotスクリプトは、ユーザーの同意に基づくコンテンツの非表示（または表示）に使用できるクラスも定義しています。ユーザーが同意していないカテゴリの要素を非表示にするには、要素のclass属性に以下のCSSクラスのいずれかを追加します。

.cookieconsent-optin-preferences
.cookieconsent-optin-statistics
.cookieconsent-optin-marketing

逆に、特定のカテゴリーに同意が得られていない場合は、コンテンツを表示することもできます。

.cookieconsent-optout-preferences
.cookieconsent-optout-statistics
.cookieconsent-optout-marketing

例：「マーケティング」カテゴリで訪問者がクッキーを受け入れた場合にのみ表示されるコンテンツ

このiframeは、Youtubeから動画を読み込んでいます。

<iframe src="https://www.youtube.com/embed/fyvwLAPNfXY"></iframe>

CSSクラス.cookieconsent-optin-marketingでマークアップされたこの要素は、ウェブサイトの訪問者が「マーケティング」Cookieに同意するまで表示されません。

<iframe
  class="cookieconsent-optin-marketing"
  src="https://www.youtube.com/embed/fyvwLAPNfXY"
></iframe>

また、コンテンツの周囲にdivを追加することもできます。

<div class="cookieconsent-optin-marketing">
  <iframe src="https://www.youtube.com/embed/fyvwLAPNfXY"></iframe>
</div>

Javascriptの使用

訪問者の同意を尊重しながらコードを実行する望ましい方法は、カスタムイベントリスナーまたはコールバックのいずれかに接続されたコードを使用することです。これにより、同意の変更とページ（再）ロードの両方でイベントとコールバックが発生するため、ページを閲覧中に同意が変更された場合でもコードが実行されることが保証されます。

以下の両方の例では、統計への同意が与えられたときに、クッキーを設定するコードのみが実行されます。

CookiebotOnAcceptイベントリスナーを使用します。

<script type="text/javascript">
  window.addEventListener('CookiebotOnAccept', function (e) {
if (!Cookiebot.consent.statistics) return;
// Execute code that set a cookie
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
  }, false);
</script>

CookiebotCallback_OnAcceptコールバックを使用します。

<script type="text/javascript">
  function CookiebotCallback_OnAccept() {
if (!Cookiebot.consent.statistics) return;
// Execute code that set a cookie
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
  }
</script>

参照記事：https://support.cookiebot.com/hc/en-us/articles/4405978132242-Manual-cookie-blocking

Posted on 2023-03-20