Advanced User Consent Flow

Edit on Github
Open in Playground

Introduction

Users today want additional control over their online experience. Additionally, publishers are faced with a variety of different demands on how they provide notice and choice to their users – from vendor policies to evolving legal requirements. The open source AMP Project is working to give publishers and tech vendors tools to implement their preferred user controls and to support their varied individual compliance requirements on their AMP pages.

This page demonstrates how a more advanced blocking consent flow can be built. It will show accept and reject buttons, which on click will reveal more information, like a list of used 3rd parties on user acceptance, or a general data usage notice on user rejection.

Setup

Import the consent component in the header.

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

Important

The consent is saved to localstorage - after accepting/rejecting it once you will only get the popup dialog again after deleting the localstorage content for this host, for example via Chrome Dev Tools.

Basic Usage

The amp-consent component allows to specify the required user consent for this page. A CORS endpoints can be specified via the checkConsentHref attribute. This endpoint will be queried via a POST request to determine if the consent UI specified for it needs to be shown. The response should look like this:

{
  'promptIfUnknown': boolean (true/false)
}

The response will indicate if the consent needs to be shown or not. If it needs to be shown, the element with the id given in promptUI will be displayed.

Example

<amp-consent id="myConsent"
  layout="nodisplay">
  <script type="application/json">
    {
      "consents": {
        "consent1": {
          "checkConsentHref": "/samples_templates/consent/getConsent",
          "promptUI": "consentDialog"
        }
      },
      "postPromptUI": "post-consent-ui"
    }
  </script>
  <div class="lightbox"
    id="consentDialog">
    <div class="lightbox-content">
      <div class="dismiss-button"
        role="button"
        tabindex="0"
        on="tap:myConsent.dismiss">X</div>
      <div class="message">
        <div class="h2 m1">Headline</div>
        <p class="m1">This is an important message requiring you to make a choice.</p>
      </div>
      <div id="choice">
        <button class="ampstart-btn ampstart-btn-secondary caps mx1"
          on="tap:choice1.show,choice2.hide">Choice 1</button>
        <button class="ampstart-btn ampstart-btn-secondary caps"
          on="tap:choice2.show,choice1.hide">Choice 2</button>
      </div>
      <div id="choice1"
        hidden
        class="message">
        <p class="m1">This is some more information about this choice. Here's a list of items related to this choice.</p>
        <amp-list width="auto"
          height="132"
          layout="fixed-height"
          src="/json/consent-items.json"
          class="m1">
          <template type="amp-mustache">
            <li>{{.}}</li>
          </template>
        </amp-list>
        <button on="tap:myConsent.accept"
          class="ampstart-btn ampstart-btn-secondary caps m1">Confirm</button>
      </div>
      <div id="choice2"
        hidden
        class="message">
        <p class="m1">This is some more information about this choice.</p>
        <button on="tap:myConsent.reject"
          class="ampstart-btn ampstart-btn-secondary caps m1">Confirm</button>
      </div>
    </div>
  </div>
  <div id="post-consent-ui">
    <button on="tap:myConsent.prompt()"
      class="ampstart-btn caps m1">Update Consent</button>
  </div>
</amp-consent>

Use data-block-on-consent attribute to block AMP components until consent is given. Individual AMP components can override blocking behavior and implement blocking logic themselves.

Here is an image which is blocked until consent is given:

Example

<amp-img data-block-on-consent
  src="/img/landscape_lake_300x201.jpg"
  width="300"
  height="201">
</amp-img>

Ads can also be blocked until consent is given, but ad networks can implement own behavior (e.g. default to non-personalized ads without consent, as seen documented here for Doubleclick).
Here is an example of amp-ad depending on amp-consent:

Example

<amp-ad data-block-on-consent
  data-slot="/30497360/a4a/a4a_native"
  height="250"
  type="doubleclick"
  width="300">
</amp-ad>