0

We have a link on our page of which we want to track the usage. Currently, it's not really a link. It's a <div> tag with a data attribute containing the destination and a click handler bound to it.

When clicked, we send data to Google Analytics, and then trigger a page load with window.location = url after a short delay, so that we're sure that the data has gone through.

This approach works, but it has a major flaw: the clickable element is not actually a link, and behaves like one only in part. For example, I can't use my mouse wheel to click on it and have the link open in a separate tab (as you'd expect), or I can't right click on it and get a menu that is contextual to the link (because it's not a link).

Is there a way to use an <a> tag and get the behavior of a real link, intercept the click event, interact with Google Analytics and then follow the link normally after a small delay (to make sure the data goes through), without having to redirect ourselves and without having to lose functionality?

kettlepot
  • 10,574
  • 28
  • 71
  • 100
  • Question seems to be about getting middle mouse button to click rather than executing an async call. – Blexy Nov 27 '13 at 21:49
  • In general, I'd say it's about getting the link to have its normal behavior while still executing an ajax call. – kettlepot Nov 28 '13 at 09:23
  • The navigator.sendBeacon() API might be of use https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon – origamifreak2 Aug 29 '19 at 18:10

2 Answers2

1

You can use event.preventDefault() to prevent the link from being followed:

$('a').click(function(e){ 
    e.preventDefault();
    var href = this.href;
    setTimeout(function(){
        window.location = href;
    }, 2000)
});
levi
  • 23,693
  • 18
  • 59
  • 73
  • 1
    This still doesn't solve the issue. The ideal solution would be one where we don't stop the link from executing its own behavior instead of forcing a page change. – kettlepot Nov 27 '13 at 17:25
  • What behavior are you expecting aside from a page change? – levi Nov 27 '13 at 20:58
  • The problem I have is that if I click the link using the mousewheel instead of the left button, I expect it to open in a separate tab. That only happens when the click event is not tampered with via javascript, or at least not stopped. Having this would also mean that if I right click on the link and click on "Open in new tab", it should work fine. – kettlepot Nov 27 '13 at 21:01
0

With new HTML5 standards, couldn't you wrap your <div> in an <a> tag? Then you could do:

Inline: 

<a href="yourawesomewebsite.com" id="gaEvent" target="_blank" onclick="_gaq.push(['_set', 'hitCallback', function(){window.location = this.href;}]); _gaq.push(['_trackEvent','category','action','label']);">
    <div id ="blah"></div>
</a>

jQuery:

$('gaEvent').on('click', function(){
    _gaq.push(['_set', 'hitCallback', function(){
        window.location = url; // you'll still have to define this somewhere
    }]);

    _gaq.push(['_trackEvent','category','action','label']);
});

I totally referenced this SO post - Track event in google analytics upon clicking form submit

Community
  • 1
  • 1
Blexy
  • 9,573
  • 6
  • 42
  • 55
  • This still won't work. Middle-clicking on such a link would still open in the same tab. Is there no way to have the right href on the link and make it "execute" naturally? – kettlepot Nov 27 '13 at 17:21
  • I'm confused. What do you mean by middle clicking? If you're worried about it opening in the same tab, why not just add `target='_blank'` to the anchor. Then you could just add your onclick inline. Am I following you? – Blexy Nov 27 '13 at 17:26
  • If you perform the click on a link using your mousewheel, in most browsers and on most computers it will open in a different tab, even if it doesn't have target="_blank". It's a thing I use a lot, and I'd like to have it. If that mechanism works, it also means it'll be possible to, for example, right click on the link and click "Open in new tab" to do so. – kettlepot Nov 27 '13 at 21:00