2

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

我用 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 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：无法读取未定义的属性“appendChild”（amp-script%5Bsrc=%22https://d335luupugsy2.cloudfront.net/js/loader-scripts/XXXXXX-XXXX- XXXXXX-XXXXXXXXXX-loader.js%22%5D.js:3)

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

4

1 回答 1

0

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

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

于 2020-12-17T17:04:03.763 回答