hypnagaga/src/components/Analytics/stories/docs/multipage.md
Jon McClure 38eed0c0ba docs
2024-06-14 13:13:42 +01:00

1.1 KiB

If you're using analytics to measure a multipage newsapp that uses client-side routing, then you may need to trigger analytics after virtual page navigation.

This component also exports a function you can call to register pageviews.

For example, here's how you can use SvelteKit's afterNavigate lifecycle to capture additional pageviews:

<script>
  import {
    Analytics,
    registerPageview,
  } from '@reuters-graphics/graphics-components';
  import { afterNavigate } from '$app/navigation';

  let isFirstPageview = true;

  afterNavigate(() => {
    // We shouldn't fire on initial page load because the Analytics component
    // already registers a reader's first pageview. After this component
    // has initially mounted, we can be sure that further navigation is virtual
    // and register pageviews using this function.
    if (!isFirstPageview) {
      registerPageview();
    } else {
      isFirstPageview = false;
    }
  });
</script>

<Analytics />