logo头像

保持一颗好奇心

Matomo JavaScript 方式追踪单页面应用(SPA)

单页面应用(SPA)随着VueAngularReact等框架的崛起,已经成为一种潮流。由于单页面应用自始至终都一个在同一个Docment上渲染元素,页面根本不跳转,这也让 Matomo 在默认用法下不能自动追踪。
最近在企业内网用 Matomo 做网站跟踪分析,有一个需求是跟踪手机端的应用(SPA应用)。研究了一番记录如下。

用JS方式追踪单页面应用,其原理就是当页面变动的时候,手动调用 Matomo 本来应该在页面加载时自动帮我们调用的几个API。

重新设置自定义变量

用下面的代码将 page 作用域的 自定义变量删除:

1
_paq.push(['deleteCustomVariables', 'page']);

自定义变量有 page 作用域和 visit 作用域之分。page 作用域内的变量描述的是当前页面本身的属性,在每次页面请求的时候都可以变化,比如“文章分类”、“商品名称”之类的;visit 作用域内的变量在一个完整的session中只允许有一个值,这种作用域的变量适合存“访问者性别”,“访问者身份证号”等跟访问者有关的属性。关于自定义变量就说这么多,更多的信息可以先查看官方文档,我会尽快出一篇关于 Matomo [自定义变量]
和 自定义维度 的一篇文章。

设置页面加载时间

你可能会用 Ajax 从服务器实时加载新模块,那你得做一个计时,并且把加载这个模块的耗时(毫秒数)通过下面这个 API 发送给 Matomo 。

1
_paq.push(['setGenerationTimeMs', timeItTookToLoadPage]);

设置引用页(Referer)

告诉 Matomo 现在这个页面是从哪个页面跳过来的。

1
_paq.push(['setReferrerUrl', previousPageUrl]);

重要提示:

1
2
3
_paq.push(['deleteCustomVariables', 'page']);
_paq.push(['setGenerationTimeMs', timeItTookToLoadPage]);
_paq.push(['setReferrerUrl', previousPageUrl]);

上面的代码执行后需要执行_paq.push(['trackPageView']);才能提交修改。具体的可以看文末的例子

追踪新内容

当新的内容被加载到 Document 中,新内容这一块我们得让 Matomo 扫描。下面的一些代码不是必须的,根据你的需求来定。

如果新内容中有音视频,并且你用到了 Matomo 的音视频分析

1
_paq.push(['MediaAnalytics::scanForMedia', documentOrElement]);

如果新内容中有表单,并且你用到了 Matomo 的表单分析

1
_paq.push(['FormAnalytics::scanForForms', documentOrElement]);

如果新内容中有超链接,并且你用到了 Matomo 的离站链接分析、下载分析

1
_paq.push(['enableLinkTracking']);

如果你用到了 Matomo 的内容追踪

1
_paq.push(['trackContentImpressionsWithinNode', documentOrElement]);


如果你不想做那么多判断,你可以像下面的例子一样,一股脑全部调用一下,毕竟这也耗不了多少性能。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var currentUrl = location.href;
window.addEventListener('hashchange', function() {
_paq.push(['setReferrerUrl', currentUrl]);
currentUrl = '' + window.location.hash.substr(1);
_paq.push(['setCustomUrl', currentUrl]);
_paq.push(['setDocumentTitle', 'My New Title']);

// remove all previously assigned custom variables, requires Matomo (formerly Piwik) 3.0.2
_paq.push(['deleteCustomVariables', 'page']);
_paq.push(['setGenerationTimeMs', 0]);
_paq.push(['trackPageView']);

// make Matomo aware of newly added content
var content = document.getElementById('content');
_paq.push(['MediaAnalytics::scanForMedia', content]);
_paq.push(['FormAnalytics::scanForForms', content]);
_paq.push(['trackContentImpressionsWithinNode', content]);
_paq.push(['enableLinkTracking']);
});
支付宝打赏 微信打赏

赞赏是不耍流氓的鼓励