Web beacon JavaScript library

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.

 

Tip: For faster searching, add an asterisk to the end of your partial query. Example: cert*