TKTrackkit
SPA demo

SPA Page Beta

Navigate here from Alpha or the hub. Each route gets its own viewport event thanks to useTrackKitRouteRefresh().

Back to hubGo to Page Alpha
Viewport

Tracked section on this route

Scroll this card into view or land on this page from another SPA route. You should see content_in_viewport with content.name set to SPA Page Beta Card.

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.