Proper way to track link's click

Question

I'm trying to find the most exhaustive / compatible solution to track some links inside my website.

Actually, I've this code:

$(".article-content a").each(function() {
    $(this).click(function() {
        // Tracking code here
    });
});

Is there any recommandations regarding real user redirection handling ? I think we have to firstly exclude right-click ? And also be sure that Ctrl-Click, MouseWheel-Click, Touch events, Navigation by keyboard, etc... are properly handled to fire, for example a GA event ?

Your question is too broad, there are a lot of options and possible solutions. You should specify what you need to track specifically, what you're having trouble with and show what you've tried. — Ruan Mendes, Aug 27 '15 at 13:04
this might help you http://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery — Farhan, Aug 27 '15 at 13:06
possible duplicate take a look at this question http://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery — Selva, Aug 27 '15 at 13:10

score 1 · Answer 1 · answered Aug 27 '15 at 13:06

make something like this

$('.asdfasdf').mousedown(function(e) {
    switch (e.which) {
        case 1:
            //Left Mouse button pressed
            break;
        case 2:
            //Middle Mouse button pressed
            break;
        case 3:
            //Right Mouse button pressed
            break;
        default:
            //asdfasdf
    }
});

here's some doc: jQuery-Doc

Michael McMullin · Answer 2 · 2015-08-27T13:17:43.613

Try jQuery's event.which in combination with .mousedown. Something like:

$('.article-content a').mousedown(function(event){
    var message = 'click';
    if (event.ctrlKey) message += ' ctrl';
    if (event.shiftKey) message += ' shift';

    switch (event.which) {
        case 1:
           message = 'left ' + message;
           break;
        case 2:
           message = 'middle ' + message;
           break;
        case 3:
           message = 'right ' + message;
           break;
    }

    alert(message);
});

score 0 · Answer 3 · answered Aug 27 '15 at 13:08

use function with parameter to handle click

$(".article-content a").each(function() {
    $(this).click(function(e) {
      if(e.ctrlKey) {
        //Ctrl+Click
      }
      if(e.altKey) {
        //Alt+Click
      }
      ...
    });
});

log e to console to get more information

you can listen other events for mobile: tap, taphold, swipe, swipeleft...

$(".article-content a").on("tap",function(){
  #element is tapped
});

Alberto De Caro · Answer 4 · 2015-08-27T14:05:22.573

I suggest you the following approach.

Add a class to the elements you want to track:

  < a class="trackMouseClick" >I want to be tracked onclick< / a >

Define the event handlers for each class:

//the actual event handler
//here you can implement the logic for each kind of event
function mousedownHandler(e){
    console.log('target element: ' + e.target + '\tbutton clicked: ' + e.which);
}

//the event binder
//remark: the event is bound only for the elements feature the proper class
$('.trackMouseClick').on('mousedown',function(e){
    mousedownHandler(e);
});

Add as many classes and events handlers as many events you want to track:

function mousedownHandler(e){
    console.log('target element: ' + e.target + '\tbutton clicked: ' + e.which);
}

function tapHandler(e){
    console.log('target element: ' + e.target);
}


$('.trackMouseClick').on('mousedown',function(e){
    mousedownHandler(e);
}).on('tap',function(e){
    tapHandler(e);
});

The main pros are:

Modularity: you can add and remove event handlers simply adding and removing classes from your DOM elements
Decoupling: using classes separates the DOM structure from the tracking logic you aim to implement

Ok, but not really that i want, how to be sure that i can handle all events that redirect the user on the (not right) clicked / touched / keyboard selectionned link ? — bigben3333, Aug 27 '15 at 13:46

Proper way to track link's click

4 Answers4