同意API

背景

同意APIを使用すると、同意管理プログラムのすべての側面をプログラム的に制御できます。これには、モーダルの管理、同意状況の管理、および設定された目的に関する情報の取得が含まれます。

同意APIを使用することで、Zarazの同意設定を外部の同意管理プラットフォームと統合したり、同意モーダルをカスタマイズしたり、特定の地域のユーザーに対して同意管理を制限したりできます。

イベント

`Consent API Ready`

同意APIがページ上で完全に読み込まれたときに、コードがそのメソッドやプロパティと相互作用する前に呼び出されないようにするために、これを知っておくと便利です。

document.addEventListener("zarazConsentAPIReady", () => {
  // 同意APIを使って何かをする
});

`Consent Choices Updated`

このイベントは、ユーザーが同意設定を変更するたびに発火します。これは、同意の変更に対してアクションを実行するために使用できます。たとえば、新しい同意設定でツールを更新する場合などです。

document.addEventListener("zarazConsentChoicesUpdated", () => {
  // `zaraz.consent.getAll();`を使用して新しい同意設定を読み取り、それを使って何かをする
});

プロパティ

以下は、zaraz.consentオブジェクトのプロパティです。

modal boolean
- 同意モーダルダイアログの現在の表示状態を取得または設定します。
purposes object read-only
- ID、名前、説明、および順序を持つすべての設定された目的を含むオブジェクトです。
APIReady boolean read-only
- 同意APIが現在ページ上で利用可能かどうかを示します。

メソッド

`Get`

zaraz.consent.get(purposeId);

get(purposeId) : boolean | undefined

目的IDを使用して、目的の現在の同意状況を取得します。

true: 同意が与えられました。
false: 同意が与えられませんでした。
undefined: 目的は存在しません。

パラメータ

purposeId string
- 目的を表すIDです。

`Set`

zaraz.consent.set(consentPreferences);

set(consentPreferences) : undefined

目的IDを使用して、いくつかの目的の同意状況を設定します。

パラメータ

consentPreferences object
- 設定したい目的とそれぞれの同意状況を説明する{ purposeId: boolean }オブジェクトです。

`Get All`

zaraz.consent.getAll();

getAll() : { purposeId: boolean }

すべての目的の同意状況を持つオブジェクトを返します。

`Set All`

zaraz.consent.setAll(consentStatus);

setAll(consentStatus) : undefined

すべての目的の同意状況を一度に設定します。

パラメータ

consentStatus boolean
- 同意が与えられたかどうかを示します。

`Get All Checkboxes`

zaraz.consent.getAllCheckboxes();

getAllCheckboxes() : { purposeId: boolean }

すべての目的のチェックボックス状況を持つオブジェクトを返します。

`Set Checkboxes`

zaraz.consent.setCheckboxes(checkboxesStatus);

setCheckboxes(checkboxesStatus) : undefined

目的IDを使用して、いくつかの目的の同意状況を設定します。

パラメータ

checkboxesStatus object
- 設定したいチェックボックスとそれぞれのチェック状況を説明する{ purposeId: boolean }オブジェクトです。

`Set All Checkboxes`

zaraz.consent.setAllCheckboxes(checkboxStatus);

setAllCheckboxes(checkboxStatus) : undefined

同意モーダル内のすべての目的に対してcheckboxStatus状況を一度に設定します。

パラメータ

checkboxStatus boolean
- 目的がチェックされるべきかどうかを示します。

`Send queued events`

zaraz.consent.sendQueuedEvents();

sendQueuedEvents() : undefined

同意が不足しているために送信されなかったページビューに基づくイベントは、同意が与えられた後にこのメソッドを使用して送信できます。

例

位置に基づく同意チェックの制限

Zarazの複数の機能を組み合わせて、一部の訪問者に対して同意管理を効果的に無効にすることができます。たとえば、EUからの訪問者にのみ使用したい場合、自動的に同意モーダルを表示しないようにし、次のスクリプトを含むカスタムHTMLツールを追加できます。

<script>
function getCookie(name) {
  const value = `; ${document.cookie}`
  return value?.split(`; ${name}=`)[1]?.split(";")[0]
}

function handleZarazConsentAPIReady() {
  const consent_cookie = getCookie("cf_consent")
  const isEUCountry = "{{system.device.location.isEUCountry}}" === "1"
  if (!consent_cookie) {
    if (isEUCountry) {
      zaraz.consent.modal = true
    } else {
      zaraz.consent.setAll(true)
      zaraz.consent.sendQueuedEvents()
    }
  }
}

if (zaraz.consent?.APIReady) {
  handleZarazConsentAPIReady()
} else {
  document.addEventListener("zarazConsentAPIReady", handleZarazConsentAPIReady)
}
</script>

注意: 同意マネージャーのクッキー名をカスタマイズしている場合は、上記のスニペットで「cf_consent」の代わりにそのカスタマイズされた名前を使用してください。

このカスタムHTMLツールを同意要件なしで実行させることで、モーダルはすべてのEU訪問者に表示され、他の訪問者には自動的に同意が与えられます。{{ system.device.location.isEUCountry }}プロパティは、訪問者がEU諸国からの場合は1、そうでない場合は0になります。同様の方法で、国コードに基づいて同意チェックを制限するために{{ system.device.location.country }}などの他のプロパティや変数を使用して、同意管理の動作をカスタマイズできます。

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings