feat(web): track Segment client navigations (fixes NV-8755)

src/components/scripts.tsx

@@ -18,6 +18,7 @@ function Scripts() {
             !function(){var i="analytics",analytics=window[i]=window[i]||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","screen","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register"];analytics.factory=function(e){return function(){if(window[i].initialized)return window[i][e].apply(window[i],arguments);var n=Array.prototype.slice.call(arguments);if(["track","screen","alias","group","page","identify"].indexOf(e)>-1){var c=document.querySelector("link[rel='canonical']");n.push({__t:"bpc",c:c&&c.getAttribute("href")||void 0,p:location.pathname,u:location.href,s:location.search,t:document.title,r:document.referrer})}n.unshift(e);analytics.push(n);return analytics}};for(var n=0;n<analytics.methods.length;n++){var key=analytics.methods[n];analytics[key]=analytics.factory(key)}analytics.load=function(key,n){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.setAttribute("data-global-segment-analytics-key",i);t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r);analytics._loadOptions=n};analytics._writeKey="YOUR_WRITE_KEY";;analytics.SNIPPET_VERSION="5.2.1";
             analytics.load("${SEGMENT_WRITE_KEY}");
             analytics.page();
+            window.__segmentLastTrackedPathname=location.pathname;
             }}();
         `,
         }}

src/components/segment-page-tracking.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { useEffect } from "react"
+import { usePathname } from "next/navigation"
+
+declare global {
+  interface Window {
+    __segmentLastTrackedPathname?: string
+    analytics?: {
+      page: () => void
+    }
+  }
+}
+
+export function SegmentPageTracking() {
+  const pathname = usePathname()
+
+  useEffect(() => {
+    const analytics = window.analytics
+    if (!analytics || pathname === window.__segmentLastTrackedPathname) return
+
+    window.__segmentLastTrackedPathname = pathname
+    analytics.page()
+  }, [pathname])
+
+  return null
+}

src/components/website-layout-shell.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react"
+import { Suspense, type ReactNode } from "react"
 import { Inter } from "next/font/google"
 import { draftMode } from "next/headers"
 import Script from "next/script"
@@ -9,9 +9,9 @@ import { absoluteUrl } from "@/lib/site-url"
 import { cn } from "@/lib/utils"
 import DemoBookingTracker from "@/components/demo-booking-tracker"
 import Fonts from "@/components/fonts"
-import MixpanelTracking from "@/components/mixpanel-tracking"
 import PreviewWarning from "@/components/preview-warning"
 import Scripts, { GTM_ID } from "@/components/scripts"
+import { SegmentPageTracking } from "@/components/segment-page-tracking"
 import UtmForwarder from "@/components/utm-forwarder"
 
 const inter = Inter({
@@ -54,7 +54,9 @@ async function WebsiteLayoutShell({
           bodyClassName
         )}
       >
-        <MixpanelTracking />
+        <Suspense fallback={null}>
+          <SegmentPageTracking />
+        </Suspense>
         <UtmForwarder />
         <DemoBookingTracker />
         <Providers>