TKTrackkit
SPA demo

Test viewport tracking across client-side route changes.

This demo uses useTrackKitRouteRefresh() in the app provider. Navigate between pages below without a full reload and check for content_in_viewport events on each page.

How to test

Three quick steps

  1. Open DataLayer Checker in Chrome.
  2. Click Page Alpha or Page Beta below.
  3. Confirm a new content_in_viewport event fires for that page section.
Page AlphaPage Beta
SPA route refresh
// components/TrackKitRouteRefresh.tsx
"use client";

import { useTrackKitRouteRefresh } from "nextjs-trackkit/react";

export function TrackKitRouteRefresh() {
  useTrackKitRouteRefresh();
  return null;
}

// app/providers.tsx
"use client";

import { TrackKitProvider } from "nextjs-trackkit/react";
import { TrackKitRouteRefresh } from "@/components/TrackKitRouteRefresh";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <TrackKitProvider gtmId={process.env.NEXT_PUBLIC_GTM_ID}>
      <TrackKitRouteRefresh />
      {children}
    </TrackKitProvider>
  );
}

Live dataLayer

No events yet.
Why this hook exists

Without route refresh

Viewport elements added after the first client navigation may not be observed automatically. useTrackKitRouteRefresh() calls refreshDeclarativeTracking() whenever the pathname changes, so new data-track-view sections are registered on each SPA page.