MS Clarity是否可以集成到AMP页面？具体如何操作？

AMP框架禁止直接注入自定义第三方JS，因此必须通过AMP官方原生支持的amp-analytics扩展实现MS Clarity集成，该方案完全符合AMP规范，不会触发校验错误。

前置准备 #

提前从MS Clarity后台获取你的项目唯一ID，格式为短字符串，例：ab12c34def。

实现步骤 #

步骤1：引入amp-analytics扩展 #

在AMP页面的<head>标签内添加以下扩展引用：

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

步骤2：添加Clarity跟踪配置 #

在页面<body>标签内任意位置添加以下配置，将<YOUR_CLARITY_PROJECT_ID>替换为你自己的项目ID：

<amp-analytics type="microsoftclarity">
  <script type="application/json">
  {
    "vars": {
      "projectId": "<YOUR_CLARITY_PROJECT_ID>"
    }
  }
  </script>
</amp-analytics>

验证与注意事项 #

• 部署后先用AMP校验工具检查页面，确保没有配置类错误
• 配置完成后需要等待15~30分钟，即可在Clarity后台看到流入的站点数据
• Clarity的热力图、会话录制等核心功能均可正常使用，无需额外配置
• 严禁直接插入Clarity官方提供的普通站点JS跟踪代码，会直接导致AMP校验失败，页面无法进入AMP缓存

内容的提问来源于stack exchange，提问作者Sanjay Varma