Advanced 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 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>
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 you to specify the required user consent for this page using the required consentRequired flag. A CORS endpoint can be specified via the checkConsentHref attribute which will be checked via a POST request. The response should look like this:
{ "consentRequired": boolean (required), "consentStateValue": enum (accepted/rejected/unknown) (optional), "consentString": string (optional), "expireCache": boolean (default false), }
The response will indicate if the element with the id given in promptUI will be displayed.
amp-consent will first check localstorage for an existing consent decision and use it if present. Otherwise it will show the promptUi, if configured and consentRequired is true. If consentRequired is set to false, `amp-consent will immediately unblock all elements.
<amp-consent id="myConsent" layout="nodisplay">
<script type="application/json">{
"consentInstanceId": "advanced-consent",
"consentRequired": "remote",
"checkConsentHref": "/documentation/examples/api/get-consent",
"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">
<h2>Headline</h2>
<p>This is an important message requiring you to make a choice.</p>
</div>
<div id="choice">
<button on="tap:choice2.show,choice1.hide">Choice 2</button>
</div>
<div id="choice1" hidden class="message">
<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="/json/consent-items.json" binding="no">
<template type="amp-mustache">
<li>{{.}}</li>
</template>
</amp-list>
<button on="tap:myConsent.accept">Confirm</button>
</div>
<div id="choice2" hidden class="message">
<p>This is some more information about this choice.</p>
<button on="tap:myConsent.reject">Confirm</button>
</div>
</div>
</div>
<div id="post-consent-ui">
<button on="tap:myConsent.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>
Jika penjelasan pada halaman ini tidak menjawab semua pertanyaan Anda, silakan hubungi pengguna AMP lainnya untuk mendiskusikan contoh penggunaan Anda yang spesifik.
Kunjungi Stack Overflow Fitur yang tidak dijelaskan?Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.
Edit sampel di GitHub