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.