Search…

X3 Photo Gallery Support Forums

Search…
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Matomo integration

21 Feb 2023, 09:42

I am currently looking into using matomo. I found this old thread regarding matomo and X3 viewtopic.php?f=14&t=9813

Is the information there still relevant? I had a look at the matomo SPA guide you linked and there it says:
If you're using a popular framework such as Angular, Angular JS, Vue.js, React Native, etc. then we recommend to first check if an integration may be available for your framework
Does X3 use any of these frameworks? https://matomo.org/integrate/#programmi ... frameworks
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Matomo integration

21 Feb 2023, 11:23

As Google Analytics works in modern days, is that it automatically tracks events on History.pushState() ... which basically means it tracks events when the URL changes (visitor navigates in X3). This means you can just drop Google Analytics Javascript code into X3, and it just works without any specific implementation in X3. I would have thought that Matomo could do the same, or at least it should be able to.

But even if it doesn't, X3 has built-in function x3_load_page(), which allows you to trigger custom code on page navigation. In this case, you would simply trigger the Matomo tracking event, as noted in snippets in this link:
https://developer.matomo.org/guides/spa-tracking

Something like this in Settings > Custom > Custom Javascript
Code
function x3_load_page(){
  _paq.push(['setCustomUrl', window.location.pathname]);
  _paq.push(['setDocumentTitle', document.title]);
  _paq.push(['trackPageView']);
}
metallissimus wrote: I had a look at the matomo SPA guide you linked and there it says:
If you're using a popular framework such as Angular, Angular JS, Vue.js, React Native, etc. then we recommend to first check if an integration may be available for your framework
Does X3 use any of these frameworks? https://matomo.org/integrate/#programmi ... frameworks
This is just pre-made implementations which basically does the same as the code above, and/or might have some options for each specific CMS control panel.
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Matomo integration

22 Feb 2023, 10:51

Thank you, it's working perfectly.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Matomo integration

24 Feb 2023, 03:41

"Perfectly" was a somewhat rushed statement, I have a small problem. The titles don't match the URLs (except for the entry page).
Bildschirmfoto 2023-02-24 um 09.27.57.png
Visitor log
Bildschirmfoto 2023-02-24 um 09.27.57.png (116.84 KiB) Viewed 9193 times
Is this X3 related?

Also I noticed the entry page always gets reloaded (or Matomo counts it as reloaded). Why is that?
Edit: Looked at the console, Matomo does indeed get two "messages" (I don't know the right term)
Bildschirmfoto 2023-02-24 um 10.25.58.png
Bildschirmfoto 2023-02-24 um 10.25.58.png (522.24 KiB) Viewed 9188 times
Edit 2: I made some more steps (went to "Portfolio" and "Über") and you can clearly see in the log that the previous title gets submitted to Matomo:
Bildschirmfoto 2023-02-24 um 10.35.00.png
Bildschirmfoto 2023-02-24 um 10.35.00.png (276.64 KiB) Viewed 9186 times
So somehow the timing seems to be off, is there anything I can do about that?
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Matomo integration

24 Feb 2023, 09:26

metallissimus wrote: The titles don't match the URLs (except for the entry page).
Yes, likely because the event is tracked before the document.title changes to the new page. It can be resolved by adding a tiny 100ms delay:
Code
function x3_load_page(){
  setTimeout(() => {
    console.log('_paq.push', document.title);
    _paq.push(['setCustomUrl', window.location.pathname]);
    _paq.push(['setDocumentTitle', document.title]);
    _paq.push(['trackPageView']);
  }, 100);
}
metallissimus wrote:Also I noticed the entry page always gets reloaded (or Matomo counts it as reloaded). Why is that?
Not quite sure what you mean "gets reloaded". The x3_load_page function will trigger ONCE for each page, including on the entry page, and this is of course as it's supposed to work. If Matoto triggers TWICE for the entry page, then I assume this is what is happening: It automatically tracks the current page (entry page) when the Matomo Javascript loads, and then we are also tracking all pages (including current page) manually ... This would lead to the entry page being tracked twice.

This is a bit stupid, but doesn't Matomo have options for this? Surely some option "don't automatically track". Or is the developer supposed to integrate custom tracking with "track all page, but don't track the first page!" I don't feel it's my responsibility to resolve this. Their documentation seems dated.

It would be quite easy to fix with a not-so-elegant solution.
Code
let _paq_first = true;
function x3_load_page(){
  if(_paq_first) return _paq_first = false;
  setTimeout(() => {
    console.log('_paq.push', document.title);
    _paq.push(['setCustomUrl', window.location.pathname]);
    _paq.push(['setDocumentTitle', document.title]);
    _paq.push(['trackPageView']);
  }, 100);
}
In the above, it won't track on the first page (where I assume Matomo automatically tracks from the loaded javascript).
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Matomo integration

24 Feb 2023, 09:46

Thank you for the explanation. Unfortunately the delay doesn't seem to help:
Bildschirmfoto 2023-02-24 um 15.43.10.png
Bildschirmfoto 2023-02-24 um 15.43.10.png (244.94 KiB) Viewed 9178 times
This is a bit stupid, but doesn't Matomo have options for this? Surely some option "don't automatically track". Or is the developer supposed to integrate custom tracking with "track all page, but don't track the first page!"  I don't feel it's my responsibility to resolve this.
I absolutely agree. If this is something that's caused by Matomo, I will gladly ask for help there.
Last edited by metallissimus on 24 Feb 2023, 10:12, edited 1 time in total.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Matomo integration

24 Feb 2023, 09:51

metallissimus wrote: Thank you for the explanation. Unfortunately the delay doesn't seem to help:
You might actually need a longer delay. It could be 300 ms during transition, I can't quite remember the exact flow in X3. In any case, it should be pretty safe to set 1000 ms (1 second) delay.
Code
let _paq_first = true;
function x3_load_page(){
  if(_paq_first) return _paq_first = false;
  setTimeout(() => {
    console.log('_paq.push', document.title);
    _paq.push(['setCustomUrl', window.location.pathname]);
    _paq.push(['setDocumentTitle', document.title]);
    _paq.push(['trackPageView']);
  }, 1000);
}
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Matomo integration

24 Feb 2023, 09:54

Great, 1000ms works, I will work my way down from there.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography