I am attempting to figure out why this click tracker isn't working. The code was written by another developer so I am not entirely sure if this ever did work.

function trackSponsor(o, p) {
        (new Image()).src = PATH_BASE + 'click/' + p + '/' + o + "?_cache=" + (+(new Date()));
    return false;
}

From what I can gather is that when this function is called it 'creates a new image' to fire a php script asynchronously. According to Firebug, the request is made however it is 'aborted' ~30ms in. The odd thing is that it will 'sometimes' work as in 1 in every 10+ regardless of the browser.

I would much rather fix this so that it works instead of re-writing it as an ajax request.

Any help is appreciated.

Thanks in advance.

EDIT

Because of tvanfosson's post that got me thinking. I have included the line which calls the click tracker below.

<a onclick="trackSponsor(60, 15077); goToNextStep(1988, 15077, 0); return false;" href="#">view</a>

the goToNextStep() actually changes the page. I am under the impression that it would only be executed after trackSponsor() had finished.

I am attempting to figure out why this click tracker isn't working. The code was written by another developer so I am not entirely sure if this ever did work.

function trackSponsor(o, p) {
        (new Image()).src = PATH_BASE + 'click/' + p + '/' + o + "?_cache=" + (+(new Date()));
    return false;
}

From what I can gather is that when this function is called it 'creates a new image' to fire a php script asynchronously. According to Firebug, the request is made however it is 'aborted' ~30ms in. The odd thing is that it will 'sometimes' work as in 1 in every 10+ regardless of the browser.

I would much rather fix this so that it works instead of re-writing it as an ajax request.

Any help is appreciated.

Thanks in advance.

EDIT

Because of tvanfosson's post that got me thinking. I have included the line which calls the click tracker below.

<a onclick="trackSponsor(60, 15077); goToNextStep(1988, 15077, 0); return false;" href="#">view</a>

the goToNextStep() actually changes the page. I am under the impression that it would only be executed after trackSponsor() had finished.

• javascript

• So the php script is failing once per 10+ requests? – Crescent Fresh Commented Apr 26, 2010 at 19:42
• @Cresent - What? Nobody said anything about PHP. – Amy B Commented Apr 26, 2010 at 19:44
• 2 @Coronatus: Nobody said anything about PHP : The OP states "when this function is called it creates a new image to fire a php script". – Crescent Fresh Commented Apr 26, 2010 at 19:46
• To clear this up....the php script never fails once its actually run, however this is not triggering the script to run. – user103219 Commented Apr 26, 2010 at 19:50
• @razass: not sure that cleared it up for me ;) Requests via new Image do not show up under the Firebug console, only the Firebug NET tab (under "Image" or "All" requests). Do you see them there? – Crescent Fresh Commented Apr 26, 2010 at 19:56

4 Answers 4

It's actually pretty trivial to rewrite as a get request using jQuery. Rewriting it will certainly help the next developer understand what's happening and might fix your problem. I'd need to know more about the contents of the variables -- perhaps they need to be urlEncoded? -- before I could help you any more on it. You might try urlEncoding them and see what happens.

function trackSponsor(o, p) {
    var url = PATH_BASE + 'click/' + p + '/' + o + "?_cache=" + (+(new Date()));
    $.get(url); 
    return false; 
}

EDIT: you might want to check that another handler isn't redirecting the browser to a new location when the event triggering the tracking is invoked. This would abort any pending requests on the page -- and might allow a few to succeed based on the timing of the requests and if the results are delivered before the page is unloaded.

"(new Image()).src = url;" just asks for browser to hit the url. You should delay for a 50-100ms in order to be sure that tracking info were sent to the server.

function delay(a) {
  for (var b = +new Date, c = 1; 0 < c; c++) {
    if (0 == c % 1E3) {
      var e = +new Date;
      if (b > e) break;
      if (e - b > a) break;
    }
  }
}
function trackSponsor(o, p) {
  (new Image()).src = PATH_BASE + 'click/' + p + '/' + o + "?_cache=" + (+(new Date()));
  delay(100);
  return false;
}

I poked around Google Analytics’ ga.js, which does use the new Image() method similar to your script.

The only difference that I could see was in how the object is created. Google's script assigns the object to a variable.

var d=new Image(1,1);d.src=f;

Maybe give that a shot?

function trackSponsor(o, p) {    
        var i = new Image(1,1);
        i.src = PATH_BASE + 'click/' + p + '/' + o + "?_cache=" + (+(new Date()));    
    return false;    
}

It shouldn't make a difference, but is worth a shot.

Maybe try this, for avoiding Garbage Collection to make your log not be lost.

var sendLog = (function () {
    var _unique = (function () {    /* 产生唯一标识*/
        var time = (new Date()).getTime() + '_',
            i = 0;

        return function () {
            return time + (i++);
        }
    }());

    var run = function (url) {
        var data = window['imgLogData'] || (window['imgLogData'] = {}),
            img = new Image(),
            uid = _unique();

        data[uid] = img;    /* 防止img被垃圾处理*/

        img.onload = img.onerror = function () {    /* 成功或失败后销毁对象*/
            img.onload = img.onerror = null;
            img = null;
            delete data[uid];
        };

        img.src = url + '&_cache=' + uid;   /* 发送统计内容*/
    };

    return run;
}());


sendLog('http://log_');