示例：粒度用户同意 - 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({purpose type}={boolean value})。

例如，在这里，如果用户单击我们的营销 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

您的隐私

阻止组件