示例：客户端用户同意流程 - amp.dev

客户端用户同意流程
- 简介设置基本用法

网站

简介

如今，用户希望对其在线体验拥有更多控制权。此外，发布商在如何向用户提供通知和选择方面面临着各种不同的要求 - 从供应商政策到不断变化的法律要求。开源 AMP 项目正在努力为发布商和技术供应商提供工具，以实施他们首选的用户控件，并支持他们在 AMP 页面上各种不同的个人合规性要求。

此页面演示了如何构建基本的阻止同意流程，该流程只会显示一个带有接受和拒绝按钮的简单阻止弹出窗口。拒绝后，页面中的某些内容将被阻止。

同意信息会保存到本地存储中 - 接受/拒绝一次后，只有在删除此主机的本地存储内容后（例如通过 Chrome Dev Tools），您才会再次看到弹出对话框。

设置

在页眉中导入 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 端点。然后，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-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 上编辑示例

客户端用户同意流程

简介

设置

基本用法

标题