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

Question

当我将 Matomo 标签管理器作为常规 JavaScript 标签实施时，AMP 限制自定义 JavaScript 导致 AMP 错误。

如何以符合 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 标签管理器。

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

Answer 1

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

从文档：

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

注册事件处理程序。

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

Answer 2

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

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

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

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

毕竟 AMP 的重点似乎是不允许“正常”的 JavaScript 执行（一切都在网络工作者中运行，这可能会再次以多种方式破坏 Matomo 标签管理器）。

还要记住 150KB 的限制。

Answer 3

Matomo 提供 javascript 和像素跟踪。 由于 AMP 格式对 javascript 有很多限制，我们在 AMP 网站的 amp-img 标签中使用像素跟踪。

<amp-img referrerpolicy="no-referrer-when-downgrade" src="https://sub.domain.ext/matomo.php?idsite=X&amp;rec=1" style="border:0" alt="" width="1" height="1" ></amp-img>

sub.domain.ext 是您的 Matomo 域，X 是您正在跟踪的网站的 ID。