Google Tag Manager has a great built-in Click Trigger. You can create a trigger to fire on clicks and linkclicks.
But what if you want to catch right-clicks or middle-clicks on links? You need a custom trigger for it. In this post, I will show you how.
[bctt tweet=”This is how you track right- and middle-mouse clicks with Google Tag Manager”]
Note: This solution needs jQuery to function. Your site probably uses this library already, so let’s start!
Create a non-left click link listener tag
We’ll first create a Tag that attaches a javascript function to all non-left clicks on links. This function pushes an event to the dataLayer that indicates which button is used to click on the link.
On top of pushing the event, it also fills two other dataLayer key/value pairs:
- nonleft.linkclick.href – with the link target in it. For example: /contact/
- nonleft.linkclick.linktext – with the link text in it. For example: Contact us here
You can decide to create Variables from the dataLayer with these if you like (check this screenshot for an example)
The Tag looks like this:
if (window.jQuery) {
jQuery('a').mousedown(function(event) {
if (event.which == 3)
dataLayer.push({ "nonleft.linkclick.href": this.href,
"nonleft.linkclick.linktext": this.text,
"event": "nonleft.linkclick.right"});
if (event.which == 2)
dataLayer.push({ "nonleft.linkclick.href": this.href,
"nonleft.linkclick.linktext": this.text,
"event": "nonleft.linkclick.middle"});
});
}
In GTM, click Tags -> New and create a new Custom HTML Tag.
Paste in the code above. Don’t forget to add the <script> and </script> tags. After all, you’re injecting a script.
This Tag also checks to see if jQuery is loaded. You should check this yourself as well, obviously.
Create the triggers
Using this function, we push two different values in a dataLayer event. We can set 3 possible triggers with these:
- User clicked a non-left button on a link (catches both Right and Middle button)
- User clicked a right-button on a link
- User clicked a middle-button on a link
We can create this in the same way: select Trigger -> New -> Custom Event and vary the Event Names.
- nonleft.linkclick, using Regex match
- nonleft.linkclick.right (exact match)
- nonleft.linkclick.middle (exact match)
Done. Now use these triggers anyway you like
If you have the Tag and Trigger set up, and optionally, the Variables, you can for example create a Google Analytics event Tag to fire on all right-clicked links.
Here’s an example:
And you’re all done. Happy tracking!
Please let me know if this post was useful to you, and if you have some improvements: please share, thanks!
(featured image source: Shawn Campbell, Flickr)
Very good! Thanks for the post!
I was wondering how you gonna use this data or did you already use it?
Did you find any insights you could share? Are there certain types of links that get more right-clicks or do right-clicks increase the conversion-rate afterwards? :)
Best Regards
Ton
Hi Ton.
This trigger is useful when measuring when you e.g. override the default right-click and show your own context menus.
If you combine this with exit-intent measurements, you can segment out your power-users: people who “exit” a lot and do a lot of right-middle-clicking are likely to be comparing products across multiple tabs.
Unfortunately doesent work for me, tags do not fire.
Matt – Did you ever get the trigger to fire? I have been trying as well without success. In debugging the page GA identifies the tags but that they never fired. Originally thought to be JQuery issue but that was ruled out.
Thank you for any advice.
Hey Jules,
Thanks for the guide! It’s a great addition to something that is missing on the out-of-the-box feature…
We’re tracking clicks on our site for downloads (so we’ve restricted the triggers for specific extensions such as .pdf .doc .xls etc…). Right-clicks are thus really relevant for those opening in a new tab or “saving as”…
However, I haven’t managed to restricts those right-click events to trigger only to specific extensions… at the moment it reports everything in GA: opening a html page in a new tab for instance.
Is there a way to do this restriction, like it can be done for left-clicks? Could you guide me in the right direction :) ?
Cheers!
Julien
The tag stores the clicked ‘href’ (target url) in the datalayer.
If you create DL variables for it, you can create conditions with it.
{{event}} matches ‘nonleft.linkclick.*’
+
{{DL nonleft.linkclick.href}} matches ‘\.(xls|pdf)$’ for example.
You probably also want to add a line in the JS for CTRL + click as that is how you right click on a Mac when using the trackpad.
if (event.ctrlKey)
dataLayer.push({ “nonleft.linkclick.href”: this.href,
“nonleft.linkclick.linktext”: this.text,
“event”: “nonleft.linkclick.right”});
I’ve followed these instructions, but it’s not working at all and nothing shows up in the data layer. Is this option still viable?
AFAIK, it’s still valid. Which browser / os combination are you using? It could also be your website scripts that are conflicting. Do console errors show?
When you are adding in your custom Target URL, where does that go? In the custom tag or in the data layer?