@carlonicora/nextjs-jsonapi 3.24.2 → 3.26.0

package/src/features/analytics/components/AnalyticsJourneyContainer.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import { useLocale, useTranslations } from "next-intl";
+import { useEffect, useMemo, useState } from "react";
+import { DetailField, RoundPageContainer } from "../../../components";
+import { SharedProvider } from "../../../contexts";
+import { usePageUrlGenerator } from "../../../hooks";
+import { BreadcrumbItemData } from "../../../interfaces";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../../shadcnui";
+import type { AnalyticsPageViewInterface } from "../data/analytics-page-view.interface";
+import type { AnalyticsSessionInterface } from "../data/analytics-session.interface";
+import { AnalyticsAdminService } from "../data/AnalyticsAdminService";
+import { AnalyticsSessionsTable } from "./AnalyticsSessionsTable";
+
+/** Default route of the dashboard the breadcrumb links back to. */
+const ANALYTICS_ADMIN_PAGE_URL = "/administration/analytics";
+
+/**
+ * How far back the visitor's other sessions are looked up: the 13-month raw
+ * retention, which sits inside the API's 400-day maximum range.
+ */
+const OTHER_SESSIONS_WINDOW_DAYS = 395;
+
+type Props = {
+  sessionId: string;
+  /** Route of the dashboard; the journey pages live under `${pageUrl}/sessions`. */
+  pageUrl?: string;
+};
+
+/**
+ * One session, followed page by page.
+ *
+ * The attribution header says where the visitor came from, the page-view table
+ * replays the session in order with the time spent before each step, and the
+ * visitor's other sessions close the page. Unlike the dashboard this page has no
+ * filters, so it fetches on mount without a provider and publishes its own
+ * breadcrumb back to the dashboard.
+ */
+export function AnalyticsJourneyContainer({ sessionId, pageUrl = ANALYTICS_ADMIN_PAGE_URL }: Props) {
+  const t = useTranslations();
+  const locale = useLocale();
+  const generateUrl = usePageUrlGenerator();
+
+  const [session, setSession] = useState<AnalyticsSessionInterface | undefined>(undefined);
+  const [pageViews, setPageViews] = useState<AnalyticsPageViewInterface[]>([]);
+  const [otherSessions, setOtherSessions] = useState<AnalyticsSessionInterface[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Out-of-order guard, as in AnalyticsAdminContext: a new sessionId must not
+    // be overwritten by the slower response for the previous one.
+    let cancelled = false;
+
+    setIsLoading(true);
+    setError(null);
+
+    Promise.all([
+      AnalyticsAdminService.getSession({ id: sessionId }),
+      AnalyticsAdminService.getSessionPageViews({ sessionId }),
+    ])
+      .then(async ([nextSession, nextPageViews]) => {
+        if (cancelled) return;
+        setSession(nextSession);
+        setPageViews(nextPageViews ?? []);
+
+        const to = new Date();
+        const from = new Date(to.getTime() - OTHER_SESSIONS_WINDOW_DAYS * 24 * 60 * 60 * 1000);
+        const visitorSessions = await AnalyticsAdminService.getSessions({
+          from: from.toISOString(),
+          to: to.toISOString(),
+          section: "all",
+          visitorId: nextSession.visitorId,
+        });
+        if (cancelled) return;
+        setOtherSessions((visitorSessions ?? []).filter((other) => other.id !== sessionId));
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        console.error("Failed to load the analytics journey:", err);
+        setError(err instanceof Error ? err.message : String(err));
+      })
+      .finally(() => {
+        if (cancelled) return;
+        setIsLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [sessionId]);
+
+  const dateTime = useMemo(
+    () => new Intl.DateTimeFormat(locale, { dateStyle: "short", timeStyle: "medium" }),
+    [locale],
+  );
+
+  /** Time since the previous page view, in the largest whole unit that fits. */
+  const formatGap = (milliseconds: number): string => {
+    const seconds = Math.max(0, Math.round(milliseconds / 1000));
+    if (seconds < 60) return unit(locale, "second", seconds);
+    if (seconds < 3600) return unit(locale, "minute", Math.round(seconds / 60));
+    return unit(locale, "hour", Math.round(seconds / 3600));
+  };
+
+  const breadcrumb: BreadcrumbItemData[] = [
+    { name: t("analytics.admin.title"), href: generateUrl({ page: pageUrl }) },
+    { name: t("analytics.admin.panels.journey") },
+  ];
+
+  const title = { type: t("analytics.admin.panels.journey") };
+
+  const renderBody = () => {
+    if (error) {
+      return (
+        <RoundPageContainer fullWidth forceHeader>
+          <div className="p-4">
+            <Card>
+              <CardContent>
+                <p className="text-destructive text-xs/relaxed">{error}</p>
+              </CardContent>
+            </Card>
+          </div>
+        </RoundPageContainer>
+      );
+    }
+
+    // Loading renders nothing in the body, as on the dashboard.
+    if (isLoading || !session) return <RoundPageContainer fullWidth forceHeader />;
+
+    const source = [session.utmSource ?? session.referrerHost, session.utmMedium, session.utmCampaign]
+      .filter(Boolean)
+      .join(" / ");
+
+    return (
+      <RoundPageContainer fullWidth forceHeader>
+        <div className="flex w-full flex-col gap-4 p-4">
+          <Card data-testid="analytics-journey-attribution">
+            <CardContent className="flex flex-col gap-3">
+              <div className="flex flex-wrap items-center gap-2">
+                {session.user ? (
+                  <span className="flex flex-col">
+                    <span className="text-sm">{session.user.name}</span>
+                    <span className="text-muted-foreground text-xs">{session.user.email}</span>
+                  </span>
+                ) : (
+                  <Badge variant="softGray">{t("analytics.admin.anonymous")}</Badge>
+                )}
+                {session.consented ? (
+                  <Badge variant="softGreen">{t("analytics.admin.consented")}</Badge>
+                ) : (
+                  <Badge variant="softGray">{t("analytics.admin.not_consented")}</Badge>
+                )}
+              </div>
+              <div className="grid gap-3 sm:grid-cols-3">
+                <DetailField label={t("analytics.admin.columns.started")} value={dateTime.format(session.startedAt)} />
+                <DetailField label={t("analytics.admin.columns.source")} value={source} />
+                <DetailField label={t("analytics.admin.columns.landing")} value={session.landingRoute} />
+                <DetailField label={t("analytics.admin.columns.device")} value={session.deviceType} />
+                <DetailField
+                  label={t("analytics.admin.columns.visitor")}
+                  value={<span className="tabular-nums">{session.visitorId}</span>}
+                />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>{t("analytics.admin.columns.pages")}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {pageViews.length === 0 ? (
+                <p className="text-muted-foreground text-sm">{t("analytics.admin.no_data")}</p>
+              ) : (
+                // The package's <Table> wraps itself in an `overflow-x-clip`
+                // container — hence the child override, so wide rows scroll.
+                <div className="overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead className="text-xs font-medium">{t("analytics.admin.columns.time")}</TableHead>
+                        <TableHead className="text-end text-xs font-medium">
+                          {t("analytics.admin.columns.gap")}
+                        </TableHead>
+                        <TableHead className="text-xs font-medium">{t("analytics.admin.columns.path")}</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {pageViews.map((pageView, index) => {
+                        const previous = index > 0 ? pageViews[index - 1] : undefined;
+                        return (
+                          <TableRow key={pageView.id} data-testid={`analytics-pageview-row-${pageView.id}`}>
+                            <TableCell className="text-xs tabular-nums">
+                              {dateTime.format(pageView.createdAt)}
+                            </TableCell>
+                            <TableCell className="text-end text-xs tabular-nums">
+                              {previous ? formatGap(pageView.createdAt.getTime() - previous.createdAt.getTime()) : "—"}
+                            </TableCell>
+                            <TableCell className="text-xs">{pageView.path}</TableCell>
+                          </TableRow>
+                        );
+                      })}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>{t("analytics.admin.panels.other_sessions")}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <AnalyticsSessionsTable
+                rows={otherSessions}
+                sessionPageUrl={`${pageUrl}/sessions`}
+                onLoadMore={() => undefined}
+                hasMore={false}
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </RoundPageContainer>
+    );
+  };
+
+  return <SharedProvider value={{ breadcrumbs: breadcrumb, title }}>{renderBody()}</SharedProvider>;
+}
+
+function unit(locale: string, name: "second" | "minute" | "hour", value: number): string {
+  return new Intl.NumberFormat(locale, { style: "unit", unit: name, unitDisplay: "short" }).format(value);
+}

package/src/features/analytics/components/AnalyticsJourneyPageContainer.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { AnalyticsJourneyContainer } from "./AnalyticsJourneyContainer";
+
+type Props = {
+  sessionId: string;
+  /** Route the breadcrumb links back to. Defaults to the container's default. */
+  pageUrl?: string;
+};
+
+/** The single-session journey page as one client component. */
+export function AnalyticsJourneyPageContainer({ sessionId, pageUrl }: Props) {
+  return <AnalyticsJourneyContainer sessionId={sessionId} pageUrl={pageUrl} />;
+}

package/src/features/analytics/components/AnalyticsSessionsTable.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useLocale, useTranslations } from "next-intl";
+import { useMemo } from "react";
+import { usePageUrlGenerator } from "../../../hooks";
+import { Badge, Button, Link, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../shadcnui";
+import { useUsageFormatters } from "../../tokenusage/lib/formatters";
+import type { AnalyticsSessionInterface } from "../data/analytics-session.interface";
+
+type Props = {
+  rows: AnalyticsSessionInterface[];
+  /** Base route of the journey page; each row links to `${sessionPageUrl}/${id}`. */
+  sessionPageUrl: string;
+  onLoadMore: () => void;
+  hasMore: boolean;
+};
+
+/** How many trailing characters of the visitor id identify an anonymous visitor. */
+const VISITOR_SUFFIX_LENGTH = 6;
+
+/**
+ * The sessions in the selected window, newest first as the backend returns them.
+ *
+ * Paginated by cursor: the owning context holds the next-page reference and
+ * appends on `onLoadMore`, so this table stays stateless. A session linked to a
+ * signed-in user shows the user; any other shows a short visitor suffix, enough
+ * to tell two anonymous visitors apart without displaying the whole id.
+ */
+export function AnalyticsSessionsTable({ rows, sessionPageUrl, onLoadMore, hasMore }: Props) {
+  const t = useTranslations();
+  const locale = useLocale();
+  const generateUrl = usePageUrlGenerator();
+  const { decimal } = useUsageFormatters();
+
+  const dateTime = useMemo(() => new Intl.DateTimeFormat(locale, { dateStyle: "short", timeStyle: "short" }), [locale]);
+
+  if (rows.length === 0) {
+    return <p className="text-muted-foreground text-sm">{t("analytics.admin.no_data")}</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* The package's <Table> wraps itself in an `overflow-x-clip` container,
+          which would swallow the overflow before this scroller ever saw it —
+          hence the child override. Wide tables must scroll, never widen the page. */}
+      <div className="overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="text-xs font-medium">{t("analytics.admin.columns.started")}</TableHead>
+              <TableHead className="text-xs font-medium">{t("analytics.admin.columns.visitor")}</TableHead>
+              <TableHead className="text-xs font-medium">{t("analytics.admin.columns.source")}</TableHead>
+              <TableHead className="text-xs font-medium">{t("analytics.admin.columns.landing")}</TableHead>
+              <TableHead className="text-end text-xs font-medium">{t("analytics.admin.columns.pages")}</TableHead>
+              <TableHead className="text-xs font-medium">{t("analytics.admin.columns.device")}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.map((row) => {
+              const source = [row.utmSource ?? row.referrerHost, row.utmMedium].filter(Boolean).join(" / ");
+
+              return (
+                <TableRow key={row.id} data-testid={`analytics-session-row-${row.id}`}>
+                  <TableCell className="text-xs tabular-nums">
+                    <Link
+                      href={generateUrl({ page: sessionPageUrl, id: row.id })}
+                      data-testid={`analytics-session-link-${row.id}`}
+                    >
+                      {dateTime.format(row.startedAt)}
+                    </Link>
+                  </TableCell>
+                  <TableCell className="text-xs">
+                    {row.user ? (
+                      <span className="flex flex-col">
+                        <span>{row.user.name}</span>
+                        <span className="text-muted-foreground text-xs">{row.user.email}</span>
+                      </span>
+                    ) : (
+                      <span className="flex items-center gap-2">
+                        <Badge variant="softGray">{t("analytics.admin.anonymous")}</Badge>
+                        <span className="text-muted-foreground text-xs tabular-nums">
+                          {row.visitorId.slice(-VISITOR_SUFFIX_LENGTH)}
+                        </span>
+                      </span>
+                    )}
+                  </TableCell>
+                  <TableCell className="text-xs">{source}</TableCell>
+                  <TableCell className="text-xs">{row.landingRoute}</TableCell>
+                  <TableCell className="text-end text-xs tabular-nums">{decimal(row.pageViews, 0)}</TableCell>
+                  <TableCell className="text-muted-foreground text-xs">{row.deviceType}</TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+
+      {hasMore && (
+        <div className="flex justify-center">
+          <Button type="button" variant="outline" size="sm" onClick={onLoadMore}>
+            {t("analytics.admin.load_more")}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/features/analytics/components/AnalyticsTimelineChart.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useTheme } from "next-themes";
+import { useMemo } from "react";
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "../../../shadcnui";
+import { useUsageFormatters } from "../../tokenusage/lib/formatters";
+import { ChartMode, seriesColor } from "../../tokenusage/lib/palette";
+import { AnalyticsTimelineInterface } from "../data/analytics-timeline.interface";
+
+/** The two fixed series, in palette order: slot 0 visitors, slot 1 page views. */
+const SERIES = ["visitors", "pageViews"] as const;
+
+type AnalyticsTimelineChartProps = {
+  rows: AnalyticsTimelineInterface[];
+  className?: string;
+};
+
+type TimelineBucket = { bucket: string; visitors: number; pageViews: number };
+
+/**
+ * The bucket key, derived with UTC getters.
+ *
+ * The backend field is `type: "date"` — a calendar day with no time — and the
+ * model parses the `YYYY-MM-DD` wire value with `new Date(...)`, which lands on
+ * UTC midnight. Reading it back with local getters would shift the bucket a day
+ * early west of UTC, so the key (and every label built from it) stays in UTC.
+ */
+const bucketKey = (date: Date): string => {
+  const y = date.getUTCFullYear();
+  const m = `${date.getUTCMonth() + 1}`.padStart(2, "0");
+  const d = `${date.getUTCDate()}`.padStart(2, "0");
+  return `${y}-${m}-${d}`;
+};
+
+/**
+ * The granularity the data was bucketed at, inferred from the spacing between
+ * consecutive buckets. The backend chooses the granularity and the rows carry
+ * the consequence, so the axis reads it off the data rather than taking a prop
+ * that could disagree with what was actually fetched.
+ */
+const inferGranularity = (buckets: string[]): "day" | "week" | "month" => {
+  if (buckets.length < 2) return "day";
+
+  const dayMs = 24 * 60 * 60 * 1000;
+  let smallestGap = Number.POSITIVE_INFINITY;
+  for (let i = 1; i < buckets.length; i += 1) {
+    const gap = (Date.parse(buckets[i]) - Date.parse(buckets[i - 1])) / dayMs;
+    if (gap > 0 && gap < smallestGap) smallestGap = gap;
+  }
+
+  if (smallestGap >= 28) return "month";
+  if (smallestGap >= 7) return "week";
+  return "day";
+};
+
+/**
+ * Traffic over time as a grouped bar chart: visitors and page views per bucket.
+ *
+ * The backend returns one row per bucket per section; the chart sums the
+ * sections into one entry per bucket. The two series measure different things,
+ * so they sit side by side rather than stacked.
+ *
+ * Colour does an IDENTITY job here — each bar is a series, not a magnitude — so
+ * it draws the fixed categorical order from the token-usage palette (slots 0 and
+ * 1). The palette's light-mode validator run carries a sub-3:1 contrast WARN,
+ * which obliges a relief channel: the legend and the value-carrying tooltip
+ * below are what make the fills readable.
+ */
+export function AnalyticsTimelineChart({ rows, className }: AnalyticsTimelineChartProps) {
+  const t = useTranslations();
+  const { compact, bucketDate, decimal } = useUsageFormatters();
+  const { resolvedTheme } = useTheme();
+  const mode: ChartMode = resolvedTheme === "dark" ? "dark" : "light";
+
+  const chartData = useMemo(() => {
+    const byBucket = new Map<string, TimelineBucket>();
+    for (const row of rows) {
+      const key = bucketKey(row.bucket);
+      let entry = byBucket.get(key);
+      if (!entry) {
+        entry = { bucket: key, visitors: 0, pageViews: 0 };
+        byBucket.set(key, entry);
+      }
+      entry.visitors += row.visitors;
+      entry.pageViews += row.pageViews;
+    }
+    return [...byBucket.values()].sort((a, b) => a.bucket.localeCompare(b.bucket));
+  }, [rows]);
+
+  const chartConfig = useMemo(
+    () =>
+      ({
+        visitors: { label: t("analytics.admin.series.visitors") },
+        pageViews: { label: t("analytics.admin.series.page_views") },
+      }) as ChartConfig,
+    [t],
+  );
+
+  if (chartData.length === 0) {
+    return (
+      <p className={className ? `text-muted-foreground text-sm ${className}` : "text-muted-foreground text-sm"}>
+        {t("analytics.admin.no_data")}
+      </p>
+    );
+  }
+
+  const granularity = inferGranularity(chartData.map((entry) => entry.bucket));
+
+  return (
+    // The chart is a coordinate system, not prose: recharts lays the axes and the
+    // bars out left-to-right, so the whole chart stays an LTR island even under
+    // dir="rtl". Only the labels inside it are translated.
+    // rtl-ok: deliberate LTR island (chart)
+    <div className={className} dir="ltr">
+      {/* The pivot, exposed for assertions and for screen readers that would
+          otherwise get nothing from the SVG. */}
+      <span className="sr-only" data-testid="analytics-timeline-data">
+        {JSON.stringify(chartData)}
+      </span>
+
+      <ChartContainer config={chartConfig} className="aspect-auto h-72 w-full">
+        <BarChart accessibilityLayer data={chartData} margin={{ top: 8, right: 8, bottom: 0, left: 0 }}>
+          <CartesianGrid vertical={false} />
+          <XAxis
+            dataKey="bucket"
+            tickLine={false}
+            axisLine={false}
+            tickMargin={8}
+            minTickGap={16}
+            tickFormatter={(value: string) => bucketDate(value, granularity)}
+          />
+          <YAxis
+            tickLine={false}
+            axisLine={false}
+            tickMargin={8}
+            width={48}
+            tickFormatter={(value: number) => compact(value)}
+          />
+          <ChartTooltip
+            content={
+              <ChartTooltipContent
+                labelFormatter={(value) => bucketDate(String(value), granularity)}
+                valueFormatter={(value) => decimal(Number(value), 0)}
+              />
+            }
+          />
+          <ChartLegend content={<ChartLegendContent />} />
+          {SERIES.map((series, index) => (
+            <Bar
+              key={series}
+              dataKey={series}
+              maxBarSize={28}
+              fill={seriesColor(index, mode)}
+              // A 2px stroke in the surface colour is the gap between
+              // neighbouring bars — the palette's own secondary-encoding
+              // channel, not a border.
+              stroke="var(--background)"
+              strokeWidth={2}
+              radius={[4, 4, 0, 0]}
+            />
+          ))}
+        </BarChart>
+      </ChartContainer>
+    </div>
+  );
+}

package/src/features/analytics/components/AnalyticsTracker.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useEffect, useRef } from "react";
+import { v4 } from "uuid";
+import { AnalyticsService } from "../data/AnalyticsService";
+import type { AnalyticsEventInput } from "../data/analytics.types";
+import { readUtm } from "../lib/utm";
+import { clearVisitorCookie, ensureVisitorCookie } from "../lib/visitorCookie";
+
+// The dashboard itself is never tracked, so administrators reading it do not inflate it.
+const EXCLUDED_PREFIX = "/administration/analytics";
+
+// The API rejects longer referrers.
+const MAX_REFERRER_LENGTH = 2048;
+
+type Attribution = Pick<
+  AnalyticsEventInput,
+  "referrer" | "utmSource" | "utmMedium" | "utmCampaign" | "utmTerm" | "utmContent"
+>;
+
+type AnalyticsTrackerProps = {
+  hasConsent: boolean;
+  resolveSection: (pathname: string) => "public" | "app";
+  sensitivePrefixes?: string[];
+};
+
+/**
+ * Returns the referrer only when it comes from another host, so internal
+ * navigation is never stored as a traffic source.
+ */
+function readExternalReferrer(): string | undefined {
+  if (!document.referrer) return undefined;
+  try {
+    if (new URL(document.referrer).host === window.location.host) return undefined;
+  } catch {
+    return undefined;
+  }
+  return document.referrer.slice(0, MAX_REFERRER_LENGTH);
+}
+
+/**
+ * Replaces every segment after a sensitive prefix with ":code", so single-use
+ * account codes in the URL never leave the browser.
+ */
+function maskSensitivePath(path: string, sensitivePrefixes: string[] | undefined): string {
+  if (!sensitivePrefixes) return path;
+
+  for (const prefix of sensitivePrefixes) {
+    if (path === prefix) return path;
+    if (path.startsWith(`${prefix}/`)) {
+      const segments = path
+        .slice(prefix.length + 1)
+        .split("/")
+        .filter((segment) => segment.length > 0);
+      return [prefix, ...segments.map(() => ":code")].join("/");
+    }
+  }
+
+  return path;
+}
+
+export function AnalyticsTracker({ hasConsent, resolveSection, sensitivePrefixes }: AnalyticsTrackerProps): null {
+  const pathname = usePathname();
+  const lastPath = useRef<string | null>(null);
+  const lastConsent = useRef<boolean>(false);
+  const attribution = useRef<Attribution | null>(null);
+
+  useEffect(() => {
+    if (!hasConsent) clearVisitorCookie();
+
+    if (!pathname) return;
+    if (typeof navigator !== "undefined" && navigator.webdriver) return;
+
+    const path = pathname.split(/[?#]/)[0] || "/";
+    if (path.startsWith(EXCLUDED_PREFIX)) return;
+
+    // One event per distinct path. The same path is sent again only when consent
+    // was just granted, so the processor starts a new visitor on the cookie id.
+    const isNewPath = lastPath.current !== path;
+    const consentJustGranted = hasConsent && !lastConsent.current;
+    lastConsent.current = hasConsent;
+    if (!isNewPath && !consentJustGranted) return;
+    lastPath.current = path;
+
+    const sentPath = maskSensitivePath(path, sensitivePrefixes);
+
+    const input: AnalyticsEventInput = {
+      id: v4(),
+      path: sentPath,
+      section: resolveSection(sentPath),
+      screenWidth: window.innerWidth,
+    };
+
+    if (hasConsent) input.visitorId = ensureVisitorCookie();
+
+    // The first event of the page load carries the attribution. The event sent
+    // because consent was just granted carries it again, so the session opened
+    // on the cookie id keeps the source the visitor arrived from.
+    const isFirstEvent = attribution.current === null;
+    if (isFirstEvent) {
+      const referrer = readExternalReferrer();
+      attribution.current = { ...(referrer ? { referrer } : {}), ...readUtm(window.location.search) };
+    }
+    if (isFirstEvent || consentJustGranted) Object.assign(input, attribution.current);
+
+    // AnalyticsService.track never rejects: it logs and swallows its own failures.
+    void AnalyticsService.track(input);
+  }, [pathname, hasConsent, resolveSection, sensitivePrefixes]);
+
+  return null;
+}