What is Client-Side Routing? Examples for Analytics

Client-side routing

Client-Side Routing dynamically updates URLs and content without full reloads, requiring manual tracking for accurate analytics in SPAs.

Why Client-Side Routing Matters in Analytics

• Accurate pageview tracking

  Manual triggering of pageview events on route changes ensures that each virtual page load is recorded, preventing undercounted or missing pageviews in analytics reports.

  • Spa frameworks:

    Libraries like React Router or Vue Router provide hooks (e.g., history.listen) to detect route changes.

  • Analytics callbacks:

    Use callbacks on route change to invoke analytics SDK methods (e.g., gtag(‘event’, ‘page_view’, {…})).

• Event-based insights

  Beyond pageviews, capturing route change events can surface navigation patterns, funnel drop-offs, and more granular user behavior.

  • Custom events:

    Fire custom events for significant route changes like checkout steps or content sections.

  • Funnel analysis:

    Model user flows by mapping route sequence events to identify friction points.

How Client-Side Routing Works

• History api routing

  Uses pushState and replaceState to modify the URL and listens to popstate events to render views.

  • Pushstate:

    Adds a new entry to the browser history stack with a specified URL.

  • Popstate event:

    Fired when the active history entry changes, such as when the user clicks back or forward.

• Hash-based routing

  Relies on URL fragments (e.g., #/path) and the hashchange event to detect navigations.

  • Hashchange event:

    Triggers when the fragment identifier of the URL has changed.

  • Fallback support:

    Widely compatible with older browsers that lack History API support.

Implementing Analytics for Client-Side Routing

• Plainsignal example

  Include the PlainSignal script and fire a pageview event on each route change.

  <link rel="preconnect" href="//eu.plainsignal.com/" crossorigin />
  <script defer data-do="yourwebsitedomain.com" data-id="0GQV1xmtzQQ" data-api="//eu.plainsignal.com" src="//cdn.plainsignal.com/PlainSignal-min.js"></script>
  

  Then in your routing logic:

  import { onRouteChange } from 'PlainSignal';
  onRouteChange((url) => {
    PlainSignal.trackPage({ path: url });
  });
  

  • Cookie-free tracking:

    PlainSignal leverages a fingerprinting-free approach to respect user privacy.

  • Simple api:

    Minimal setup with data-do and data-id attributes; use trackPage on route changes.

• Ga4 example

  Load the GA4 gtag.js script and configure pageview events on route changes.

  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXX');
  </script>
  

  In your router:

  router.afterEach((to) => {
    gtag('event', 'page_view', { page_path: to.fullPath });
  });
  

  • Global site tag:

    GA4 uses gtag(‘config’, …) for initial setup and gtag(‘event’) for custom events.

  • Spa integration:

    Call gtag(‘event’, ‘page_view’) after each route commit in frameworks like Vue or React.

Best Practices and Common Pitfalls

• Debounce route change events

  Prevent duplicate pageview events by debouncing rapid successive route changes (e.g., using a 100ms delay).

• Validate url formatting

  Ensure the page_path or path parameter is URL-encoded and consistent across environments.

• Single source of truth

  Centralize your analytics calls in a dedicated service or hook to avoid scattering tracking logic.

Related terms