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

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

網站

簡介

有時發布商希望使用帶有 iframe 的外部提示 UI 流程來收集使用者同意。此範例示範如何搭配 amp-iframe 使用 amp-consent 來達成此目的。在此範例中，我們將從 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