External User Consent Flow
Introduction
Sometimes publishers want to collect user consent using external prompt UI flow with iframes. This sample demonstrates how you can use amp-consent together with amp-iframe to achieve this. In this sample we'll build a consent dialog from an iframe.
Setup
We need to import both, the amp-consent ...
<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
... and the amp-iframe extension.
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Defining the Consent Flow
We define a basic consent flow, similar to this sample. The consent dialog is from a CORS iframe loaded with the amp-iframe component
<amp-consent id="myUserConsent" layout="nodisplay">
<script type="application/json">{
"consentInstanceId": "iframe-consent",
"checkConsent": "remote",
"checkConsentHref": "/documentation/examples/api/get-consent",
"promptUI": "myConsentFlow",
"postPromptUI": "post-consent-ui"
}</script>
<div id="myConsentFlow" class="popupOverlay">
<div class="consentPopup">
<amp-iframe layout="fill" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" src="/static/samples/files/external-consent-iframe.html">
<div placeholder>Loading</div>
</amp-iframe>
</div>
</div>
<div id="post-consent-ui">
<button on="tap:myUserConsent.prompt()">Update Consent</button>
</div>
</amp-consent>
Consent Dialog Iframe
The consent dialog iframe can inform the amp-consent component user's choice through postMessages.
window.parent.postMessage({ type: 'consent-response', action: 'accept' }, '*');
Here action can be either 'accept', 'reject' or 'dismiss'.
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>
Sollten die Erklärungen auf dieser Seite nicht all deine Fragen beantworten, kannst du dich gerne an andere AMP Nutzer wenden, um deinen konkreten Use Case zu besprechen.
Zu Stack Overflow wechseln Ein Feature wurde nicht erklärt?Das AMP Projekt ist auf deine Teilnahme und deine Beiträge angewiesen! Wir hoffen natürlich, dass du dich aktiv an unserer Open Source Community beteiligen wirst. Aber wir freuen uns auch über einmalige Beiträge zu den Themen, die dich besonders interessieren.
Beispiel auf GitHub bearbeiten-