AMP网站如何添加监控脚本？

Question

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

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

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

这是监控脚本：

<script type="text/javascript" async src="https://d335luupugsy2.cloudfront.net/js/loader-scripts/XXXXXX-XXXX-XXXXX-XXXXXXXXXX-loader.js" ></script>

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

因此，我尝试使用 AMP Iframe 和 AMP 脚本放置监控脚本。但是我没有成功。

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

首先，我尝试将脚本放入 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] 未捕获类型错误：无法读取未定义的属性 'appendChild' 在 (amp-script%5Bsrc=%22https://d335luupugsy2.cloudfront.net/js/loader-scripts/XXXXXX-XXXX-XXXXX-XXXXXXXXXX-loader.js%22%5D.js:3)

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

Answer 1

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

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

AMP网站如何添加监控脚本？

How to add a monitoring script in an AMP website?

amp-html

ampscript

amp-iframe