AMP
  • websites

Client Side User Consent Flow

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 basic blocking consent flow can be built, which would just show a simple blocking popup with an accept and reject button. On reject some content in the page will be blocked.

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.

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>

for this example we use amp-ad as well as...

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

... amp-list together with...

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

... amp-mustache.

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

Basic usage

The amp-consent component allows to specify the required user consent for this page using the required 'consentRequired' flag. A CORS endpoints can be specified via the checkConsentHref attribute. The amp-consent component then will check via a POST request if the consent UI needs to be shown. The response should look like this:

{
  "consentRequired": boolean (required),
  "consentStateValue": enum (accepted/rejected/unknown) (optional),
  "consentString": string (optional),
  "expireCache": boolean (default false),
}

It is possible, to re-trigger the consent dialog using the myConsent.prompt() action. One use case for this is giving users the option to change their settings after consent dialog has been dismissed. For this to work, the post consent UI needs to be specified in the amp-consent JSON config: "promptUI": "consentDialog". If consentRequired was set to true in the incline script config, then amp-consent will first check localstorage for an existing consent decision and use it if present. Otherwise it will show the promptUi (if configured). If consentRequired was set to false, amp-consent will immediately unblock all elements.

<amp-consent id="myUserConsent" layout="nodisplay">
  <script type="application/json">{
    "consentInstanceId": "consent-id",
    "consentRequired": true,
    "promptUI": "consentDialog",
    "postPromptUI": "post-consent-ui"
  }</script>
  <div class="popupOverlay" id="consentDialog">
    <div class="consentPopup">
      <div class="dismiss-button" role="button" tabindex="0" on="tap:myUserConsent.dismiss">X</div>
      <h2>Headline</h2>
      <p>This is an important message requiring you to make a choice.</p>
      <p>This is some more information about this choice. Here's a list of items related to this choice.</p>
      <amp-list height="132" layout="fixed-height" src="/static/samples/json/consent-items.json" binding="no">
        <template type="amp-mustache">
          <li>{{.}}</li>
        </template>
      </amp-list>
      <button on="tap:myUserConsent.accept">Accept</button>
      <button on="tap:myUserConsent.reject">Reject</button>
    </div>
  </div>
  <div id="post-consent-ui">
    <button on="tap:myUserConsent.prompt()">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:

<amp-img data-block-on-consent src="/static/samples/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). Note that you may see the same ad when accepting or rejecting consent for this specific example and that's because the example doesn't use personalized information even when accepting consent.
Here is an example of amp-ad depending on amp-consent:

<amp-ad data-block-on-consent data-slot="/30497360/a4a/a4a_native" height="250" type="doubleclick" width="300">
 </amp-ad>
자세한 설명이 필요하신가요?

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

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

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

GitHub에서 샘플 수정하기