Stuifbergen.com

Analytics & Growth Hacking

  • About
  • Contact
  • Professional Services

Find me here

  • Mastodon (social)
  • Mastodon (measure)
  • No more Twitter
You are here: Home / Blog / Track non-left mouseclicks with Google Tag Manager

Track non-left mouseclicks with Google Tag Manager

25 November 2015 by jules 10 Comments

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.

non-left clicktag

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:

  1. User clicked a non-left button on a link (catches both Right and Middle button)
  2. User clicked a right-button on a link
  3. 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.

  1. nonleft.linkclick, using Regex match
  2. nonleft.linkclick.right (exact match)
  3. nonleft.linkclick.middle (exact match)

non-left buttonmiddle button

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:

right-click-tag

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)

Related posts:

Catch exit-intent with a Google Tag Manager trigger Default ThumbnailSet up A/B tests using the Google Tag Manager GTM testing logoReview and demo of GTMtesting.com Google Tag Manager Cookie Consent dialog

Filed Under: Blog Tagged With: click tracking, Google Tag Manager, tutorial

Comments

  1. Ton says

    26 November 2015 at 12:13

    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

    Reply
    • Jules says

      26 November 2015 at 15:57

      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.

      Reply
  2. Matt says

    26 September 2017 at 16:36

    Unfortunately doesent work for me, tags do not fire.

    Reply
    • PaulM says

      27 February 2018 at 17:06

      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.

      Reply
  3. Julien says

    18 October 2018 at 09:50

    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

    Reply
    • jules says

      18 October 2018 at 10:57

      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.

      Reply
  4. Phil Strazz says

    6 December 2018 at 23:46

    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”});

    Reply
  5. Brian says

    15 May 2020 at 20:34

    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?

    Reply
    • jules says

      15 May 2020 at 21:07

      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?

      Reply
  6. Hannah G Clack says

    15 October 2020 at 18:13

    When you are adding in your custom Target URL, where does that go? In the custom tag or in the data layer?

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Posts

  • How to use a pre-hashed email address in GA4 tags in GTM
  • GA4 intraday exports and cookieless pings
  • July 2024 change in collected_traffic_source in GA4 Big Query
  • srsltid parameter, GA4 and Big Query
  • Smart incremental GA4 tables in Dataform

Need help?

  • Contact me

Search

© Copyright Jules Stuifbergen · Powered by Genesis ·