範例：外部使用者同意流程 - amp.dev

外部使用者同意流程
- 簡介設定定義同意流程同意對話框 Iframe

網站

簡介

有時發佈商希望使用帶有 iframe 的外部提示 UI 流程來收集使用者同意聲明。本範例示範如何搭配 amp-consent 和 amp-iframe 來達成此目的。在本範例中，我們將從 iframe 建置同意對話框。

設定

我們需要匯入 amp-consent 和...

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

...以及 amp-iframe 擴充功能。

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

我們定義一個基本的同意流程，類似於此範例。同意對話框來自透過 amp-iframe 元件載入的 CORS iframe

<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>

同意對話框 iframe 可以透過 postMessages 通知 amp-consent 元件使用者的選擇。

window.parent.postMessage({
  type: 'consent-response',
  action: 'accept'
}, '*');

此處的動作可以是 'accept'、'reject' 或 'dismiss'。

使用 data-block-on-consent 屬性來封鎖 AMP 元件，直到使用者給予同意聲明。個別 AMP 元件可以覆寫封鎖行為，並自行實作封鎖邏輯。

以下是一個在給予同意聲明之前會被封鎖的圖片

<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 上編輯範例

由 @zhouyx 撰寫

外部使用者同意流程

簡介

設定

定義同意流程

同意對話框 Iframe