範例：精細的使用者同意聲明 - amp.dev

精細的使用者同意聲明
- 簡介設定設定物件同意聲明對話方塊提示後 UI 封鎖元件

網站

簡介

精細同意聲明 讓使用者能在您的網頁上進行一組同意聲明選擇。全域同意聲明 讓他們能針對網頁做出單一選擇。amp-consent 元件讓您能同時設定精細同意聲明、全域同意聲明或兩者皆設定。在此範例中，我們將向您展示如何使用精細同意聲明。

設定

首先，您需要匯入 amp-consent 擴充功能的指令碼。

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

amp-consent 讓您能封鎖 AMP 元件，直到使用者給予同意聲明為止。我們將使用 amp-fit-text 元件來示範此功能，因此我們也匯入該指令碼。

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

您需要為您的同意聲明目的選擇名稱。在此，我們將它們稱為 purpose-marketing、purpose-analytics 和 purpose-marketing。

然後，您將建立一個 <amp-consent> 元件，其中包含以下內容：- JSON 設定物件 - 同意聲明 UI，可讓使用者做出同意聲明選擇 - (選擇性) 重新提示 UI，可讓使用者再次顯示同意聲明 UI

設定物件

文件列出此物件可包含的所有鍵。在此，我們使用了這些

consentInstanceId。這是必要的。
consentRequired。透過將此設定為 true，我們表示將需要同意聲明。若要從端點擷取此資訊，我們會使用 remote。
promptUI。指定使用者可進行同意聲明選擇的對話方塊的 id。
postPromptUI。允許使用者再次看到該對話方塊的區域的 id。
uiConfig。在此包含 "overlay": true 會告知 amp-consent 在對話方塊開啟時，將同意聲明對話方塊外部的區域變暗。

  {
    "consentInstanceId": "consent1",
    "consentRequired": true,
    "promptUI": "consentDialog",
    "postPromptUI": "repromptDialog",
    "uiConfig": {
      "overlay": true
    },
    "purposeConsentRequired": ["purpose-analytics", "purpose-marketing"]
  }

這通常會包含一組輸入，通常是核取方塊，可讓使用者做出同意聲明選擇。它也可能會有按鈕，讓他們儲存其選擇、儲存或拒絕所有項目，或只是關閉對話方塊。

當使用者做出同意聲明選擇時，請使用 setPurpose() 動作來暫時儲存該資訊。此動作採用 setPurpose({目的類型}={布林值}) 的形式。

在此範例中，例如，如果使用者按一下我們的行銷 Cookie 核取方塊，我們會據此設定我們的 purpose-marketing 目的

  setPurpose(purpose-marketing=event.checked)

當 AMP 在對應的核取方塊上觸發 change 事件時，我們會設定該目的。以下是其外觀

  <input
    id="consent-purpose-analytics"
    type="checkbox"
    on="change:consent1.setPurpose(purpose-marketing=event.checked)"
  >

若要儲存使用者的選擇，請使用 accept 動作。若要在不儲存選擇的情況下隱藏同意聲明 UI，請使用 dismiss 動作。您的使用者可能會針對某些同意聲明目的做出選擇，但並非所有目的皆做出選擇。您可以透過傳遞 accept 引數 (purposeConsentDefault={false|true})，來設定他們對剩餘同意聲明目的的選擇。

以下是這些按鈕在我們範例中的外觀

  <button class="choiceButton" on="tap:siteConsent.accept(purposeConsentDefault=false)">
    Save
  </button>
  <button class="choiceButton" on="tap:siteConsent.dismiss">
    Dismiss
  </button>

提示後 UI

最後，您可以建立一個區域，使用者可以使用該區域再次顯示同意聲明 UI。使用 prompt 動作來達成此目的。以下是其在此範例中的外觀

  <div id="repromptDialog">
    Do you want to make your consent choices again?
    <button on="tap:siteConsent.prompt">I do!</button>
  </div>

以下是我們的完整 <amp-consent> 元件。

<amp-consent layout="nodisplay" id="siteConsent">
  <script type="application/json">
    {
      "consentInstanceId": "consent1",
      "consentRequired": true,
      "promptUI": "consentPopup",
      "postPromptUI": "repromptDialog",
      "uiConfig": {
        "overlay": true
      },
      "purposeConsentRequired": ["purpose-analytics", "purpose-marketing"]
    }
  </script>
  <div id="consentPopup">
    <div id="consentDialog">
      <div class="dismissButton" role="button" tabindex="0" on="tap:siteConsent.dismiss">
        𝗫
      </div>
      <h3>Your privacy</h3>
      <p>
        You can control the ways in which we improve and personalize your
        experience. Please choose whether you wish to allow the following:
      </p>
      <div class="choices">
        <label class="consentLabel" for="consent-purpose-marketing">
          <input id="consent-purpose-marketing" type="checkbox" on="change:siteConsent.setPurpose(purpose-marketing=event.checked)">
          Marketing cookies
        </label>
        <label class="consentLabel" for="consent-purpose-conversion">
          <input id="consent-purpose-conversion" type="checkbox" on="change:siteConsent.setPurpose(purpose-conversion=event.checked)">
          Conversion tracking cookies
        </label>
        <label class="consentLabel" for="consent-purpose-analytics">
          <input id="consent-purpose-analytics" type="checkbox" on="change:siteConsent.setPurpose(purpose-analytics=event.checked)">
          Analytics
        </label>

        <button class="choiceButton" on="tap:siteConsent.accept(purposeConsentDefault=false)">
          Save
        </button>
        <button class="choiceButton" on="tap:siteConsent.dismiss">
          Dismiss
        </button>
      </div>
      <p>
        Click "Save" to save your choices.
        <br>
        Click "Dismiss" to get rid of this dialog box without saving your
        choices.
      </p>
    </div>
  </div>
  <div id="repromptDialog">
    Do you want to make your consent choices again?
    <button on="tap:siteConsent.prompt">I do!</button>
  </div>
</amp-consent>

封鎖元件

如果使用者尚未接受正確的同意聲明目的，您可以標記任何要封鎖的 AMP 元件。在 data-block-on-consent-purposes 屬性中以逗號分隔清單指定這些目的。

(在此查看您的同意聲明選擇的結果)

如果您允許行銷 Cookie，我會顯示。

如果您允許行銷和分析 Cookie，我會顯示。

如果您允許分析 Cookie，我會顯示。

<div id="consentDemoArea">
  <p class="note">(See the results of your consent choices here)</p>
  <amp-fit-text id="marketingContent" width="200" height="50" layout="fixed" data-block-on-consent-purposes="purpose-marketing">
    I'm shown if you allow marketing cookies.
  </amp-fit-text>
  <amp-fit-text id="conversionContent" width="200" height="50" layout="fixed" data-block-on-consent-purposes="purpose-marketing,purpose-analytics">
    I'm shown if you allow marketing AND analytics cookies.
  </amp-fit-text>
  <amp-fit-text id="analyticsContent" width="200" height="50" layout="fixed" data-block-on-consent-purposes="purpose-analytics">
    I'm shown if you allow analytics cookies.
  </amp-fit-text>
</div>

需要進一步說明嗎？

如果本頁的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，以討論您的確切使用案例。

前往 Stack Overflow

未說明的特性？

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

在 GitHub 上編輯範例

由 @morss 撰寫

精細的使用者同意聲明

簡介

設定

設定物件

同意聲明對話方塊

提示後 UI

您的隱私權

封鎖元件