範例：使用者同意聲明模式 UI - amp.dev

使用者同意聲明模式 UI
- 簡介設定定義同意聲明流程同意聲明對話框 Iframe

網站

簡介

有時發布商希望在初始同意聲明提示 iframe 中顯示更多揭露事項。此範例示範如何將 amp-consent 與第三方 iframe 一起使用，並將其樣式設定為看起來像模式視窗。

設定

我們需要匯入 amp-consent 組件。

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

我們使用 `promptUISrc` 定義基本的同意聲明流程，以載入我們的自訂同意聲明 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>

當同意聲明對話框 iframe 準備就緒時，它可以將包含樣式資訊的 postMessage 傳送給 `amp-consent` 組件。

window.parent.postMessage({
  type: 'consent-ui',
  action: 'ready',
  initialHeight: '80vh',
  enableBorder: true
}, '*');

在此，initialHeight 是一個字串，表示 iframe 應佔據的 viewport 高度。介於 30 到 60（含）之間的 viewport 高度會告知 `amp-consent` 將 iframe 的樣式設定為底部工作表。大於 60 且小於或等於 80 的 viewport 高度會告知 `amp-consent` 將 iframe 的樣式設定為置中模式視窗。

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

作者： @micajuineho

使用者同意聲明模式 UI

簡介

設定

定義同意聲明流程

同意聲明對話框 Iframe