Tracking pixel with javascript

Question

I have a tracking pixel that I need to load in JS, at the click of a button. So the process is as follow :

The user clicks a link
I prevent the click (e.preventDefault)
load the tracking pixel
Redirect the user

Here is the code :

$('.btn-cta').on('click', function (e) {
   e.preventDefault();
   $('body').append('<img width="1" height="1" src="http://main.exoclick.com/tag.php?goal=xyz">');
   window.location.replace($(this).attr('href'));
});

My problem is that not 100% of the people who click are tracked, seems like about 40/50% of them are not tracked. I don't see another method to do this, do you have a better idea to track this kind of thing in JS ?

All ideas welcome.

John

You should redirect in the onload event listener on the image. — pawel
– pawel, Commented Jul 9, 2015 at 9:44
@Pawei has it right: you are forwarding before the image is likely to be properly requested so the request will be cancelled when you redirect. — somethinghere
– somethinghere, Commented Jul 9, 2015 at 9:46

pawel · Accepted Answer · 2015-07-09 17:17:01Z

4

Wait for the image to load, then redirect.

$('.btn-cta').on('click', function (e) {
   e.preventDefault();

    var url = $(this).attr('href');
    var track = new Image();
    track.onload = function(){
        window.location.replace( url );
    };
    // in case the tracking server is down or misconfigured (see comments)
    // otherwise the navigation would be broken.
    track.onerror = function(){
        window.location.replace( url );
    };
    track.src = 'http://main.exoclick.com/tag.php?goal=xyz';
});

edited Jul 9, 2015 at 17:17

answered Jul 9, 2015 at 9:46

pawel

37.1k7 gold badges59 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

JohnWolf Over a year ago

So the image gets loaded fine, but the onload function does NOT get executed. I don't get any error though. Maybe it's because I get this : "Resource interpreted as Image but transferred with MIME type text/html". Any ideas ?

pawel Over a year ago

@JohnWolf it seems to be the case. Add an onerror event handler so you'll see it triggered when requesting this image: jsfiddle.net/unj4haqn/1

JohnWolf Over a year ago

yea I thought so. These guys are not good enough to give a proper MIME type. I'll look for another solution.

pawel Over a year ago

@JohnWolf then add the redirect to the onerror listener as well. While it works and records your hits it's OK, and if the third-party server is down it still won't break your website for the visitors (i.e. you should handle the onerror anyway).

JohnWolf Over a year ago

Smart! I will check the data in the next 24 hours to see if it matches better. thanks a lot.

|

Collectives™ on Stack Overflow

Tracking pixel with javascript

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related