SPA & virtual pages

Automatic tracking is the default. If your router uses the browser history API, keep the normal script tag.

Automatic routes

The tracker records the initial page and path changes through history.pushState, history.replaceState and back/forward navigation. Replacing state or changing only the query string doesn't add another pageview.

Manual or virtual screens

1. Turn off automatic pageviews

   Add data-auto-pageviews="false" to your existing script tag. Don't install a second tracker.

   index.html

   Copy

   1

   2

   3

   4

   5

   6

   <script
     defer
     src="https://metricraven.com/js/script.js"
     data-site-id="YOUR_SITE_ID"
     data-auto-pageviews="false"
   ></script>

2. Call analytics.pageview from your router

   Call it when a screen opens. The helper queues calls until the tracker is ready.

   script.js

   Copy

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   // Call from your browser router or when a virtual screen opens.
   function trackPageview(path) {
     if (window.analytics?.pageview) {
       window.analytics.pageview(path);
     } else {
       window.analytics = window.analytics || { q: [] };
       window.analytics.q.push(["pageview", path]);
     }
   }
   trackPageview("/checkout/contact");
   // After the visitor advances to another virtual screen:
   // trackPageview("/checkout/payment");

3. Call it for every intended view

   Include the initial screen. Manual calls always record a new view, even for the same path. Passing no path records the current URL path.

You can also send manual views alongside automatic tracking for extra virtual screens. If you manually track every router change, disable automatic pageviews to avoid counting the same navigation twice.

Hash routers

For URLs like https://example.com/#/pricing or https://example.com/#!/checkout, add data-track-hash="true". It works with automatic or manual mode and with query stripping.

<script
  defer
  src="https://metricraven.com/js/script.js"
  data-site-id="YOUR_SITE_ID"
  data-track-hash="true"
  data-strip-query="true"
></script>

Use the full reported path, such as /#/pricing, in filters, exclusions and funnel page-prefix steps.