{% set baseFontFamily = "Open Sans" %} /* Add the font family you wish to use. You may need to import it above. */

{% set headerFontFamily = "Open Sans" %} /* This affects only headers on the site. Add the font family you wish to use. You may need to import it above. */

{% set textColor = "#565656" %} /* This sets the universal color of dark text on the site */

{% set pageCenter = "1100px" %} /* This sets the width of the website */

{% set headerType = "fixed" %} /* To make this a fixed header, change the value to "fixed" - otherwise, set it to "static" */

{% set lightGreyColor = "#f7f7f7" %} /* This affects all grey background sections */

{% set baseFontWeight = "normal" %} /* More than likely, you will use one of these values (higher = bolder): 300, 400, 700, 900 */

{% set headerFontWeight = "normal" %} /* For Headers; More than likely, you will use one of these values (higher = bolder): 300, 400, 700, 900 */

{% set buttonRadius = '40px' %} /* "0" for square edges, "10px" for rounded edges, "40px" for pill shape; This will change all buttons */

After you have updated your stylesheet, make sure you turn this module off

Performance Monitoring - Best Practice Tip for Acoustic Experience Analytics (Tealeaf)

by Ethan Tye on July 21, 2020

The performance module of the Acoustic Experience Analytics UI Capture library can be configured to include a multitude of page performance metrics. These metrics can provide useful insights into your site’s technical performance.

To capture optional performance metrics, add them to the module the UIC and set their filters to ‘false.’


Performance Monitoring1


These performance options correspond to the available options of the W3C navigation timing specification. For more information, see http://www.w3.org/TR/navigation-timing/#sec-navigation-timing-interface.

More detailed documentation on UIC configuration can be found in the UI Capture reference: https://developer.goacoustic.com/acoustic-exp-analytics/docs/ui-capture-reference.

One configured, the metrics are visible in the Raw Data tab of session replay:

Performance Monitoring2


In order to track and report on the performance metrics, events must be configured in the Event Manager.

To start, create step attributes for each performance metric. The simplest way is to right click the name of the metric, then click ‘Create Step Attribute.’


Performance Monitoring3


If ‘Create Step Attribute’ is grayed out, that means that the step attribute is already configured in the event manager.

Once there are step attributes for each performance metric you wish to track, create an event for each metric. For each event, add a condition with the step attribute corresponding to the relevant performance metric and set it to ‘Step attribute found’ ‘Is true.’ Then, add the step attribute as the reference value. This value should be treated as Numeric rather than Text. If you wish to track value metrics such as Average, Min, Max, and Sum, ensure that the ‘+ Value metrics’ toggle is enabled.


Performance Monitoring4


Be sure to test each event to ensure it is working properly. By default, the unit for these metrics is milliseconds.

You may wish to track additional performance metrics which are calculated by taking the difference between two property values. For example, you could track Page Load Time by subtracting requestStart from loadEventStart. To do this, you will need to create an advanced event which contains the subtraction operation. Here is example code for an advanced event for Page Load Time:

Performance Monitoring5


Some other useful metrics include:

  • Network Duration: redirectStart - requestStart
  • Time to First Byte : responseStart - requestStart
  • Time to Last Byte: responseEnd - requestStart
  • Time to Interactive: domInteractive - requestStart
  • DOM Load Time: domComplete - domLoading
  • Page Load Time: loadEventStart - requestStart
  • TL Render Time: responseEnd - loadEventStart


When your events are ready, proceed to reporting:

Performance Monitoring6

Take advantage of dimensions, breakouts and calculated metrics for deeper insight into your page performance.


Recent Posts

Post by Topic

See all

Let's talk about gaining greater customer insight and improving digital experience for your customers.

Get Started