範例：外部使用者同意流程 - 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