如何在 AMP 网站中集成 Matomo 标签管理器？答案

【问题标题】：How to integrate Matomo Tag Manager in an AMP Website?如何在 AMP 网站中集成 Matomo 标签管理器？
【发布时间】：2019-09-09 22:23:17
【问题描述】：

当我将 Matomo 跟踪代码管理器作为常规 JavaScript 代码实施时，AMP 限制了导致 AMP 错误的自定义 JavaScript。

如何以符合 AMP 标准的方式集成 Matomo 跟踪代码管理器？

我已经尝试调整默认的 Matomo 跟踪代码管理器脚本以匹配 AMP 指南，但它不起作用（脚本未加载）。

默认脚本如下所示：

<!-- Matomo Tag Manager -->
<script type="text/javascript">
var _mtm = _mtm || [];
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src='https://mypage.com/js/container_abc.js'; s.parentNode.insertBefore(g,s);
</script>
<!-- End Matomo Tag Manager -->

我试图调整它的方式是这样的：

<!-- Matomo Tag Manager -->
<amp-script layout="container" src='https://mypage.com/js/container_abc.js'>
var _mtm = _mtm || [];
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
</amp-script>
<!-- End Matomo Tag Manager -->

我预计 AMP 错误会得到解决，并且 Matomo 跟踪代码管理器会被加载。

实际结果显示脚本没有加载（没有网络请求）。

【问题讨论】：

标签： javascript amp-html matomo

【解决方案1】：

我认为问题在于amp-script 您需要用户手动初始化您的代码——通过单击按钮或任何其他操作。由于这是一个跟踪脚本，我认为没有办法做到这一点。

来自文档：

Web Worker 中的 JavaScript 允许在加载时对 DOM 进行最小的更改。在此阶段允许的更改是：

注册事件处理程序。

将一个 TextNode 拆分为多个 TextNode，以允许需要它的框架。

【讨论】：

【解决方案2】：

您能在浏览器控制台中看到错误吗？

我对 AMP 知之甚少，但文档列出了很多限制：放大器开发 https://amp.dev/documentation/components/amp-script/

文档：允许运行自定义 JavaScript 来呈现 UI。

例如，如果它是一个跨域请求（matomo 在另一个域上），那么您需要使用脚本的哈希添加一个 meta[name=“amp-script-src”]（暗示您不是允许在将脚本添加到站点后修改标签管理器中的任何内容。

毕竟 AMP 的重点似乎是不允许“正常”的 JavaScript 执行（一切都在 web-worker 中运行，这可能再次以多种方式破坏 Matomo 跟踪代码管理器）。

还要记住 150KB 的限制。

【讨论】：