📅 最后修改于: 2023-12-03 15:09:06.204000 🧑 作者: Mango
在现代 web 应用程序中，SPA（单页应用程序）已经是非常流行的设计模式。由于 SPA 的特殊性，传统的网页分析工具往往不能很好地与之集成。本文将介绍如何将 Matomo（以前称为 Piwik）与 SPA 集成，以便跟踪、分析 SPA 网站的流量数据。
在开始之前，您需要确保已经安装了 Matomo 实例，并知道 Matomo 的站点 ID 和跟踪代码。如果您还没有安装 Matomo，请先按照官方文档安装。此外，您还需要了解 SPA 的基本原理和路由方式。
Matomo 提供了一个 JavaScript 跟踪器，可以通过 JavaScript API 访问和使用。要在 SPA 中使用 Matomo，您需要使用该跟踪器来发送数据。
在 SPA 的 index.html 中，您需要将 Matomo JavaScript 跟踪器的代码添加到 <head> 标签中：
<head>
<script type="text/javascript">
var _paq = window._paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//example.com/matomo/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
</head>
在这个示例中，我们假设 Matomo 实例的 URL 是 example.com/matomo/，站点 ID 是 1。您需要将这些值替换为自己的值。
在 SPA 应用程序中，您需要使用 JavaScript 跟踪器来发送数据。以下是一些示例代码：
// 首次加载页面时调用
_paq.push(['trackPageView']);
// 在路由变化时调用
router.afterEach((to, from) => {
_paq.push(['setCustomUrl', to.fullPath]);
_paq.push(['trackPageView']);
});
这些代码的作用如下：
trackPageView：发送页面浏览数据。enableLinkTracking：启用链接点击跟踪。setTrackerUrl：设置 Matomo 实例的 URL。setSiteId：设置站点 ID。setCustomUrl：设置自定义网址，这对于 SPA 来说非常重要。router：Vue.js 中用于路由控制的对象。如果您使用其他框架或库，请使用相应的对象。完成配置后，您可以在 Matomo 中查看分析数据。转到 Matomo 管理界面，选择您要分析的站点，然后切换到“实时”或“访问者日志”选项卡。现在，您应该看到来自 SPA 的流量数据了。
本文介绍了在 SPA 中集成 Matomo 的步骤。要实现这一目标，您需要使用 Matomo JavaScript 跟踪器，并设置自定义网址。这些操作可以确保 Matomo 正确分析您的 SPA 流量数据。