如何在 AMP 网站中添加监控脚本？答案

【问题标题】：How to add a monitoring script in an AMP website?如何在 AMP 网站中添加监控脚本？
【发布时间】：2020-12-18 01:04:03
【问题描述】：

我已经尝试解决这个问题大约一个月了。

我用 AMP 代码（没有 WordPress）开发了整个网站。

而且我需要在网站上包含一个监控脚本，以便与 RD Station（分析潜在客户数据的营销平台）集成。

这是监控脚本：

&lt;script type="text/javascript" async src="https://d335luupugsy2.cloudfront.net/js/loader-scripts/XXXXXX-XXXX-XXXXX-XXXXXXXXXX-loader.js" &gt;&lt;/script&gt;

如果我只是将脚本放在页面上，集成将起作用，但 AMP 将不会得到验证，所以它不是一个选项。

所以，我尝试使用 AMP Iframe 和 AMP Script 来放置监控脚本。但我没有成功。

我将在上面展示我是如何尝试使用它们的：

首先，我尝试将脚本放入 AMP Iframe 中。但它不起作用，AMP 未经过验证（不允许使用自定义 JavaScript）。

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

<amp-iframe 
        width="200" 
        height="200"
        sandbox="allow-scripts allow-same-origin"
        layout="responsive"
        frameborder="0"
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d230483.1797142007!2d-49.429883892450135!3d-25.495050065392732!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94dce35351cdb3dd%3A0x6d2f6ba5bacbe809!2sCuritiba%2C%20PR!5e0!3m2!1spt-BR!2sbr!4v1605306200439!5m2!1spt-BR!2sbr">
    
        <script type="text/javascript" async src="https://d335luupugsy2.cloudfront.net/js/loader-scripts/XXXXXX-XXXX-XXXXX-XXXXXXXXXX-loader.js"></script>
    
   </amp-iframe>

然后我尝试使用 AMP 脚本。 AMP 已通过验证，但监控脚本无法正常工作。

  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
    <meta name="amp-script-src" content="sha384-OuN5AY4PdspoRf-q4DCxQvMVtBnT8yCs45AH1_0J1r5-u-VvxNTHvVEewVxeaefDd">
    
    <amp-script width="200" height="100" src="https://d335luupugsy2.cloudfront.net/js/loader-scripts/XXXXXX-XXXX-XXXXX-XXXXXXXXXX-loader.js">
    </amp-script>

最后一次使用 AMP SCRIPT 的尝试给了我错误：

log.js:258 [amp-script] Uncaught TypeError: Cannot read property 'appendChild' of undefined 在 (amp-script%5Bsrc=%22https://d335luupugsy2.cloudfront.net/js/loader-scripts/XXXXXX-XXXX-XXXXX-XXXXXXXXXX-loader.js%22%5D.js:3)

有人可以帮我解决这个问题吗？我真的需要让那个脚本在我的 AMP 页面上运行。非常感谢！

【问题讨论】：

我认为您将不得不要求 AMP 支持您的分析风格。自定义 JS 和 iframe 技术将不起作用，因为 - 实际上 - 您需要 XHR 信息。当被要求支持新的分析供应商时，AMP 团队通常会做出响应。建议您在github.com/ampproject/amphtml/issues 上打开一个问题

标签： amp-html ampscript amp-iframe

【解决方案1】：

同意 Jay 的回答并补充：<amp-script> 在 Web Worker 中使用虚拟 DOM 运行代码。不支持整个 DOM API 和 Web API，因此任何重要的库存 JavaScript 都需要修改才能在这种情况下工作。让第三方脚本在那里工作的几率极低。

我认为这里最好的方法就是将供应商的 JavaScript 添加到您的页面中。它将不再是有效的 AMP，这意味着您的页面不会进入 AMP 缓存。因此，您将失去速度优势，第三方脚本无疑会对您的性能造成影响。但这是一个完全有效的方法！只要您的大部分页面都坚持使用 AMP 方式，那么它快速稳定并通过 Core Web Vitals 的机会就很大。

【讨论】：

谢谢本！我按照你那天的建议做了。我忘了在 Stack Overflow 上更新我的问题。该网站仍然很快，我的团队对这种方法感到满意。
太好了！我只是想我会把答案放在这里，以便其他人也能发现它。我认为人们并不总是考虑使用无效 AMP 的可能性。