Ajax / Single-Page-App setup: Wrong page titles (last page) being reported

Support & Bugs
1

I am using Matomo on a website which fetches content via AJAX in order to have smooth page transitions. In my fetch(); function I have a callback that executes all necessary Javascript functions that are relevant for each page after the page has loaded and the DOM has been updated.

According to the Matomo documentation on Single-Page Applications I am including the following in my callback:

// Count page view in Matomo Analytics:
console.log(title);
_paq.push(['deleteCustomVariables', 'page']);
_paq.push(['trackPageView']);
_paq.push(['setCustomUrl', linkurl]);
_paq.push(['setDocumentTitle', title]);
_paq.push(['enableLinkTracking']);

As you can see I am logging the title for testing purposes right now to make sure it is the appropriate page title before I hand it to Matomo’s _paq.push(['setDocumentTitle', title]);.
Watching the browser’s console in the live system I can see that the correct page title is in the title variable.
However, if I watch the visit from the Matomo dashboard, the name of the page that is clicked, which appears on the little folder icon is always the title of the page visited before.

In other words:

  1. Navigating to mywebsite.com/homepage I can see a new user session in the Matomo dashboard with the first folder icon “Homepage” as an action.
  2. Clicking on e.g. “About Us” on the website navigation I have the browser console logging “About Us” as expected from my Javascript and the website smoothly transitions to the About page.
  3. However, in the Matomo dashboard I now have a second action and folder icon which is not “About Us” but still “Homepage”.
  4. Clicking on e.g. “Blog” on the website navigation works as described and expected above.
  5. Now, however, the new action in the user session is “About Us”.
  6. And so on …

So the problem seems to be that there is always a “delay” of one page title, despite my Javascript code pushing the right page title into the title variable.

With the current behaviour I would never get the last page being visited/called by the visitor.

I would totally get the problem if I was pushing the old/prior page’s title in the variable, but it is the new, requested one, so I can not understand why this string is not taken by Matomo and displayed in the action? Why is it showing the previous page (which always causes the first two folders beeing a double of course)?

P.S.: Logging the linkurl variable also shows that it is the correct URL, the one being requested when the link is clicked by the user, I also tried wrapping the _paq. pushes into a long setTimeOut function with 2 seconds. Same results.

2

Hi @Sten85
As you track the page view before the page title update, the page title sent with the pageview event use the one of the previous value…
Please do:

_paq.push(['setCustomUrl', linkurl]);
_paq.push(['setDocumentTitle', title]);
_paq.push(['trackPageView']);
1 Like
3

Thank you so much, Philippe!
What an obvious thing; I was not seeing the wood for the trees.
Now it works (of course).
Best regards!

1 Like