User Consent Modal UI
Introduction
Sometimes publishers want to display more disclosures in the initial consent prompt iframe. This sample demonstrates how you can use amp-consent
together with a third-party iframe and style it to appear like a modal.
Setup
We need to import the amp-consent
component.
<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
Defining the Consent Flow
We define a basic consent flow using the promptUISrc
to load our custom consent iframe.
<amp-consent id="myUserConsent" layout="nodisplay">
<script type="application/json">{
"consentInstanceId": "myConsent",
"consentRequired": true,
"promptUISrc": "/static/samples/files/diy-consent.html",
"postPromptUI": "post-consent-ui"
}</script>
<div id="post-consent-ui">
<button on="tap:myUserConsent.prompt()">Update Consent</button>
</div>
</amp-consent>
Consent Dialog Iframe
When the consent dialog iframe is ready, it can send the amp-consent
component a postMessage with the style information.
window.parent.postMessage({ type: 'consent-ui', action: 'ready', initialHeight: '80vh', enableBorder: true }, '*');
Here, the initialHeight is a string that represents the viewport height that the iframe should take.
A viewport height between 30 and 60, inclusive, will tell amp-consent
to style the iframe in a bottom sheet.
A viewport height greater than 60 and less than or equal to 80 will tell amp-consent
to style the iframe as a centered modal.
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-
Written by @micajuineho