Allow multiple trackpageview on SPA

Hi,

I am not sure what category to put this in, since it is an issue I have. Maybe it should be put in feature suggestions instead.

I am working on a single page application, and I want to track the time spent in the different parts of the page. In other words, I would like to send a new pageview to Piwik, every time the fragments in the URL change.

For the moment I keep track of the fragment changes, using window.onhashchange and it works, but when I try to send a new trackPageView request to Piwik nothing happens (is registered).

My problem is similar to the one described in this post (https://forum.matomo.org/t/how-to-force-a-second-trackpageview/4670 ), but back then it was resolved using synchronous tracking instead of asynchronous tracking. If my understanding is correct, that is no longer possible since synchronous tracking was deprecated (Remove possibility to send synchronous ajax requests · Issue #8246 · matomo-org/piwik · GitHub)

With GA it is possible to use something called Autotrack, to track the fragment changes and send a new pageview.
Is there anyway of sending multiple pageviews from one page and have them registered in Piwik?

Thanks,
Benjamin

Just to add some more:
The Keep Page URL is turned on and the tracking works on the first page load.

Here is the code:

//Called only on page load
var _paq = _paq || [];
_paq.push([“setDomains”, ["*.localhost"]]);
_paq.push([‘setCustomURL’, 'fragmentIdentifier]);
_paq.push([‘trackPageView’]);
_paq.push([‘enableLinkTracking’]);
(function() {
var u="//localhost:21152/";
_paq.push([‘setTrackerUrl’, u+‘piwik.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+‘piwik.js’; s.parentNode.insertBefore(g,s);
})();

if (“onhashchange” in window) {
console.log(“PageLoad”);
}

//called every time fragment/hash is changed
function locationHashChanged() {
console.log(“fragment changed”);
var _paq = _paq || [];
_paq.push([“setDomains”, ["*.localhost"]]);
_paq.push([‘setCustomURL’, 'fragmentIdentifier]);
_paq.push([‘trackPageView’]);
_paq.push([‘enableLinkTracking’]);
(function() {
var u="//localhost:21152/";
_paq.push([‘setTrackerUrl’, u+‘piwik.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+‘piwik.js’; s.parentNode.insertBefore(g,s);
})();
}

window.onhashchange = locationHashChanged;’;

I was able to fix my problems, but I don’t know how to close or delete this post.

I tried a lot of different things, and I am not sure what made the impact, but for some reason things are working now

Benval can you describe some of the changes you made to your router javascript to get hash URL changes to track. when I reload my page the page view is counted by piwik. however when I click there is no data updated or sent to piwik.

any thoughts?

A team member came across this plugin and it solved our problem tracking angular2 routed URLs - angular2piwik. credit - awronka

Hi,

I am sorry for late reply, but I didn’t see a notification in my email
before now.

Since it was a project I worked on during the summer, I do not have access
to the code anymore. If I remember correctly I might have used something
like cache to store the desired hash fragments. It is also possible that I
am mixing up two different problems I had, and that this is way of, in that
case I am sorry.