Page tree
    Skip to end of metadata
    Go to start of metadata

    This topic presents an example of the JavaScript code with which you must instrument your web applications.

    The web beacon JavaScript library accomplishes the following actions:

    • Verifies the browser type (variations in browser implementation require different methods, depending on the browser type)
    • Adds a reference to a function (the system's call-back function) into the event queue that the browser executes when the page finishes loading (window.onLoad event).
    • When the page finishes rendering, the call-back function runs and results in a GET request, which is sent to the origin server, where it is intercepted and used to derive timing information. This URL contains a randomly generated query parameter to prevent browser caching.

    Obtain the web beacon JavaScript from the RIA Visability toolkit on the  PDFs and videos page, or contact your BMC Customer Support representative.

    Web beacon JavaScript library code

    /* tsedge_instr-min.js - Minified version - v0.9.5 */
    if(typeof tsedge == "undefined"){
      var tsedge = {};
      tsedge.instr = {
        PL_GO_IMG: "crd_prm_go", // name for PRM GO file name
        onLoadEventAttached: false,
        prmSent: false, // has the PageRenderMarker been sent ?
        random: Math.floor(Math.random() * 1000000),
        pagestart_ts : new Date().getTime(),
        pageend_ts: 0,
        counter: 0.00,
        url: null,
        version: '0.9.5',
    
        bind: function(fct, context){ //allow execution of a function controlling it's
        context
          if (arguments.length < 2 && Object.isUndefined(arguments[0])) return this;
          return function() {
            return fct.apply(context);
          }
        },
        getCounter: function(){
          return (this.counter.toString().indexOf(".") >= 0) ?
          this.counter.toString() : this.counter.toString() + '.00';
        },
        getHost: function(markerName){
          var host = "";
          var rxp = new RegExp("http[s]?://([Web beacon JavaScript library^/]*)/(.*)");
          if(rxp.exec(markerName)){ //The PL_GO_IMG is already a full path, use it
            directly
            host = markerName;
          }else{
            var pageLoc = rxp.exec(window.location);
            var fsPos = markerName.indexOf("/");
            //build the protocol + domain
            host = location.protocol + "//" + location.host;
            if(fsPos == 0){ //leading /
              //If GO is relative to the domain, just add the GO
              host = host + markerName;
            }else { //no leading /
              //If GO is relative to the actual page, build the path and add the GO
              host = host + location.pathname.substring(0,
              location.pathname.lastIndexOf('/')+1) + markerName;
            }
          }
          return host;
        },
        sendPageRenderMarker: function(){
          if(!this.prmSent){
            this.pageend_ts = new Date().getTime();
            this.counter += 0.01;
            this.host = tsedge.instr.getHost(this.PL_GO_IMG);
            var markerURL = [];
            markerURL.push(this.host);
            markerURL.push("?crd_ver=");markerURL.push(this.version); //random
              unique page id
            markerURL.push("&crd_rnd=");markerURL.push(this.random); //random
              unique page id
            markerURL.push("&crd_cnt=");markerURL.push(this.getCounter()); //
              counter
            if(this.pageend_ts > 0) {
            markerURL.push("&crd_tpb=");markerURL.push(this.pagestart_ts); //
              page start timestamp
            markerURL.push("&crd_olt=");markerURL.push(this.pageend_ts -
              this.pagestart_ts); //page load time
          }
          this.url = markerURL.join("");
          var markerImg = new Image();
          markerImg.src = this.url;
          this.prmSent = true;
        }
      },
      attachOnLoadPageRenderMarker: function(){
        if(this.onLoadEventAttached) { return; } //attach only once
        try{
          this._sendPageRenderMarker =
            tsedge.instr.bind(tsedge.instr.sendPageRenderMarker, this);
          if(window.attachEvent){ //IE
            window.attachEvent("onload", this._sendPageRenderMarker );
          }else
          if( window.addEventListener){ //FF, Opera, Safari...
            window.addEventListener("load", this._sendPageRenderMarker , false);
          }else
          if( document.addEventListener){ //FF, Opera, Safari... when window is
            not set
            document.addEventListener("load", this._sendPageRenderMarker ,
            false);
          }
          this.onLoadEventAttached = true;
        }catch(e){ /* */ }
      }
      };
      tsedge.instr.attachOnLoadPageRenderMarker();
    }
    

    Example of the proper script placement

    <html>
    <head>
    <!--Insert Web beacon JavaScript at the beginning of the
    head section-->
    <script language="javascript" src="tsedge_instr-min.js"></script>
    <!--Insert existing head section content-->
    ...
    </head>
    <body>
    <!--No changes needed in body section-->
    ...
    </body>
    </html>
    

    Warning

    Placing the script element in other parts of the page can result in inaccurate timing.