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.

Download the most recent version of the web beacon JavaScript from the BMC Electronic Product Download (EPD) site, 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.hostname;
       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*