Add event structured data, canonical URLs and referrer-based traffic sources

- Event pages emit schema.org Event JSON-LD (dates, venue, image,
  organizer, ZAR offers, sold-out status) for Google event results.
- Event pages, the events list and home page set a canonical URL so
  tagged and alias links don't split rankings.
- Funnel tracking falls back to the referring site (Facebook, Instagram,
  Google, ...) and fbclid/gclid when a link has no utm_source/src.
- Share and Save QR on the event page tag their links as share / qr.
- getServerSettings moves to lib/serverSettings.ts for reuse.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -7,6 +7,18 @@ and this project follows [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+## [1.31.0] - 2026-10-22
+
+### Added
+
+- The registration funnel's traffic source works without tagged links: visits from Facebook, Instagram, Google, X, LinkedIn and other sites are recognised from where the visitor came from (and Facebook's/Google's click ids). Links without a tag used to count as "direct". WhatsApp still only shows from tagged links (`?utm_source=whatsapp`), since it doesn't pass that on.
+- The event page's Share button shares the link tagged `?utm_source=share`, and Save QR encodes it tagged `?utm_source=qr`, so those visits show separately.
+- Event pages tell search engines about the event in Google's event format (schema.org `Event`): name, dates, venue, picture, organiser, ticket prices in Rand and whether it's sold out. Google can then show events with their date, venue and ticket link in search results and in its event listings. Contact-only events are listed without tickets.
+
+### Changed
+
+- Event pages, the events list and the home page tell search engines their one official address, so `?utm_source=…`, `?src=…` and alias links all count towards the same page in search rankings. Shared event links also carry the event's address.
+
 ## [1.30.1] - 2026-10-22
 
 ### Changed

frontend/src/app/events/[id]/ClientActions.tsx

@@ -6,6 +6,12 @@ import { API_BASE } from "@/lib/api";
 
 type Props = { event: { id: string; title: string; description?: string | null } };
 
+// The event's own address tagged with where the link was handed out, so visits from it
+// show under that source in the funnel report (the page's canonical drops the tag for SEO).
+function taggedEventUrl(source: string): string {
+    return `${window.location.origin}${window.location.pathname}?utm_source=${source}`;
+}
+
 export default function ClientActions({ event }: Props) {
     return (
         <div className="flex gap-2">
@@ -15,7 +21,7 @@ export default function ClientActions({ event }: Props) {
                         await navigator.share({
                             title: event.title,
                             text: event.description ?? undefined,
-                            url: window.location.href,
+                            url: taggedEventUrl("share"),
                         });
                     } catch (err) {
                         console.error("Error sharing:", err);
@@ -29,7 +35,7 @@ export default function ClientActions({ event }: Props) {
             <button
                 onClick={async () => {
                     try {
-                        const url = window.location.href;
+                        const url = taggedEventUrl("qr");
                         const qrDataUrl = await QRCode.toDataURL(url);
                         const link = document.createElement("a");
                         link.href = qrDataUrl;

frontend/src/app/events/[id]/page.tsx

@@ -54,6 +54,9 @@ import { ApiImage } from "@/components/shared/ApiImage";
 import { formatDateTimeRange } from "@/lib/date";
 import { BundleOffers } from "@/components/shared/BundleDeals";
 import type { PublicBundle } from "@/types";
+import { appUrl, appName } from "@/lib/siteConfig";
+import { getServerSettings } from "@/lib/serverSettings";
+import { eventJsonLd, jsonLdString } from "@/lib/eventSchema";
 
 // Tiered low-stock threshold: larger events use a smaller percentage.
 // Math.round avoids Math.ceil inflating the threshold (e.g. ceil(1.5)=2 made
@@ -147,10 +150,14 @@ export async function generateMetadata({ params }: { params: Promise<{ id: strin
   return {
     title: event.title,
     description,
+    // One address per event for search engines, however the page was reached
+    // (?utm_source=…, ?src=…, an alias link).
+    alternates: { canonical: `/events/${event.id}` },
     openGraph: {
       title: event.title,
       description,
       type: "website",
+      url: `/events/${event.id}`,
       ...(imageUrl ? { images: [{ url: imageUrl }] } : {}),
     },
     twitter: {
@@ -167,8 +174,18 @@ export default async function EventDetailPage({ params }: { params: Promise<{ id
   const event = await loadEvent(id);
   if (!event) notFound();
 
+  const settings = await getServerSettings();
+  const siteUrl = appUrl.replace(/\/$/, "");
+  const jsonLd = eventJsonLd(event, {
+    pageUrl: `${siteUrl}/events/${event.id}`,
+    imageUrl: event.picture ? resolveToApiOrigin(event.picture) : null,
+    organizerName: settings.org_name || appName,
+    siteUrl,
+  });
+
   return (
     <div className="min-h-screen flex flex-col">
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: jsonLdString(jsonLd) }} />
       <Navbar />
       <main className="flex-1 py-8 px-4 max-w-6xl mx-auto w-full">
         <FunnelTracker eventId={event.id} stage="view" />

frontend/src/app/events/page.tsx

@@ -10,6 +10,7 @@ export const revalidate = 60;
 export const metadata: Metadata = {
   title: "All Events",
   description: "Browse and register for upcoming events.",
+  alternates: { canonical: "/events" },
 };
 
 type Event = {

frontend/src/app/layout.tsx

@@ -2,40 +2,19 @@ import type { Metadata } from "next";
 import "./globals.css";
 import { AuthProvider } from "@/contexts/AuthContext";
 import { SiteSettingsProvider } from "@/contexts/SiteSettingsContext";
-import type { SiteSettings } from "@/contexts/SiteSettingsContext";
 import { ToastProvider } from "@/components/shared/ToastProvider";
 import { BannerBar } from "@/components/shared/BannerBar";
 import { SetupGuard } from "@/components/shared/SetupGuard";
 import HelpFab from "@/components/shared/HelpFab";
 import { CookieConsent } from "@/components/shared/CookieConsent";
 import { ImpersonationBanner } from "@/components/shared/ImpersonationBanner";
-import { API_BASE, resolveToApiOrigin } from "@/lib/api";
+import { resolveToApiOrigin } from "@/lib/api";
+import { getServerSettings } from "@/lib/serverSettings";
 import { buildThemeCssVars } from "@/lib/colorScale";
 import { appUrl } from "@/lib/siteConfig";
 
 const appName = process.env.NEXT_PUBLIC_APP_NAME || 'Cross Code';
 
-/**
- * Server-side settings fetch, shared by generateMetadata() and RootLayout()
- * below. Both call this with the identical URL + options so Next's per-request
- * fetch memoization dedupes them into a single network call. Degrades to `{}`
- * (static defaults everywhere downstream) if the backend is unreachable at
- * request time — intentional, not a bug: branding just isn't critical enough
- * to fail the whole page render over.
- */
-async function getServerSettings(): Promise<SiteSettings> {
-  // No API base configured: a relative fetch never settles during prerender and
-  // would time out every page, so skip straight to the defaults.
-  if (!API_BASE) return {};
-  try {
-    const res = await fetch(`${API_BASE}/api/settings`, { next: { revalidate: 60 } });
-    if (!res.ok) return {};
-    return await res.json();
-  } catch {
-    return {};
-  }
-}
-
 export async function generateMetadata(): Promise<Metadata> {
   const settings = await getServerSettings();
   const faviconUrl = settings.favicon_url ? resolveToApiOrigin(settings.favicon_url) : null;

frontend/src/app/page.tsx

@@ -5,8 +5,13 @@ import { Footer } from "@/components/layout/Footer";
 import { JoinUsButton } from "@/components/home/JoinUsButton";
 import { appName } from "@/lib/siteConfig";
 import { API_BASE } from "@/lib/api";
+import type { Metadata } from "next";
 import { Calendar, ArrowRight, CalendarCheck, Users, Heart, ShieldCheck } from "lucide-react";
 
+export const metadata: Metadata = {
+  alternates: { canonical: "/" },
+};
+
 type Event = {
   id: string;
   title: string;

frontend/src/content/help/reports.tsx

@@ -29,7 +29,7 @@ export const reportsHelpContent: HelpContent = {
               Preview your report, adjust filters, and choose how you want the data to appear.
             </GuideItem>
             <GuideItem icon={Download} title="Export or email" tone="amber">
-              Export your report to Excel, PDF, or send it by email or WhatsApp. Tip: select several events in the Feedback summary to compare their ratings (e.g. Camp 2025 vs Camp 2026). The Registration funnel shows where people drop off between viewing an event and paying, by source (short links and utm_source links) and device. It counts only visitors who allowed cookies.
+              Export your report to Excel, PDF, or send it by email or WhatsApp. Tip: select several events in the Feedback summary to compare their ratings (e.g. Camp 2025 vs Camp 2026). The Registration funnel shows where people drop off between viewing an event and paying, by source and device. The source comes from short links and utm_source links, else the site the visitor came from (Facebook, Instagram, Google…). The event page&apos;s Share and Save QR buttons tag their links as &quot;share&quot; and &quot;qr&quot;. WhatsApp doesn&apos;t say where a click came from, so add ?utm_source=whatsapp to links you post there, or they show as &quot;direct&quot;. It counts only visitors who allowed cookies.
             </GuideItem>
           </div>
         </div>

frontend/src/lib/analytics.ts

@@ -56,11 +56,45 @@ export function analyticsSessionId(): string | undefined {
   }
 }
 
-/** Where the visitor came from: ?utm_source=… or ?src=<short-link alias>. */
+// Referring sites we name ourselves; any other site is recorded by its hostname.
+const REFERRER_SOURCES: [RegExp, string][] = [
+  [/(^|\.)(facebook\.com|fb\.com|fb\.me)$/, "facebook"],
+  [/(^|\.)instagram\.com$/, "instagram"],
+  [/(^|\.)(whatsapp\.com|wa\.me)$/, "whatsapp"],
+  [/(^|\.)google\.[a-z.]+$/, "google"],
+  [/(^|\.)bing\.com$/, "bing"],
+  [/(^|\.)duckduckgo\.com$/, "duckduckgo"],
+  [/(^|\.)yahoo\.com$/, "yahoo"],
+  [/(^|\.)(twitter\.com|x\.com|t\.co)$/, "x"],
+  [/(^|\.)(linkedin\.com|lnkd\.in)$/, "linkedin"],
+  [/(^|\.)(youtube\.com|youtu\.be)$/, "youtube"],
+  [/(^|\.)tiktok\.com$/, "tiktok"],
+];
+
+/** The referring site as a source label; undefined when there's none or it's this site. */
+function sourceFromReferrer(): string | undefined {
+  try {
+    if (!document.referrer) return undefined;
+    const host = new URL(document.referrer).hostname.toLowerCase();
+    if (!host || host === window.location.hostname.toLowerCase()) return undefined;
+    for (const [re, label] of REFERRER_SOURCES) if (re.test(host)) return label;
+    return host.replace(/^www\./, "");
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Where the visitor came from: ?utm_source=… or ?src=<short-link alias> when the link
+ * says so, else the referring site (Facebook, Google, …), else Facebook's/Google's click
+ * ids. WhatsApp sends no referrer, so it's only known from a tagged link.
+ */
 function sourceFromUrl(): string | undefined {
   try {
     const p = new URLSearchParams(window.location.search);
-    return p.get("utm_source") || p.get("src") || undefined;
+    return p.get("utm_source") || p.get("src") || sourceFromReferrer()
+      || (p.has("fbclid") ? "facebook" : undefined)
+      || (p.has("gclid") ? "google" : undefined);
   } catch {
     return undefined;
   }

frontend/src/lib/eventSchema.ts

@@ -0,0 +1,85 @@
+// schema.org Event data for an event page, so Google can show the event with its date,
+// venue and ticket link (event rich results / "events near me").
+// Checked with https://search.google.com/test/rich-results
+
+type SchemaOption = {
+  price: number;
+  stockLimit?: number;
+  availableCount?: number;
+  earlyBirdTiers?: { deadline: string; price: number }[];
+  variants?: { price: number | null; stockLimit?: number; availableCount?: number }[];
+};
+
+export type SchemaEvent = {
+  id: string;
+  title: string;
+  description?: string;
+  startDate: string;
+  endDate: string;
+  goLiveAt?: string;
+  picture?: string;
+  location?: string | null;
+  requiresRegistration?: boolean;
+  eventOptions?: SchemaOption[];
+};
+
+/** Today's price of each ticket (early-bird when one is open, else the variant/base price). */
+function currentPrices(options: SchemaOption[], now: Date): number[] {
+  const prices: number[] = [];
+  for (const o of options) {
+    if (o.variants && o.variants.length > 0) {
+      for (const v of o.variants) prices.push(v.price ?? o.price);
+      continue;
+    }
+    const open = (o.earlyBirdTiers || []).filter((t) => now < new Date(t.deadline)).map((t) => t.price);
+    prices.push(open.length > 0 ? Math.min(...open) : o.price);
+  }
+  return prices.filter((p) => Number.isFinite(p));
+}
+
+export function eventJsonLd(
+  event: SchemaEvent,
+  { pageUrl, imageUrl, organizerName, siteUrl }: { pageUrl: string; imageUrl: string | null; organizerName: string; siteUrl: string },
+) {
+  const now = new Date();
+  const options = event.eventOptions || [];
+  const limited = options.filter((o) => (o.stockLimit ?? 0) > 0);
+  const soldOut = limited.length > 0 && limited.every((o) => o.availableCount !== undefined && o.availableCount <= 0);
+
+  // Contact-only events (requiresRegistration false) have no tickets to offer.
+  let offers: Record<string, unknown> | undefined;
+  if (event.requiresRegistration !== false) {
+    const prices = options.length > 0 ? currentPrices(options, now) : [0];
+    const low = Math.min(...prices);
+    const high = Math.max(...prices);
+    offers = {
+      "@type": low === high ? "Offer" : "AggregateOffer",
+      ...(low === high ? { price: low.toFixed(2) } : { lowPrice: low.toFixed(2), highPrice: high.toFixed(2) }),
+      priceCurrency: "ZAR",
+      availability: soldOut ? "https://schema.org/SoldOut" : "https://schema.org/InStock",
+      url: `${siteUrl}/register/${event.id}`,
+      ...(event.goLiveAt ? { validFrom: new Date(event.goLiveAt).toISOString() } : {}),
+    };
+  }
+
+  return {
+    "@context": "https://schema.org",
+    "@type": "Event",
+    name: event.title,
+    ...(event.description ? { description: event.description.slice(0, 5000) } : {}),
+    startDate: new Date(event.startDate).toISOString(),
+    endDate: new Date(event.endDate).toISOString(),
+    eventStatus: "https://schema.org/EventScheduled",
+    eventAttendanceMode: "https://schema.org/OfflineEventAttendanceMode",
+    ...(event.location ? { location: { "@type": "Place", name: event.location, address: event.location } } : {}),
+    ...(imageUrl ? { image: [imageUrl] } : {}),
+    url: pageUrl,
+    organizer: { "@type": "Organization", name: organizerName, url: siteUrl },
+    ...(offers ? { offers } : {}),
+  };
+}
+
+/** JSON for a <script type="application/ld+json">, safe against "</script>" in event text. */
+export function jsonLdString(data: unknown): string {
+  return JSON.stringify(data).replace(/</g, "\\u003c");
+}

frontend/src/lib/serverSettings.ts

@@ -0,0 +1,24 @@
+import type { SiteSettings } from "@/contexts/SiteSettingsContext";
+import { API_BASE } from "@/lib/api";
+
+/**
+ * Server-side settings fetch, shared by the root layout (generateMetadata and
+ * RootLayout) and server pages that need branding, e.g. the event page's organizer.
+ * Every caller uses the identical URL + options, so Next's per-request fetch
+ * memoization dedupes them into a single network call. Degrades to `{}`
+ * (static defaults everywhere downstream) if the backend is unreachable at
+ * request time — intentional, not a bug: branding just isn't critical enough
+ * to fail the whole page render over.
+ */
+export async function getServerSettings(): Promise<SiteSettings> {
+  // No API base configured: a relative fetch never settles during prerender and
+  // would time out every page, so skip straight to the defaults.
+  if (!API_BASE) return {};
+  try {
+    const res = await fetch(`${API_BASE}/api/settings`, { next: { revalidate: 60 } });
+    if (!res.ok) return {};
+    return await res.json();
+  } catch {
+    return {};
+  }
+}