2024年如何在AMP页面中无错误集成Microsoft Clarity？

我之前碰到过完全一样的问题——直接粘贴常规Clarity JS脚本会触发AMP验证错误，导致页面无法走Google AMP缓存。下面是经过验证的可行方案：

核心思路 #

AMP严格限制自定义JS的加载方式，不能直接使用常规的<script>标签。必须通过AMP官方提供的<amp-script>组件来加载第三方脚本，同时满足AMP的安全规范。

具体步骤 #

1. 移除原有错误脚本：把之前粘贴的常规Clarity内联/外部脚本全部删除
2. 引入AMP脚本组件：在页面的<head>区域添加<amp-script>的组件依赖：

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

3. 用AMP兼容方式加载Clarity：在<body>的末尾添加以下代码，替换YOUR_CLARITY_PROJECT_ID为你自己的Clarity项目ID：

   <amp-script layout="nodisplay" src="https://www.clarity.ms/tag/YOUR_CLARITY_PROJECT_ID"></amp-script>
   

关键注意事项 #

• layout="nodisplay"是必须的，因为Clarity脚本不需要渲染任何可见元素
• 确认你的Clarity项目ID正确，否则数据无法正常上报
• 部署后用AMP验证工具（比如Google Search Console的AMP测试功能）检查，确保没有新的错误
• 该方案不会影响Clarity的核心功能（会话录制、热图、用户行为分析），同时完全符合AMP规范，页面可以正常通过Google AMP缓存分发

内容的提问来源于stack exchange，提问作者Pascal P.