示例：高级用户同意流程 - 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 端点，该端点将通过 POST 请求进行检查。响应应如下所示

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

响应将指示是否会显示在 promptUI 中给定的 ID 的元素。 amp-consent 将首先检查本地存储中是否已存在同意决定，如果存在则使用它。否则，如果已配置且 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 编写

高级用户同意流程

简介

设置

基本用法

标题