Wednesday, May 9, 2012 #

Inject Pixels Into DOM

I was tasked with adding various Tracking Pixels to the DOM from an Unobtrusive JavaScript Library hosted in the Azure Cloud.

It finally dawned on me that I did not have to go through the machinations of creating the pixel and appending it to the appropriate element in the DOM.

All I really needed to accomplish was to have the pixel fire (meaning: send an HTTP Request to a remote Server), complete with its Query String values, which each Server on the other side needs in order to process Server-Side-Code before returning the pixel.

It never matters whether the pixel actually appears on the page or not.  Delivering the payload is the only goal.

So what is the [workaround]?

I rethought the creation of pixels and opted for a very quick method of creating many pixels at the same time:

intermark.createImages = function () {
    for (var i = 0; i < arguments.length; i++) {
        var img = new Image();
        img.src = arguments[i].toString();
    }
};
 
And then I can call the function using the following for any number of pixels necessary:
if (id > -1) {
    intermark.createImages(pixel1Src, pixel2Src);
}
 
And Voila! Problem solved!

Posted On Wednesday, May 9, 2012 4:00 PM | Comments (0)

Copyright © intermark

Design by Bartosz Brzezinski

Design by Phil Haack Based On A Design By Bartosz Brzezinski