範例：用戶端使用者同意流程 - amp.dev

用戶端使用者同意流程
- 簡介設定基本用法

網站

簡介

現今使用者希望對自己的線上體驗有更多掌控權。此外，發布商在如何向使用者提供通知和選擇方面，也面臨各種不同的要求，從供應商政策到不斷演變的法律規範皆是如此。開放原始碼 AMP 專案正努力為發布商和技術供應商提供工具，以便在其 AMP 網頁上實作偏好的使用者控制項，並支援各種個別的法規遵循要求。

本頁面示範如何建構基本的封鎖同意流程，此流程只會顯示一個簡單的封鎖彈出式視窗，其中包含「接受」和「拒絕」按鈕。如果拒絕，網頁中的某些內容將會遭到封鎖。

同意聲明會儲存到本機儲存空間中，在接受/拒絕一次之後，除非刪除此主機的本機儲存空間內容 (例如透過Chrome 開發人員工具)，否則您只會再次看到彈出式對話方塊。

設定

在標頭中匯入 consent 元件。

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

在此範例中，我們也使用 amp-ad，以及...

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

... amp-list，連同...

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

... amp-mustache。

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

基本用法

amp-consent 元件可讓您使用必要的 'consentRequired' 旗標，指定此網頁所需的使用者同意聲明。CORS 端點可以透過 checkConsentHref 屬性指定。然後，amp-consent 元件會透過 POST 要求檢查是否需要顯示同意聲明 UI。回應應如下所示

{
  "consentRequired": boolean (required),
  "consentStateValue": enum (accepted/rejected/unknown) (optional),
  "consentString": string (optional),
  "expireCache": boolean (default false),
}

可以使用 myConsent.prompt() 動作重新觸發同意聲明對話方塊。其中一個使用案例是讓使用者在關閉同意聲明對話方塊後，選擇變更設定。若要讓此功能運作，需要在 amp-consent JSON 設定中指定同意聲明後 UI："promptUI": "consentDialog"。如果在內嵌指令碼設定中將 consentRequired 設定為 true，則 amp-consent 會先檢查本機儲存空間中是否有現有的同意聲明決策，並在有的情況下使用該決策。否則，它會顯示 promptUi (如果已設定)。如果 consentRequired 設定為 false，則 amp-consent 會立即解除封鎖所有元素。

<amp-consent id="myUserConsent" layout="nodisplay">
  <script type="application/json">{
    "consentInstanceId": "consent-id",
    "consentRequired": true,
    "promptUI": "consentDialog",
    "postPromptUI": "post-consent-ui"
  }</script>
  <div class="popupOverlay" id="consentDialog">
    <div class="consentPopup">
      <div class="dismiss-button" role="button" tabindex="0" on="tap:myUserConsent.dismiss">X</div>
      <h2>Headline</h2>
      <p>This is an important message requiring you to make a choice.</p>
      <p>This is some more information about this choice. Here's a list of items related to this choice.</p>
      <amp-list height="132" layout="fixed-height" src="/static/samples/json/consent-items.json" binding="no">
        <template type="amp-mustache">
          <li>{{.}}</li>
        </template>
      </amp-list>
      <button on="tap:myUserConsent.accept">Accept</button>
      <button on="tap:myUserConsent.reject">Reject</button>
    </div>
  </div>
  <div id="post-consent-ui">
    <button on="tap:myUserConsent.prompt()">Update Consent</button>
  </div>
</amp-consent>

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

廣告也可以在使用者同意後才解除封鎖，但廣告聯播網可以實作自己的行為 (例如，在未經同意的情況下，預設為非個人化廣告，如 Doubleclick 的文件所述)。請注意，當您接受或拒絕此特定範例的同意聲明時，可能會看到相同的廣告，這是因為即使在接受同意聲明時，此範例也不會使用個人化資訊。
以下是取決於 amp-consent 的 amp-ad 範例

<amp-ad data-block-on-consent data-slot="/30497360/a4a/a4a_native" height="250" type="doubleclick" width="300">
 </amp-ad>

需要更多說明嗎？

如果本頁面的說明無法解答您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

功能未說明？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別熱衷的問題做出一次性的貢獻。

在 GitHub 上編輯範例

用戶端使用者同意流程

簡介

設定

基本用法

標題