如何基于地理位置在AMP中实现元素的条件渲染

以下两种方案可以实现你要的地区判断渲染逻辑： #

方案1：CSS类控制（页面加载即生效，推荐） #

这是amp-geo原生支持的无交互触发方案，无需引入额外组件：

• 第一步：引入amp-geo组件

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

• 第二步：配置地区分组
  在页面中加入amp-geo配置，定义你需要匹配的地区分组：

  <amp-geo layout="nodisplay">
    <script type="application/json">
    {
      "ISOCountryGroups": {
        "au": ["AU"]
      }
    }
    </script>
  </amp-geo>
  

  配置生效后，当用户IP所属国家为澳大利亚时，页面根<html>标签会自动添加amp-geo-group-au类名，非澳大利亚用户则不会添加该类。
• 第三步：编写显隐控制CSS

  /* 澳大利亚专属内容默认隐藏，匹配地区后显示 */
  .au-content {
    display: none;
  }
  .amp-geo-group-au .au-content {
    display: block;
  }
  /* 非澳大利亚内容默认显示，匹配地区后隐藏 */
  .default-content {
    display: block;
  }
  .amp-geo-group-au .default-content {
    display: none;
  }
  

• 第四步：页面中插入对应元素

  <div class="au-content">澳大利亚用户专属内容</div>
  <div class="default-content">其他地区用户可见内容</div>
  

方案2：结合amp-bind实现动态判断 #

如果需要在交互逻辑中调用地区判断，可以用amp-bind绑定状态：

• 额外引入amp-bind组件

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

• 直接在元素上绑定显隐属性：

  <div [hidden]="AMP_GEO != 'AU'">澳大利亚用户专属内容</div>
  <div [hidden]="AMP_GEO == 'AU'">其他地区用户可见内容</div>
  

注意：该方案仅在页面有用户交互后才会触发渲染，首屏加载默认不会生效，仅适合非首屏的交互相关渲染场景。

内容的提问来源于stack exchange，提问作者Anoop Lath