AMP
ZH
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe Polski Tiếng việt
  • websites

External User Consent Flow

在 Playground 中打开

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>

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>

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>
需要进一步说明？

如果此页面上的说明未能涵盖您的所有问题，欢迎与其他 AMP 用户取得联系，讨论您的具体用例。

前往 Stack Overflow
一项无法解释的功能？

AMP 项目强烈鼓励您参与并做出贡献！我们希望您能成为我们开放源代码社区的持续参与者，但我们也欢迎您对所热衷问题做出一次性贡献。

编辑 GitHub 上的示例