annotated pixel script

pixelScript.js

//declaring an anonymous self executing function
//this function is declared and immediately executed
//@Parameters - t= window, e= document
! function(t, e) {
    // if FQTag is not present in window object already, initialize it with following function
    // the argument to this function 'o' is of the form as shown below-
    // {
    //     "org": "keswu4ug7detrumayur3",
    //     "s": "${AUCTION_ID}",
    //     "p": "${SELLER_MEMBER_ID}",
    //     "a": "${SITE_ID}",
    //     "cmp": "${CREATIVE_ID}",
    //     "fmt": "banner",
    //     "rd": "URL",
    //     "ctu": "CTURL",
    //     "ad": "ElementID",
    //     "rt": "display",
    //     "sl": "1",
    //     "fq": "1"
    // }
    t.FQTag = t.FQTag || function(o) {
        var n, r = t.encodeURIComponent,
            i = ["s", "r", "c"].join(""), // i = "src"
            a = ["i", "n", "n", "e", "r", "H", "T", "M", "L"].join(""), // a= "inneHTML"
            l = ["aux=1"],
            s = "http://fqtag.com/pixel",
            d = "s" + Math.floor(1000000001 * Math.random()); // random string of the form s2093482034
        
        //populating the passed object with more properties
        o.iif = t.top.location != t.location, //boolean- if the script is inside an iframe or the main page?
        o.rf || (o.rf = e.referrer), // string - domain from where did i arrive this page from 
        //if the length of the above URI is greatere than 1000, and it does not contain any query params, extract the initial part before query params
        //as we might not be interessted in the latter part
        o.rf.length > 1e3 && (o.rf.indexOf("?") > -1 ? o.rf = o.rf.split("?")[0] : o.rf.indexOf("%3F") && (o.rf = o.rf.split("%3F")[0])),
        // URL of the current page/iframe, the script is in
        o.loc || (o.loc = e.location),
        // same logic as above, trim this URL if too long
        o.loc.length > 1e3 && (o.loc.indexOf("?") > -1 ? o.loc = o.loc.split("?")[0] : o.loc.indexOf("%3F") && (o.loc = o.loc.split("%3F")[0])),
        // timestamp plus random string - used as a UUID whenever this script executes
        o.s = o.s || (new Date).getTime().toString(36) + "-" + Math.floor(4294967296 * (1 + Math.random())).toString(16).substring(1);
        
        //iterate over all properties of the object o
        for (var c in o) 
            // push each property and value in the array l as a string in the form of propertyName=propertyValue
            // if a property called "rt" is present , skip it, and instead, initialize the variable n with its value
            o.hasOwnProperty(c) && ("rt" === c ? n = r(o[c]) : l.push(r(c) + "=" + r(o[c])));
        
        //if n isstill not initialized, in case "rt" was not present in o, initialize it with "click"
        // in this example however, it was present and its value was "diaplay"
        n = n || "click", 
        // make a long string by concatenating all elements of array l
        // so basically l is a string representation of the full object o now
        l = l.join("&");

        //function which takes two arguments t and e
        // t is a script tag
        // e is a function
        // the calls e (if passed) when script t is fully loaded
        var f = function(t, e) {
                var o = !1; //false
                t.onload = t.onreadystatechange = function() {
                    o || this.readyState && "loaded" != this.readyState && "complete" != this.readyState || (o = !0, t.onload = t.onreadystatechange = null, e && e())
                }
            },
            // create a div tag
            h = e.createElement("div");
        // initialize it one pixel tall and wide (basically this is what we call as pixel)
        h.style.height = h.style.width = "1px", h.style.bottom = h.style.right = "0", h.style.position = "absolute", h.style.pointerEvents = "none";
        //create a script tag
        var p = e.createElement("script");
        //asign it the source attribe as -
        //                          (random string d)          (rt)
        //                                  |                   |
        //http://fqtag.com/pixel.js?cId=s90808008&rt=js&irt=display& (the whole o obj properties as key=value)
        p[i] = s + ".js?cId=" + d + "&rt=js&irt=" + n + "&" + l,
        // pass this script tag to function f to load it 
        f(p);
        var m = "__sp_iframe_" + Math.floor(1000000001 * Math.random()),
            y = s + "?rt=" + n + "&" + l; // y = http://fqtag.com/pixel?rt=display& (the whole o obj properties as key=value)
        // put an iframe inside the pixel div h
        // <iframe id="__sp_iframe_29384723947" src="http://fqtag.com/pixel?rt=display& (the whole o obj properties as key=value)" name="__sp_iframe_29384723947" style="border:0;height:1px;margin:0;padding:0;width:1px"></iframe>
        // this will put a pixel on the page
        h[a] = '<iframe id="' + m + '" src="' + y + '" name="' + m + '" style="border:0;height:1px;margin:0;padding:0;width:1px"></iframe>';
        
        // function g
        // checks if the document is loaded, if not retries until it is loaded (body tag present on page)
        // it then inserts the script tag p inside the pixel h and again inserts the pixel h on the page body
        // this will essentially  place the pixel on page, until now pixel was just being prepared
        var g = function() {
            if (e.body) {
                // place script inside pixel
                h.appendChild(p),
                // place pixel inside page body
                e.body.appendChild(h);
                // pick up the pixel(iframe) from the page
                var o = e.getElementById(m),
                    // random string
                    n = "s_" + d,
                    // a function r which is executed when iframe is loaded
                    r = function() {
                        // after iframe is loaded, it runs some script from http://fqtag.com/pixel which might place some property called __sp on the global window object
                        // it keeps checking the presence of this property on the page until is is present after some logic is run in the script loaded by pixel
                        t.__sP && t.__sP[n] ? (t.__sP[n](o, y), o.onload = o.onreadystatechange = null) : setTimeout(r, 10)
                    };
                // call function r when iframe is loaded
                f(o, r)
            } else setTimeout(g, 0)
        };
        //call function g
        g()
    }
}(window, document);

//this is again a self executing function which gets initialized and executed after the first one
! function() {
    // call the function FQTag, which was initialized in the above function with following object-
    // the values that you see in the form ${} are macros which are dynamically inserted on the server in this script
    // and their actual value would be different when the scrpit executes
    FQTag({
        "org": "keswu4ug7detrumayur3",
        "s": "${AUCTION_ID}",
        "p": "${SELLER_MEMBER_ID}",
        "a": "${SITE_ID}",
        "cmp": "${CREATIVE_ID}",
        "fmt": "banner",
        "rd": "URL",
        "ctu": "CTURL",
        "ad": "ElementID",
        "rt": "display",
        "sl": "1",
        "fq": "1"
    });
}();