Les applications à page unique

Dans une application à page unique, la page ne se recharge pas : le routeur change l’adresse avec l’API history. Le script le voit, et compte chaque changement d’adresse comme une page vue, sans une ligne de code.

data-spa

Valeur	Ce qui compte comme une page vue
history (défaut)	history.pushState, history.replaceState et le retour arrière (popstate)
hash	la même chose, plus les changements de fragment (#/produits), pour les routeurs à fragment ; le fragment est alors gardé dans le chemin
off	les chargements de page seulement

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

Une même adresse n’est comptée qu’une fois de suite : un replaceState qui ne change que l’état, pas l’adresse, ne fait pas de page vue. Le référent d’une page vue interne est la page précédente de l’application.

À chaque page vue

Au changement d’adresse, le script clôt la page précédente — son temps d’engagement, sa profondeur de défilement, le temps de visibilité de ses zones partent avec elle —, puis ouvre la nouvelle. Les zones rendues par l’application sont trouvées d’elles-mêmes.

Le titre envoyé est document.title au moment du changement d’adresse. Si votre application change le titre après coup, préférez une page vue manuelle.

Les pages vues à la main

Avec data-auto="false", le script ne compte aucune page vue de lui-même : ni au chargement, ni aux changements d’adresse. L’application appelle page() quand elle le juge bon — une fois le titre et le contenu en place, par exemple :

<script defer src="https://stats.exemple.fr/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

Les routeurs de ces cadres passent par history.pushState : le mode par défaut suffit. Placez la balise dans la mise en page racine, une seule fois :

// 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.exemple.fr/a.js" data-site="s_arvordemo001" strategy="afterInteractive" />
      </body>
    </html>
  )
}

Un seul script

Le script ne se charge qu’une fois par page : un second chargement, par un composant monté deux fois, est ignoré.

Pré-rendu

Une page pré-rendue par le navigateur (<script type="speculationrules">) n’est comptée qu’au moment où elle est réellement affichée.