示例：细粒度用户同意 - 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 操作。您的用户可能会为某些同意目的做出选择，但并非所有目的都做出选择。您可以通过将参数 (purposeConsentDefault={false|true}) 传递给 accept 来设置其对剩余同意目的的选择。

以下是这些按钮在我们的示例中的外观

  <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

您的隐私

阻止组件