Tag Implementation for Single Page Applications

Summary

If the Blue Triangle JavaScript tag is added to your site, all AJAX calls can be measured without any additional instrumentation. Blue Triangle can also measure a Virtual Page Turn (VPT)* from a Single Page Application (SPA)**. Make API calls from your app to designate the beginning of a VPT. For example, adding an item to a cart.

Currently supported timings for VPT's using the Blue Triangle API include:

1. The beginning of the process
2. When the page is interactive
3. When the virtual page is done

In this article, learn: 

• How AJAX calls and VPT's are tracked by Blue Triangle
• What basic implementation looks like
• What advanced implementation looks like

* “Virtual Page Turn” – When a site appears to load a new page but really only initiates AJAX activity and redraws the page. For example, clicking “add to cart” and watching the page redraw with the shopping cart displayed.

** “Single Page Application” – Web applications that load a single HTML page and dynamically update that page as the user interacts with the app. For example, sites that utilize Angular JS.

How we track AJAX calls

Blue Triangle’s JavaScript Tag can track AJAX calls where a portion of the URL changes when the call is made. Once we identify the call, we can name the "page" that populates populates if it is important to a customer’s journey through your site.

VPT’s differ in complexity, however. In some cases, the relationship between an AJAX call and VPT may be 1 to 1, in which case, no further instrumentation may be necessary. In this case, the Tag Architectural Overview document will give you all the information you need to implement our tag on your site.

Some VPT’s are more difficult to track. A single click can set off a series of AJAX calls that are linked together. In such cases, additional combing of these actions, including the time it takes the SPA to redraw the page, may be required. VPT’s can be measured by allowing developers to make a call to the API in the Blue Triangle JavaScript tag to designate the start, interactive, and end of the virtual page turn.

Basic Implementation

In this example, start and end of the AJAX call are tied together using the same Page Name and Traffic Segment.

Basic Example:

bttUT.start({
  pageName:"Product Detail Page", //Page Name
  txnName:"Production” //Traffic Segment
});
//AJAX call kicks off here after AJAX has completed fire end call
bttUT.end({
  pageName:"Product Detail Page", //Page Name
  txnName:" Production” //Traffic Segment
});

Advanced Implementation

This example includes an update call to let the API know when the application is interactive. This event is similar to DOM Interactive.

Advanced Example:

//Start the overall timer when the virtual page kicks off
bttUT.start({
  pageName: “Virtual Category Page”,
  txnName: “eCommerce”,
  pageGroup: “Virtual Pages”
});
//Update call to let the API know that the user can now interactive with the application
bttUT.update({
  pageName: “Virtual Category Page”,
  txnName: “eCommerce”,
  pageGroup: “Virtual Pages”,
  type:”domInt”
});
//Virtual page has completely finished loading
  bttUT.end({
    pageName: “Virtual Category Page”,
    txnName: “eCommerce”,
    pageGroup: “Virtual Pages”
});