示例：基于地理位置的同意流程 - amp.dev

基于地理位置的同意流程
- 简介设置设置 amp-geo 定义同意流程测试

网站

简介

有时需要仅向特定国家或地区的用户请求同意。此示例演示了如何将 amp-consent 与 amp-geo 结合使用来实现此目的。在此示例中，我们将构建一个同意对话框，该对话框将向美国加利福尼亚州的用户显示，另一个同意对话框将向欧洲经济区（一个预定义的国家/地区组）的用户显示。

设置

我们需要导入 amp-consent ...

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

... 和 amp-geo 扩展。

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

设置 amp-geo

首先，我们需要设置 amp-geo 扩展。我们将使用表示美国的 ISO 代码 us、preset-eea 和 unknown

<amp-geo layout="nodisplay">
  <script type="application/json">
    {
      "ISOCountryGroups": {
        "eea": [ "preset-eea", "unknown" ],
        "usca": [ "preset-us-ca" ]
      }
    }
  </script>
</amp-geo>

该流程应依赖 amp-geo 来确定根据用户位置显示哪个配置，因此我们设置标志：geoOverride。

如果 amp-geo 发现用户位于美国加利福尼亚州组中，则相应配置的内容将覆盖顶级同意配置（欧洲经济区也是如此）。

我们针对欧洲经济区（和未知）用户的最终配置如下所示

{
  "consentInstanceId": "world-wide-consent",
  "consentRequired": true,
  "promptUI": "eea-consent-ui",
  "postPromptUI": "post-consent-ui"
}

由于 consentRequired 为 true 并且配置了 promptUI，因此如果未找到本地存储决策，amp-consent 将显示提示。

我们针对美国加利福尼亚州用户的最终配置如下所示

{
  "consentInstanceId": "world-wide-consent",
  "consentRequired": true,
  "promptUI": "usca-consent-ui",
  "postPromptUI": "post-consent-ui"
}

而我们针对既不属于这些地理组的用户所做的最终配置将是

{
  "consentInstanceId": "world-wide-consent",
  "consentRequired": false,
  "postPromptUI": "post-consent-ui"
}

如果存在，将使用本地存储决策；否则，由于 consentRequired 为 false，amp-consent 将不执行任何操作。

<amp-consent id="myUserConsent" layout="nodisplay">
    <script type="application/json">{
      "consentInstanceId": "world-wide-consent",
      "consentRequired": false,
      "geoOverride": {
        "eea": {
          "promptUI": "eea-consent-ui",
          "consentRequired": true
        },
        "usca": {
          "consentRequired": true,
          "promptUI": "usca-consent-ui"
        }
      },
      "postPromptUI": "post-consent-ui"
    }</script>
    <div id="eea-consent-ui" class="popupOverlay">
      <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 if you're based in the EEA.</p>
        <button on="tap:myUserConsent.accept">Accept</button>
        <button on="tap:myUserConsent.reject">Reject</button>
      </div>
    </div>
    <div id="usca-consent-ui" class="popupOverlay">
        <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 if you're based in the U.S. California.</p>
          <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>