How To Track Outbound Clicks Using Javascript

Question

I am trying to use the code provided here: Make a ping to a url without redirecting. The OP has asked to ping a url without opening multiple windows. I would like to do this, but I want to actually visit a second url so I can track the outbound clicks in my server analytics.

Here's the code I'm trying to make work:

<a href="javascript:;" onclick="visitPageX()">link</a>

function visitPageX() {
  // send Ajax request to the track URL
  setTimeout(function() {
    location.href = 'http://{pageXURL}';
  }, 300);
}

However, I don't understand where I should be putting my "tracking url". Here's my attempt at it:

<a href="javascript:;" onclick="visitPageX()"><a href="http://externalsite.com/">anchor text</a></a>

function visitPageX() {
  // send Ajax request to the track URL
  setTimeout(function() {
    location.href = 'http://externalsite.com/';
  }, 300);
}

I'm stuck at where to put

http://examplemysite.com/tracking.php?123

so that I can count the outbound clicks. I would appreciate it if you could help me get this code working or provide an even better solution to tracking outbound clicks without using Google Analytics.

Your support is very much appreciated.

James · Accepted Answer · 2017-10-20T15:52:43.377

5

This example uses jQuery for brevity. It could be written using vanilla javascript too.

Here I've taken the tracking url and added it as a data attribute to the anchor tag so that various links can easily have different tracking urls. I've given the anchor a class of trackme which is how the javascript knows to assign the tracking function to that particular <a> tag.

The javascript prevents the default of loading the href until the ajax call succeeds or fails, and then it will load the href.

<html>
<head>
<script src='https://code.jquery.com/jquery-3.2.1.js'></script>
<script type='text/javascript'>
$(document).on("click", ".trackme", function (e) {
    e.preventDefault(); // stop browser from going to href right away
    var finalURL = this.href;
    $.ajax({
        url: $(this).data("tracking-url"),
        success: function () {
            location.href = finalURL;
        },
        error: function () {
            location.href = finalURL;
        }
    });
});
</script>
</head>
<body>
<a href="http://google.com" data-tracking-url="http://examplemysite.com/tracking.php?123" class="trackme">anchor text</a>
<a href="http://yahoo.com" data-tracking-url="http://examplemysite.com/tracking.php?124" class="trackme">anchor text</a>
</body>
</html>

edited Oct 20 '17 at 15:52

answered Oct 20 '17 at 15:21

James

20,957
5
26
41

I totally understand your logic and think this would be a great solution. I'm just having some trouble getting the code to work. I'm putting this in my header and wrapping the function in `` right? – DomainsFeatured Oct 20 '17 at 15:35
Am I supposed to change `("tracking-url")` to `("data-tracking-url")` – DomainsFeatured Oct 20 '17 at 15:50
I fixed a bug in the ajax url, and modified the handler to be happy within the `` of a document – James Oct 20 '17 at 15:53
Ah, thank you so much James! It's working :-) I can't thank you enough. Will accept your answer as correct in the next day or so. Hopefully, a lot of people will agree this is a great solution. If there's anything I can do just let me know :-) – DomainsFeatured Oct 20 '17 at 16:05
It works with 1.12.4 as well, jquery needs to be loaded before the handler function is loaded, that's about all I can think of. Or did you figure it out? – James Oct 20 '17 at 16:44
As a note: if you are running this in compatibility mode (as I was), you just have to change `$` to `jQuery` and it works without the external `` call. – DomainsFeatured Oct 20 '17 at 16:45
Yup, got it. Thanks James :-) – DomainsFeatured Oct 20 '17 at 16:46

How To Track Outbound Clicks Using Javascript

1 Answers1

Linked