Exemple : Granular User Consent

Table des matières

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>

Besoin de plus amples explications ?

Si les explications de cette page ne répondent pas à vos questions, n'hésitez pas à contacter d'autres utilisateurs d'AMP pour discuter de votre cas d'utilisation spécifique.

Se rendre sur Stack Overflow

Une fonctionnalité n'a pas encore été expliquée ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Modifier l'exemple sur GitHub

Written by @morss

Granular User Consent

Introduction

Setup

Configuration object

Consent dialog

Post-prompt UI

Your privacy

Blocking components