使用Barba.js的无刷新网站如何正确实现Matomo Analytics？

1. 别重复加载Matomo脚本，手动触发页面追踪 #

把Matomo留在head里就行，没必要每次导航都在body里加载重复脚本——重复加载反而容易引发跟踪器实例冲突、重复上报的问题。

Barba.js提供了页面切换的生命周期钩子，你可以在每次页面切换完成后，手动调用Matomo的页面追踪方法，同时传入当前页面的URL和标题，这样单页切换的页面访问会和首次加载的数据合并到同一统计维度：

// 初始化Barba时绑定切换完成钩子
barba.init({
  transitions: [{
    async after(data) {
      // 获取当前页面的实际URL和标题
      const currentUrl = window.location.href;
      const currentTitle = document.title;
      
      // 调用Matomo的页面追踪逻辑
      _paq.push(['setCustomUrl', currentUrl]);
      _paq.push(['setDocumentTitle', currentTitle]);
      _paq.push(['trackPageView']);
      
      // 如果新页面有需要追踪的链接，重新启用链接追踪
      _paq.push(['enableLinkTracking']);
    }
  }]
});

这种方式下，所有页面访问（包括首次加载和Barba切换的页面）都会统一作为「页面浏览」数据统计，不会出现数据分离的情况。

2. 放弃用Events追踪导航的思路 #

用Events追踪导航确实会把页面浏览和事件数据拆成两组，导致分析时难以统一维度。上面的手动触发页面追踪方案，已经能让Barba切换的页面数据和普通页面加载的数据完全对齐，直接用这个方案就可以解决数据不一致的问题。

额外注意：

• 确保_paq全局变量在head的Matomo脚本初始化后能正常访问，否则钩子内的调用会失效。
• 如果页面切换有过渡动画，建议等动画完全结束后再调用trackPageView，避免统计时机过早。

内容的提问来源于stack exchange，提问作者Sebe