How to track links to anchor on same page?

General questions
1

I have a page that has an FAQ format, with a list of questions at the top, which when clicked link to an anchor further down the page with the answer. I’d like to track when the question buttons are clicked.

Reading the faq it seems that links to anchors within a page aren’t tracked - so how can I do this?

For example, all of the links will be like : https://mywebsite.com/index.htm#xl_Question1

Can I get a list of how many times that link has been selected by name (ie, xl_Question1)? Tag Manager?

2

I’m just going to track my own progress on this hoping to either figure it out or someone else jumps in.
FWIW my website is designed in Xara.

I can see that I can add manual events or content tracking. For my purposes I’d like to track all clicks on the buttons, as well as see which answers are being displayed on the screen.

Here’s an example of one of the blocks I want to track and the link. Its a picture with text on top.

<div class="xr_group">
 <a href="#xl_AnsBookUltrasound" onclick="xr_tip(this);return(xr_nn());"  data-track-content data-content-name="UltrasoundBookTest2">
  <img class="xr_rn_ xr_rnsp_ xr_ap" src="index_htm_files/4128.png" alt="" title="" onmousemove="xr_mo(this,128,event)" style="left:90px;top:1525px;width:501px;height:62px;"/>
 </a>
 <div class="xr_txt Normal_text xr_s33" style="position: absolute; left:118px; top:1558px; width:442px; height:10px;">
  <span class="xr_tl Normal_text xr_s33" style="top: -21px;"><a href="#xl_AnsBookUltrasound" onclick="xr_tip(this);return(xr_nn());" onmousemove="xr_mo(this,128)"  data-track-content data-content-name="UltrasoundBookTest3">Do I need to book for ultrasound?</a></span>
 </div>
</div>

As you can see I’ve added in the data-track-content and data-content-name attributes. The impressions work correctly, however the interaction rate is 0 - ie, the click is not being captured. I have managed to capture clicks separately by using :

onclick="_paq.push(['trackEvent', 'TestCat', 'TestAction', 'TestName']);xr_tip(this);return(xr_nn());"

Which works. From what I can see at this point I’m going to have to add a script to each page to go and hunt out the blocks/links and manually add the relevent matomo code? This seems like a fairly complex solution to basic functionality - am I missing something?

3

For what it’s worth, here is the script I used which is embedded in each page. If there’s an easier way let me know!

<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>
2 Likes
4

I think you can set your last message as the solution :wink:

5

Actually, there were a few issues with that - this is what I ended up using in case it helps someone.

<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 EventName = target.substr(target.lastIndexOf('/')+1);
	var EventAction = window.location.pathname.split("/").pop();
    if (EventAction=="") { EventAction="index.htm";}
    _paq.push(['trackEvent', 'DynamicClicks', EventAction,EventName]);
}

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