如何在 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。