Trigger custom page views

Download PDF

Normally you want to trigger a custom page view for Single Page Apps (SPAs) like React, Vue, and Angular. Because pages are not completely reloaded on navigation we need a way to track those navigations as page views.

For some analytics tools like Google Analytics you need to trigger a page view via their script. For Simple Analytics this is different.

With Simple Analytics there is no need to implement anything to detect page views in SPAs. It all works out of the box.

Technical explanation

We make this work by overwriting the native pushState-function of the browser. We also listen to the popstate event, so back and forward navigation in your app is collected as well.

// We check if the browser supports pushState
if (history.pushState && Event && dispatchEvent) {
  // We create a listener based on the original browser feature
  var stateListener = function (type) {
    var orig = history[type];
    return function () {
      var rv = orig.apply(this, arguments);
      var event = new Event(type);
      event.arguments = arguments;
      dispatchEvent(event);
      return rv;
    };
  };

  // We connect our own created a listener to the pushState feature
  history.pushState = stateListener("pushState");

  // Now we can listen for pushState events and keep the original feature of the browser working
  window.addEventListener("pushState", function () {
    // Here we trigger the page view
  });
}

You can read our source code on GitHub.

Use custom collection anyway

There might be situation where you don’t want to auto collect page views. When you add the data-auto-collect="false" attribute you can expose a function called sa_pageview. When you call this function, the script will send a page view with the path you give as a parameter. If you don’t give a path it will use window.location.pathname as a default. This only works with latest.js, not with our light script.

<script>
  function saLoaded() {
    // Always check for the function before using it.
    // The script might be blocked or not loaded for other reasons.
    if (window.sa_pageview) window.sa_pageview(window.location.pathname);
  }
</script>

<script
  async
  data-auto-collect="false"
  onload="saLoaded()"
  src="https://scripts.simpleanalyticscdn.com/latest.js"
></script>
<noscript
  ><img
    src="https://queue.simpleanalyticscdn.com/noscript.gif"
    alt=""
    referrerpolicy="no-referrer-when-downgrade"
/></noscript>

You can add metadata to the page view with a second argument:

window.sa_pageview("/pricing", { plan: "pro" });

If you call sa_pageview with the same path as the previous page view, we don’t send it again.

If you encounter issues, don’t hesitate to contact us via our support channels.