예제: Granular User Consent

Granular User Consent
- Introduction Setup Configuration object Consent dialog Post-prompt UI Blocking components

websites

Introduction

Granular consent allows users to make a set of consent choices on your page. Global consent allows them to make a single choice for the page. The amp-consent component allows you to set up granular consent, global consent, or both simultaneously. In this sample, we'll show you how to use granular consent.

Setup

First, you need to import the script for the amp-consent extension.

<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>

amp-consent allows you to block AMP components until the user gives their consent. We'll demonstrate this with amp-fit-text components, so let's import that script too.

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

You need to choose names for your consent purposes. Here, we'll call them purpose-marketing, purpose-analytics, and purpose-marketing.

Then, you'll create an <amp-consent> component containing the following: - a JSON configuration object - the consent UI, which lets the user make consent choices - optionally, a reprompt UI, which allows the user to show the consent UI again

Configuration object

The documentation lists all the keys that this object can contain. Here, we've used these:

consentInstanceId. This is required.
consentRequired. By setting this to true, we're saying consent will be required. To fetch this information from an endpoint, we'd use remote.
promptUI. Specifies the id of the dialog where the user can make consent choices.
postPromptUI. The id of the area that allows the user to see that dialog again.
uiConfig. Including "overlay": true here tells amp-consent to darken the area outside the consent dialog when the dialog's open.

  {
    "consentInstanceId": "consent1",
    "consentRequired": true,
    "promptUI": "consentDialog",
    "postPromptUI": "repromptDialog",
    "uiConfig": {
      "overlay": true
    },
    "purposeConsentRequired": ["purpose-analytics", "purpose-marketing"]
  }

This will typically contain a set of inputs, often checkboxes, that let the user make consent choices. It will likely also have buttons to let them save their choices, save or reject everything, or simply dismiss the dialog.

When the user makes a consent choice, use the setPurpose() action to temporarily store that information. This action takes the form setPurpose({purpose type}={boolean value}).

Here, for example, if the user clicks our checkbox for marketing cookies, we set our purpose-marketing purpose accordingly:

  setPurpose(purpose-marketing=event.checked)

We set that purpose when AMP fires the change event on the corresponding checkbox. Here's how that looks:

  <input
    id="consent-purpose-analytics"
    type="checkbox"
    on="change:consent1.setPurpose(purpose-marketing=event.checked)"
  >

To save the user's choices, use the accept action. To hide the consent UI without saving choices, use the dismiss action. Your user may make a selection for some consent purposes, but not all of them. You can set their choice for the remaining consent purposes by passing accept the argument (purposeConsentDefault={false|true}).

Here's how these buttons look in our sample:

  <button class="choiceButton" on="tap:siteConsent.accept(purposeConsentDefault=false)">
    Save
  </button>
  <button class="choiceButton" on="tap:siteConsent.dismiss">
    Dismiss
  </button>

Post-prompt UI

Finally, you can create an area that the user can use to show the consent UI again. Use the prompt action to make this happen. Here's how that looks in this sample:

  <div id="repromptDialog">
    Do you want to make your consent choices again?
    <button on="tap:siteConsent.prompt">I do!</button>
  </div>

Here's our entire <amp-consent> component.

<amp-consent layout="nodisplay" id="siteConsent">
  <script type="application/json">
    {
      "consentInstanceId": "consent1",
      "consentRequired": true,
      "promptUI": "consentPopup",
      "postPromptUI": "repromptDialog",
      "uiConfig": {
        "overlay": true
      },
      "purposeConsentRequired": ["purpose-analytics", "purpose-marketing"]
    }
  </script>
  <div id="consentPopup">
    <div id="consentDialog">
      <div class="dismissButton" role="button" tabindex="0" on="tap:siteConsent.dismiss">
        𝗫
      </div>
      <h3>Your privacy</h3>
      <p>
        You can control the ways in which we improve and personalize your
        experience. Please choose whether you wish to allow the following:
      </p>
      <div class="choices">
        <label class="consentLabel" for="consent-purpose-marketing">
          <input id="consent-purpose-marketing" type="checkbox" on="change:siteConsent.setPurpose(purpose-marketing=event.checked)">
          Marketing cookies
        </label>
        <label class="consentLabel" for="consent-purpose-conversion">
          <input id="consent-purpose-conversion" type="checkbox" on="change:siteConsent.setPurpose(purpose-conversion=event.checked)">
          Conversion tracking cookies
        </label>
        <label class="consentLabel" for="consent-purpose-analytics">
          <input id="consent-purpose-analytics" type="checkbox" on="change:siteConsent.setPurpose(purpose-analytics=event.checked)">
          Analytics
        </label>

        <button class="choiceButton" on="tap:siteConsent.accept(purposeConsentDefault=false)">
          Save
        </button>
        <button class="choiceButton" on="tap:siteConsent.dismiss">
          Dismiss
        </button>
      </div>
      <p>
        Click "Save" to save your choices.
        <br>
        Click "Dismiss" to get rid of this dialog box without saving your
        choices.
      </p>
    </div>
  </div>
  <div id="repromptDialog">
    Do you want to make your consent choices again?
    <button on="tap:siteConsent.prompt">I do!</button>
  </div>
</amp-consent>

Blocking components

You can label any AMP component to be blocked if the user hasn't accepted the right consent purposes. Specify these purposes in a comma-separated list in the data-block-on-consent-purposes attribute.

(See the results of your consent choices here)

I'm shown if you allow marketing cookies.

I'm shown if you allow marketing AND analytics cookies.

I'm shown if you allow analytics cookies.

<div id="consentDemoArea">
  <p class="note">(See the results of your consent choices here)</p>
  <amp-fit-text id="marketingContent" width="200" height="50" layout="fixed" data-block-on-consent-purposes="purpose-marketing">
    I'm shown if you allow marketing cookies.
  </amp-fit-text>
  <amp-fit-text id="conversionContent" width="200" height="50" layout="fixed" data-block-on-consent-purposes="purpose-marketing,purpose-analytics">
    I'm shown if you allow marketing AND analytics cookies.
  </amp-fit-text>
  <amp-fit-text id="analyticsContent" width="200" height="50" layout="fixed" data-block-on-consent-purposes="purpose-analytics">
    I'm shown if you allow analytics cookies.
  </amp-fit-text>
</div>

자세한 설명이 필요하신가요?

이 페이지의 설명만으로 궁금한 점이 모두 해결되지 않는다면 다른 AMP 사용자에게 문의하여 구체적인 활용 사례를 논의해 보세요.

Stack Overflow로 이동

설명이 부족한 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.

GitHub에서 샘플 수정하기

Written by @morss

Granular User Consent

Introduction

Setup

Configuration object

Consent dialog

Post-prompt UI

Your privacy

Blocking components