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

使用者同意模式 UI
- Introduction Setup Defining the Consent Flow Consent Dialog 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 應佔用的視窗高度。介於 30 到 60 (含) 之間的視窗高度會告知 amp-consent 將 iframe 設定為底部工作表樣式。大於 60 且小於或等於 80 的視窗高度會告知 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