移动页面上的像素跟踪失败

Question

i have a pixel tracking on a webpage, it is working nice for many time, but yesterday i find that is not working well on mobile page m.url.com, instead of www.url.com.

Mobile page only reload the header the first time you load the page, so i change the tracking to be called on a live event.

Is working and it call the js where i calculate the browser, user_agent, etc to pass as query string in the pixel.

This is the function on my Tracking JS class:

/**
 * Web beacon with query string
 */
function getImage(query_string) {
    var image = new Image(1, 1);
    image.onload = function () {
        console.log(image);
    };
    image.error = function () {
        console.log('error');
    };
    image.onabort = function () {
        console.log('abort');
    };
    image.src = 'http://<myurl>/picture.gif?' + query_string;
}

When i call this function on m.url.com (mobile site), on chrome, the first time the page is loaded, the pixel works, after that, when i navigate the pixel only works on chrome, on other browsers like firefox and safari dont, all is working and the src callback the .onload function with the url of the image, no errors, no abort...

Maybe src only works 1 time at same class? Dont know,

Thx for help in advance.

Answer 1

It seems that the image is cached once and not requested anymore. Just add a timestamp to the image url:

image.src = 'http://<myurl>/picture.gif?_=' + (new Date()).getTime() + '&' + query_string;