如何让AMP Analytics仅在生产域名运行，排除开发访问统计？

解决AMP页面中amp-analytics仅在生产域名运行的方案 #

这个问题太常见了——开发环境的测试流量混进Google Analytics数据里，确实会把真实用户的访问数据搅得一团糟。我给你几个实用的方案，都能完美解决AMP页面里的这个问题：

方案1：用<amp-if>条件渲染analytics组件 #

AMP原生支持<amp-if>组件，可以根据当前域名判断是否加载amp-analytics。这样开发环境下组件根本不会被渲染，自然不会发送任何统计请求。

示例代码：

<!-- 仅在生产域名加载amp-analytics -->
<amp-if expr="window.location.hostname == 'your-production-domain.com'">
  <amp-analytics type="googleanalytics">
    <script type="application/json">
      {
        "vars": {
          "account": "UA-XXXXXXXXX-X"
        },
        "triggers": {
          "trackPageview": {
            "on": "visible",
            "request": "pageview"
          }
        }
      }
    </script>
  </amp-analytics>
</amp-if>

如果有多个生产域名，可以用逻辑或扩展判断条件：

<amp-if expr="window.location.hostname == 'prod1.com' || window.location.hostname == 'prod2.com'">
  <!-- 你的analytics代码 -->
</amp-if>

方案2：在触发器中添加域名判断条件 #

如果不想完全移除组件（比如需要保持组件结构一致性），可以在amp-analytics的触发器里添加条件，只有当域名匹配生产环境时才发送统计请求。

示例代码：

<amp-analytics type="googleanalytics">
  <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXXXXXX-X"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview",
          <!-- 仅在生产域名触发页面统计 -->
          "expr": "window.location.hostname == 'your-production-domain.com'"
        }
      }
    }
  </script>
</amp-analytics>

这种方式下组件会被加载，但不会向GA发送任何数据，直到满足域名条件。

方案3：构建阶段动态注入（推荐给有构建流程的项目） #

如果你的项目用了Webpack、Vite或者静态站点生成器（比如Gatsby、Next.js的AMP模式），可以在构建时根据环境变量决定是否注入amp-analytics代码。

比如在模板文件里做这样的判断（以Handlebars模板为例）：

{{#if isProduction}}
  <amp-analytics type="googleanalytics">
    <!-- 你的GA配置 -->
  </amp-analytics>
{{/if}}

构建生产版本时设置isProduction为true，开发版本则为false，这样开发环境的代码里根本不会包含统计组件。

额外提示：GTM AMP容器的处理 #

如果是用Google Tag Manager管理AMP的统计标签，你可以直接在GTM的触发器里设置“域名匹配”条件，只允许生产域名触发标签，完全不用修改AMP页面代码。

内容的提问来源于stack exchange，提问作者Sandeep C