Skip to main content

Custom Timer Implementation

  • Updated

Contents

Tag Implementation

Implement the Blue Triangle tag on your single page application as usual. Below is the standard tag that should be added to the single page application. 

<script async="true" type="text/javascript" src="//[siteID].btttag.com/btt.js"></script>

 

Capturing Virtual Page Loads

Description

Single page applications (SPA) and hybrid web apps load the page from a server once and then use network requests to rewrite content on that page. Since they create content on a page dynamically instead using full page loads to render content, Blue Triangle refers to the updating of content after an action takes place as “Virtual Page Load” or a soft page turn. Blue Triangle provides a few default methods to monitor these virtual turns, but custom timers are available for specialized methods to capture the virtual turn. Using custom timers, the site can send Blue Triangle a virtual onload time that represents the overall time it took to load the content on the virtual page turn. 

 

Implementation Overview

There are two API calls in btt.js that can be called to create the timing for a virtual page load. These calls are:

  • start(arg)
  • end(arg)

These two calls are required to capture a virtual page load in the Blue Triangle portal. The amount of time (in milliseconds) elapsed between the end() call and the start() call will be recorded as the virtual onload time. If a start() call is fired without the end() call, then no virtual page turn will be recorded.

There is an additional, optional API call in the btt.js that can be called to record the timing of a virtual Time to DOM Interactive. The amount of time (in milliseconds) elapsed between the update() and start() call will be recorded as the virtual Time to DOM Interactive. The update() call is: 

  • update(arg, type:”domInt”)

The start, update, and end methods are tied together by passing through the certain arguments. The argument for the start, update, and end methods is an object in JSON format that either contains (1) the page name and traffic segment or (2) the unique key. These two different implementation options are detailed below.

 

Standard Implementation - Details

In the standard implementation of custom timers, the page name and traffic segment values will be available when the start() call is made. If the page name or the traffic segment is not known when the start() call is made, then the Unique Key Implementation should be used instead. 

 

Example Argument

// Start, end, and update calls must be sent with argument in JSON format
// Argument must contain the page name and traffic segment
// pageName = page name, required
// txnName = traffic segment, required
// pageGroup = page group, optional (default value is "Custom Timer")
// For update() calls, you must include {type: "domInt"} as well

// Example argument without pageGroup
{
     pageName: “product detail - VT”,
     txnName: “eCommerce”
}

// Example argument withpageGroup
{
pageName: “product detail - VT”,
txnName: “eCommerce”, 
pageGroup: "Soft Load"
}

 

Example Start Call

Below is an example of a start call. The start call should be added to the website in all places that a virtual turn begins. This is often in an onclick event or at the start of a group of AJAX calls that begin to generate content on the page. 

// Add the start call where the virtual page view begins 
bttUT.start({pageName: "product detail - VT", txnName: "eCommerce"});

 

Example Update Call

Below is an example of an update call. The update call is typically sent between the start call and end call (after the virtual page view begins, but before the virtual onload time is complete). 

// Add in optional listener for virtual Time to DOM Interactive
bttUT.update({pageName: "product detail - VT", txnName: "eCommerce", type: "domInt"});

 

Example End Call

Below is an example of an end call. The end call should be added into the website where a virtual page load ends. This is often after certain HTML elements have rendered, after certain variables exist, or at the end of a group of AJAX calls when the content of the page is finished loading. 

// Add the end call where the virtual page view ends 
bttUT.end({pageName: "product detail - VT", txnName: "eCommerce"});

As seen in the examples above, the start, update, and end methods are called with the same parameters. Note that “product detail - VT” and “eCommerce” are just examples of a page name and traffic segment. 

 

Unique Key Implementation - Details

If either the page name or traffic segment are not known when the start() call is made, then a uniqueKey value can be passed to the start, update, and end methods instead. The user could be traversing a page with multiple virtual turns, so the uniqueKey is required to differentiate those start and end calls into single page views. The value of uniqueKey can be almost anything, as long as it is unique and consistent across the start, update, and end calls. 

Example Argument

// Start, end, and update calls must be sent with argument in JSON format
// The start call must contain the uniqueKey, but pageName and txnName are not required
// The end call must contain uniqueKey, pageName, and txnName
// uniqueKey = unique key to identify the page, required 
// pageName = page name, required for the end call
// txnName = traffic segment, required for the end call
// pageGroup = page group, optional (default value is "Custom Timer")
// For update() calls, you must include {type: "domInt"} as well

// Example argument
{
     uniqueKey: "abcd"
}

Example Start Call

Below is an example of a start call. The start call should be added to the website in all places that a virtual turn begins. This is often in an onclick event or at the start of a group of AJAX calls that begin to generate content on the page. 

// Add the start call where the virtual page view begins 
bttUT.start({uniqueKey: "abcd"});

Example Update Call

Below is an example of an update call. The update call is typically sent between the start call and end call (after the virtual page view begins, but before the virtual onload time is complete). 

// Add in optional listener for virtual Time to DOM Interactive
bttUT.update({uniqueKey: "abcd", type: "domInt"});

 

Example End Call

Below is an example of an end call. The end call should be added into the website where a virtual page load ends. This is often after certain HTML elements have rendered, after certain variables exist, or at the end of a group of AJAX calls when the content of the page is finished loading. 

// Add the end call where the virtual page view ends 
bttUT.end({uniqueKey: "abcd", pageName: "product detail - VT", txnName: "eCommerce"});

As seen in the examples above, the start, update, and end methods are called with uniqueKey, while pageName and txnName are defined in the end call. Note that “product detail - VT”, “eCommerce”, and "abcd" are just examples of a page name, traffic segment, and unique key.

 

Additional Examples

Standard Implementation - Example using native XHR

// Fire off start method right before group of AJAX that generate content on the page
// For example, someone clicks a button the initiates a soft load
bttUT.start({pageName: "product detail - VT", txnName: "eCommerce"});
// Set variables to see which AJAX calls have completed
var content1Complete = false, content2Complete = false;
 
// Start firing off AJAX calls to generate content on page
var xhrContent1 = new XMLHttpRequest();
xhrContent1.addEventListener("load", function(){
   if(this.readyState == 4 && this.status == 200){
      content1Complete = true;
      // Both sets of content have completed
      if(content1Complete === true && content2Complete === true){
         // Ajax calls have completed but content still needs to load. Call the update method to add in the virtual DOM interactive timing
         bttUT.update({pageName: "product detail - VT", txnName: "eCommerce", type: "domInt"});
         // Load images or other content
         loadImageContent();
         // Everything has finished loading so we call end method to complete the timing
         bttUT.end({pageName: "product detail - VT", txnName: "eCommerce"});
      }
   }
});
xhrContent1.open("GET", "https://api.example.com/content1");
xhrContent1.send();
 
var xhrContent2 = new XMLHttpRequest();
xhrContent2.addEventListener("load", function(){
   if(this.readyState == 4 && this.status == 200){
      content2Complete = true;
      // Both sets of content have completed
      if(content1Complete === true && content2Complete === true){
         // Ajax calls have completed but content still needs to load. Call the update method to add in the virtual DOM interactive timing
         bttUT.update({pageName: "product detail - VT", txnName: "eCommerce", type: "domInt"});
         // Load images or other content
         loadImageContent();
         // Everything has finished loading so we call end method to complete the timing
         bttUT.end({pageName: "product detail - VT", txnName: "eCommerce"});
      }
   }
});
xhrContent2.open("GET", " https://api.example.com/content2");
xhrContent2.send();

 

Unique Key Implementation - Example using native XHR

// Fire off start method right before group of AJAX that generate content on the page
// For example, someone clicks a button the initiates a soft load
bttUT.start({uniqueKey: "abcd"});
// Set variables to see which AJAX calls have completed
var content1Complete = false, content2Complete = false;
 
// Start firing off AJAX calls to generate content on page
var xhrContent1 = new XMLHttpRequest();
xhrContent1.addEventListener("load", function(){
   if(this.readyState == 4 && this.status == 200){
      content1Complete = true;
      // Both sets of content have completed
      if(content1Complete === true && content2Complete === true){
         // Ajax calls have completed but content still needs to load. Call the update method to add in the virtual DOM interactive timing
         bttUT.update({type: "domInt", uniqueKey: "abcd"});
         // Load images or other content
         loadImageContent();
         // Everything has finished loading so we call end method to complete the timing
         bttUT.end({pageName: "product detail - VT", txnName: "eCommerce", uniqueKey: "abcd"});
      }
   }
});
xhrContent1.open("GET", "https://api.example.com/content1");
xhrContent1.send();
 
var xhrContent2 = new XMLHttpRequest();
xhrContent2.addEventListener("load", function(){
   if(this.readyState == 4 && this.status == 200){
      content2Complete = true;
      // Both sets of content have completed
      if(content1Complete === true && content2Complete === true){
         // Ajax calls have completed but content still needs to load. Call the update method to add in the virtual DOM interactive timing
         bttUT.update({pageName: "product detail - VT", txnName: "eCommerce", type: "domInt", uniqueKey: "abcd"});
         // Load images or other content
         loadImageContent();
         // Everything has finished loading so we call end method to complete the timing
         bttUT.end({pageName: "product detail - VT", txnName: "eCommerce", uniqueKey: "abcd"});
      }
   }
});
xhrContent2.open("GET", " https://api.example.com/content2");
xhrContent2.send();