Monitoring and Optimize CX and EX from SaaS platforms (such as ServiceNow, Workday, Salesforce or Office 365)

Introduction

This article documents how to utilize Blue Triangle to monitor and optimize user experience for SaaS platforms, such as ServiceNow, Workday, Salesforce or Office 365. If you have any additional questions, please reach out to Support or your BT representative. 

Full Example: Office 365 Add-In

function loadVirtualPage() {
  bttUT.start({ uniqueKey: "office-tab-abc" });

  let clientDataLoaded = false, chartsLoaded = false;

  fetch("/api/clientData").then(response => response.json()).then(data => {
    clientDataLoaded = true;
    checkIfDone();
  });

  fetch("/api/visualData").then(response => response.json()).then(data => {
    chartsLoaded = true;
    checkIfDone();
  });

  function checkIfDone() {
    if (clientDataLoaded && chartsLoaded) {
      bttUT.update({ uniqueKey: "office-tab-abc", type: "domInt" });
      renderCharts();
      bttUT.end({
        uniqueKey: "office-tab-abc",
        pageName: "Insights Tab",
        txnName: "Office Analytics"
      });
    }
  }
}

Summary

Tracking Virtual Page Views in SaaS Platforms with bttUT

When embedding performance tracking or virtual page load timing within SaaS platforms such as
Salesforce Lightning Components or Office 365 add-ins, the bttUT JavaScript methods--start(),
update(), and end()--enable precise measurement of virtual page transitions (also called virtual
turns).

This guide provides step-by-step instructions and implementation examples for using bttUT in SaaS
environments where pages often change content dynamically via AJAX or other JavaScript-driven
behaviors, rather than full-page reloads.

Why Use bttUT?

SaaS platforms rely heavily on single-page applications (SPAs) and asynchronous content loading.
This makes traditional page load tracking unreliable. bttUT allows developers to monitor when virtual
pages begin and finish rendering, giving more accurate performance metrics.

Glossary:

• Virtual Turn (VT): A user-initiated action that results in new content being loaded without a full page
  reload.

• uniqueKey: A required identifier when pageName or txnName aren't immediately available at the
  start.

• pageName: Logical name of the virtual page (e.g., "Sales Opportunity Detail").

• txnName: Segmenting label for traffic analysis (e.g., "CRM Users", "Admin").

Installing in a SaaS Environment:

For Salesforce (Lightning Web Components or Aura):

Place bttUT calls within:

• connectedCallback() or renderedCallback() in LWC

• Component event handlers for Aura

For Office 365 (Office.js add-ins):

Insert bttUT calls in:

• Event callbacks (e.g., Office.onReady)

• Button handlers or AJAX success callbacks inside your task pane or command add-in

Basic Implementation Using uniqueKey

1. Start Call
   Use this where the virtual page starts.

bttUT.start({ uniqueKey: "sales-oppty-123" });

2. Update Call
   Send this after significant DOM elements or AJAX content have loaded.

bttUT.update({ uniqueKey: "sales-oppty-123", type: "domInt" });

3. End Call
   Use when the virtual content is fully loaded and ready.

bttUT.end({
  uniqueKey: "sales-oppty-123",
  pageName: "Sales Opportunity Detail",
  txnName: "CRM Users"
});

Tips for SaaS Platform Integration:

• Ensure uniqueness: Use component IDs, record IDs, or timestamps in your uniqueKey.

• Avoid conflicts: If multiple virtual turns can occur on the same page, track each with a distinct uniqueKey.

• Event placement: Use appropriate lifecycle or async callbacks to align start, update, and end events with your page logic.