Matomo integration - how I track clicks

**paco** · 07 November 2021, 04:47 AM

I'm not sure if anyone has used Matomo for analytics, but I've had some difficulties getting some of the events to work. Specifically I have pages with a FAQ/Answer layout with a bunch of questions at the top, which link to answers further down the page. I've set it up this way so I can track which questions get clicked on more.

One of the issues with Matomo is that it doesn't track links within the same page automatically, as far as I can tell. Hopefully there's an easier way, but I ended up creating a script that sends data to matomo when the link is clicked. There were a few issues as the script needs to run after the document is loaded, but after all of the Xara code. Anyway, in case it helps someone else here is the script I used:

Code:

<script>

function AddClicks() {
	var l = document.links;
	for(var i=0; i<l.length; i++) {	
		l[i].addEventListener('click', MyClick,false); 
	}
}

function AddClicksInit() {
	setTimeout(function() { AddClicks(); }, 500);
}
	
function MyClick(event)
{
	if (typeof(event) == "undefined") { return;}
	var target = ''+event.target;
	var name = target.substr(target.lastIndexOf('/')+1);
	_paq.push(['trackEvent', 'DynamicClicks', 'Click',name]);
}

window.addEventListener("load", AddClicksInit);
window.addEventListener("resize", AddClicks);
</script>

In my case it automatically names the clicks based on the name of the page and the xara name/anchor. Note that the names are different for the different variants, and if you have pages with the same name but located in different folders that could be an issue. It need to be in the <body> section of the website.

Anyway, hope that helps someone.

**paco** · 07 November 2021, 09:23 AM

Made a few improvements:

Code:

<script>

function AddClicks() {
	var l = document.links;
	for(var i=0; i<l.length; i++) {	
		l[i].addEventListener('click', MyClick,false); 
	}
}

function MyClick(event)
{
	if (typeof(event) == "undefined") { return;}
	var target = ''+event.currentTarget.href;
	var name = target.substr(target.lastIndexOf('/')+1);
        _paq.push(['trackEvent', 'DynamicClicks', 'Click',name]);
}

window.addEventListener("load", AddClicks);
window.addEventListener("resize", AddClicks);
</script>

**Acorn** · 07 November 2021, 11:03 AM

paco, I do not see why you need to re-apply the AddClicks function on window resize. Onload will have done it already.
All Variant links are being caught too.

All the code will sit nicely in Website > HTML Code (body).

Your event listener for resize, if needed, is hijacking the current Windows set up.
Have you tried window.onresize = function() { AddClicks }; ?

If you change the function AddClicks to run immediately, you don't need the onload part either:

(function(){
var l = document.links;
for(var i=0; i<l.length; i++) {
l[i].addEventListener('click', MyClick,false);
}
}())

None of the above are tested, just ideas.

Acorn

**paco** · 07 November 2021, 08:33 PM

Originally Posted by Acorn

paco, I do not see why you need to re-apply the AddClicks function on window resize. Onload will have done it already.
All Variant links are being caught too.

All the code will sit nicely in Website > HTML Code (body).

Your event listener for resize, if needed, is hijacking the current Windows set up.
Have you tried window.onresize = function() { AddClicks }; ?

If you change the function AddClicks to run immediately, you don't need the onload part either:

(function(){
var l = document.links;
for(var i=0; i<l.length; i++) {
l[i].addEventListener('click', MyClick,false);
}
}())

None of the above are tested, just ideas.

Acorn

Thanks for the suggestions Acorn. I have tested it and find that if you resize a desktop window down to a mobile size, all of the event listeners are lost - I assume that xara does that when changing variants - so the resize listener is needed so that they are reimplemented.

Agreed about putting it in the body and removing the AddClicksInit - that works fine. I initially had all the code set up as a placeholder so it was further up in the body, and thus would run before the xara code at the bottom. As you say, puttting in the website body function inserts it at the end so this is not needed.

Great discussion, thanks!

**Acorn** · 07 November 2021, 10:11 PM

Paco, useful as I never thought of using Matomo.
I'll give it a try.

Acorn

Thread: Matomo integration - how I track clicks

Thread Tools

Display

Matomo integration - how I track clicks

Re: Matomo integration - how I track clicks

Re: Matomo integration - how I track clicks

Re: Matomo integration - how I track clicks

Re: Matomo integration - how I track clicks

Bookmarks

Bookmarks

Posting Permissions