Capture page load time via Snapshots

🚧

We do not recommend using the Page Load Time Snapshot on a Single Page Application as navigation timing events do not update after changes to the History API.

It may be important for you to know how long it takes for your page to finish loading and how that affects user behavior. We are unable to capture page load time as an event property on a default pageview event because Heap captures a pageview event before the page finishes loading.

In this example you will be using Snapshots like a tag manager. When the page loads, we will wait until the relevant data is available, then send a track API call. Note that a Page load property will be created, but it will contain no data as the function does not return a value.

You want this to fire on every page, so attach this code to a "View Any Page" pageview event to trigger this JavaScript whenever a user views a page on your website. If you do not have such an event, define it as View page *.

Name: Page load

JavaScript Snapshot:

(function() {
  var interval = setInterval(sendTrack, 200);

  function sendTrack() {
    if (window.performance.getEntriesByType("navigation")[0].domComplete > 0) {
      var loadTime = Math.round(window.performance.getEntriesByType("navigation")[0].domComplete);
      heap.track('Page Load', {
        'Load Time': loadTime
      });
      clearInterval(interval);
    }
  }
})();

See how page load time affects your key funnels by starting your analysis with this event and grouping by load time!

📘

Navigation timing events do not update after changes to the History API. The above method will not work on Single Page Applications.