Summary

AdRoll's SmartPixel is a JavaScript code snippet that you place in the footer of your site, near the </body> tag. The pixel has been specially engineered to load asynchronously and independently so as to never block page load.

Technical Details

AdRoll designed the pixel to load only after the entire page has finished loading. Our technique is close to what you'll find documented here in the High Performance Website blog, and is inspired by the approach Google Analytics recently adopted. However, we take fault-tolerance one step further: by registering a callback with the browser that will be called only at the end of the rendering process, we effectively remove any impact of the pixel from page load time. Even if Internet connectivity was lost to AdRoll's CDN and servers, page load would not be blocked. The code has been vigorously tested by our team and by third-parties including the technical teams of large customers:

“ You guys nailed it. This approach for loading JavaScript is perfect; you should blog about it or inform Ajaxian! :) ” - Dir of Engineering, PBWorks

To ensure very fast loading no matter the user's geography, our pixel content is delivered from Akamai, the #1 global content delivery network. The SmartPixel automatically handles both http and https.

Pixel Example

This is an example of the AdRoll pixel code. We designed it to be small, efficient, powerful, and easy to place.

<script type="text/javascript">
    adroll_adv_id = "ABCDEFGHIJKLMNOPQRSTUV";
    adroll_pix_id = "9876543210ZYXWVUTSRQPO";
    
    (function () {
        var oldonload = window.onload;
        window.onload = function(){
           __adroll_loaded=true;
           var scr = document.createElement("script");
           var host = (("https:" == document.location.protocol) ? "https://localhost" : "http://localhost");
           scr.setAttribute('async', 'true');
           scr.type = "text/javascript";
           scr.src = host + "/j/roundtrip.js";
           ((document.getElementsByTagName('head') || [null])[0] ||
            document.getElementsByTagName('script')[0].parentNode).appendChild(scr);
           if(oldonload){oldonload()}
        };
    }());
</script>