Single-page application support

Plausible comes with support for single-page applications built in. If your front-end router uses history.pushState, you can enable automatic SPA support in the script. That way, tracking history changes to trigger pageviews will work automatically in the background.

1. Automatic

When you include the Plausible script, you can add a call to trackPushState the end of the script tag as follows:

<script>
(function (w,d,s,o,f,js,fjs) {
w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
}(window, document, 'script', 'plausible', 'https://plausible.io/js/p.js'));
‚Äč
plausible('page')
plausible('trackPushState') // add this line
</script>\

Once this function is called, Plausible will automatically record a pageview each time history.pushState is called. For most modern front-end frameworks (e.g. React Router), this should just work out of the box.

2. Manual

If just tracking history.pushState doesn't work for your needs, you can fall back to using Javascript manually. Your code will need to detect when the page changes and invoke plausible('page') to record the pageview in Plausible.

If you still have problems getting your SPA to work with Plausible, please contact us and we'll figure it out.