Single-page applications

In a single-page application, the page does not reload: the router changes the address with the history API. The script notices, and counts each address change as a page view, without a single line of code.

data-spa

Value	What counts as a page view
history (default)	history.pushState, history.replaceState and going back (popstate)
hash	the same, plus fragment changes (#/products), for fragment-based routers; the fragment is then kept in the path
off	page loads only

<script defer src="https://stats.example.com/a.js" data-site="s_arvordemo001" data-spa="hash"></script>

The same address is only counted once in a row: a replaceState that changes only the state, not the address, does not produce a page view. The referrer of an internal page view is the previous page of the application.

On each page view

When the address changes, the script closes the previous page (its engagement time, its scroll depth and the visibility time of its zones go with it), then opens the new one. Zones rendered by the application are found automatically.

The title sent is document.title at the time of the address change. If your application changes the title afterwards, prefer a manual page view.

Manual page views

With data-auto="false", the script counts no page view on its own: neither on load, nor on address changes. The application calls page() when it sees fit, for example once the title and the content are in place:

<script defer src="https://stats.example.com/a.js" data-site="s_arvordemo001" data-auto="false"></script>

// Vue Router
router.afterEach(() => nextTick(() => window.EodiaAnalytics?.page()))

// React Router
const location = useLocation()
useEffect(() => { window.EodiaAnalytics?.page() }, [location.pathname])

Next.js, Nuxt, SvelteKit

The routers of these frameworks go through history.pushState: the default mode is enough. Place the tag in the root layout, once:

// app/layout.jsx (Next.js)
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body>
        {children}
        <Script src="https://stats.example.com/a.js" data-site="s_arvordemo001" strategy="afterInteractive" />
      </body>
    </html>
  )
}

A single script

The script loads only once per page: a second load, from a component mounted twice, is ignored.

Prerendering

A page prerendered by the browser (<script type="speculationrules">) is only counted when it is actually displayed.