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

Question

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

我有整个网站在AMP代码开发(没有WordPress)。

我需要在网站上包括一个监测脚本，以有一个与RD站(一个分析领先数据的营销平台)的集成。

以下是监控脚本：

​

<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脚本的最后一次尝试给出了错误：

log.js:258 amp-script未捕获的TypeError:无法读取未定义的属性'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和Web都不受支持，因此任何重要的常用JavaScript主体都需要进行修改才能在此上下文中工作。让第三方脚本在那里工作的可能性非常低。

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