AMP
JA
English Deutsch Français العربية Español Italiano Indonesia 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • websites

Granular User Consent

デモを表示する Playground で開く

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 プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub でサンプルを編集する