範例：進階使用者同意流程 - amp.dev

進階使用者同意流程
- 簡介設定基本用法

網站

簡介

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

本頁面示範如何建置更進階的封鎖同意流程。它將顯示「接受」和「拒絕」按鈕，點擊後將顯示更多資訊，例如使用者接受時使用的第三方清單，或使用者拒絕時的一般資料使用通知。

同意聲明會儲存到 localstorage 中 - 在接受/拒絕一次後，您只會在刪除此主機的 localstorage 內容後再次看到彈出式對話方塊，例如透過 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 旗標，為此頁面指定所需的使用者同意聲明。可以使用 checkConsentHref 屬性指定 CORS 端點，該端點將透過 POST 請求進行檢查。回應應如下所示

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

回應將指示是否顯示 promptUI 中給定 ID 的元素。 amp-consent 將首先檢查 localstorage 是否有現有的同意聲明決定，並在存在時使用它。否則，如果已設定且 consentRequired 為 true，它將顯示 promptUi。如果 consentRequired 設定為 false，`amp-consent 將立即解除封鎖所有元素。

<amp-consent id="myConsent" layout="nodisplay">
      <script type="application/json">{
        "consentInstanceId": "advanced-consent",
        "consentRequired": "remote",
        "checkConsentHref": "/documentation/examples/api/get-consent",
        "promptUI": "consentDialog",
        "postPromptUI": "post-consent-ui"
      }</script>
      <div class="lightbox" id="consentDialog">
        <div class="lightbox-content">
          <div class="dismiss-button" role="button" tabindex="0" on="tap:myConsent.dismiss">X</div>
          <div class="message">
            <h2>Headline</h2>
            <p>This is an important message requiring you to make a choice.</p>
          </div>
          <div id="choice">
            <button on="tap:choice2.show,choice1.hide">Choice 2</button>
          </div>
          <div id="choice1" hidden class="message">
            <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="/json/consent-items.json" binding="no">
              <template type="amp-mustache">
                <li>{{.}}</li>
              </template>
            </amp-list>
            <button on="tap:myConsent.accept">Confirm</button>
          </div>
          <div id="choice2" hidden class="message">
            <p>This is some more information about this choice.</p>
            <button on="tap:myConsent.reject">Confirm</button>
          </div>
        </div>
      </div>
      <div id="post-consent-ui">
        <button on="tap:myConsent.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-ad 取決於 amp-consent 的範例

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

由 @micajuine-ho 和 @sebastianbenz 撰寫

進階使用者同意流程

簡介

設定

基本用法

標題