Matomo: How to track Single Page Applications?

Created on 26 May 2015  路  9Comments  路  Source: matomo-org/matomo

As a User i want to be able to track my Single Page Application.
It uses a URL hash as "Page Identifier", like "xyz.com/#links", "xyz.com/#welcome" and so on.

Website matomo.org duplicate

Most helpful comment

We've just published the guide, check it out here: How to track single-page websites and web applications using Piwik Analytics

All 9 comments

Enable "Page URL fragments tracking" in Websites settings and manually trigger trackPageView after each site "refresh".

thanks

I am re-opening this issue, as there is a strong need for us to document the best practise around "Measuring Single Page Applications". Let's create a User Guide or at least FAQ with our set of best practises.

Maybe there is also potential to build a better tracking API, or build in piwik.js some useful features, to make tracking single page app better & easier.

For example last week Google released a new tool which helps users measure their single page app:

URL change tracking for single page applications
If you're building a single page application that dynamically loads content and updates the URL using the History API, the default tracking snippet will not suffice -- it only tracks the initial page load. Even if you're sending additional pageviews after successfully loading new content, there can still be complications.
Autotrack automatically detects URL changes made via the History API and tracks those as pageviews. It also keeps the tracker in sync with the updated URL so all subsequent hits (events, social interactions, etc.) are associated with the correct URL.

(this issue is about creating a FAQ. If we identify potential to also create a new feature in piwik.js we shall create a separate issue)

This issue is tracked in: https://github.com/piwik/developer-documentation/issues/90#issuecomment-239576388

If anyone has measured their single page app with Piwik, please let us know any tip or advice in the comments on https://github.com/piwik/developer-documentation/issues/90 - we'd like to write this guide in the future :+1:

We've just published the guide, check it out here: How to track single-page websites and web applications using Piwik Analytics

We've just published the guide, check it out here: How to track single-page websites and web applications using Piwik Analytics

The guide covers navigation through location hash changes but History API navigation is not mentioned at all. Is there a best practice recommendation for this case?

You can listen to window.onpopstate = function(event) {}; instead and make changes depending on your application. It's otherwise pretty much the same.

Was this page helpful?
0 / 5 - 0 ratings