diff --git a/fern/apis/fdr/definition/docs/v1/commons/commons.yml b/fern/apis/fdr/definition/docs/v1/commons/commons.yml
index a340d465a3..1e2d037538 100644
--- a/fern/apis/fdr/definition/docs/v1/commons/commons.yml
+++ b/fern/apis/fdr/definition/docs/v1/commons/commons.yml
@@ -68,6 +68,7 @@ types:
       fathom: optional<FathomConfig>
       clearbit: optional<ClearBitConfig>
       heap: optional<HeapConfig>
+      datadog: optional<DatadogRumConfig>
 
   SegmentConfig:
     properties:
@@ -136,6 +137,12 @@ types:
     properties:
       appId: string
 
+  DatadogRumConfig:
+    properties:
+      applicationId: string
+      clientToken: string
+      site: optional<string>
+
   DocsLayoutConfig:
     properties:
       pageWidth: optional<PageWidthSizeConfig>
diff --git a/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/AnalyticsConfig.ts b/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/AnalyticsConfig.ts
index 4dc3e9971d..b186569ba0 100644
--- a/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/AnalyticsConfig.ts
+++ b/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/AnalyticsConfig.ts
@@ -21,4 +21,5 @@ export interface AnalyticsConfig {
     fathom: FernRegistry.docs.v1.commons.FathomConfig | undefined;
     clearbit: FernRegistry.docs.v1.commons.ClearBitConfig | undefined;
     heap: FernRegistry.docs.v1.commons.HeapConfig | undefined;
+    datadog: FernRegistry.docs.v1.commons.DatadogRumConfig | undefined;
 }
diff --git a/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/DatadogRumConfig.ts b/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/DatadogRumConfig.ts
new file mode 100644
index 0000000000..104ac3d227
--- /dev/null
+++ b/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/DatadogRumConfig.ts
@@ -0,0 +1,9 @@
+/**
+ * This file was auto-generated by Fern from our API Definition.
+ */
+
+export interface DatadogRumConfig {
+    applicationId: string;
+    clientToken: string;
+    site: string | undefined;
+}
diff --git a/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.ts b/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.ts
index 2d510b2e0e..23ca48691a 100644
--- a/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.ts
+++ b/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.ts
@@ -19,6 +19,7 @@ export * from "./PlausibleConfig";
 export * from "./FathomConfig";
 export * from "./ClearBitConfig";
 export * from "./HeapConfig";
+export * from "./DatadogRumConfig";
 export * from "./DocsLayoutConfig";
 export * from "./SearchbarPlacement";
 export * from "./TabsPlacement";
diff --git a/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/write/client/Client.ts b/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/write/client/Client.ts
index 272d624b68..197c7fe10b 100644
--- a/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/write/client/Client.ts
+++ b/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/write/client/Client.ts
@@ -350,6 +350,13 @@ export class Write {
      *                     },
      *                     heap: {
      *                         appId: "string"
+     *                     },
+     *                     datadog: {
+     *                         applicationId: "string",
+     *                         clientToken: "string",
+     *                         site: {
+     *                             "key": "value"
+     *                         }
      *                     }
      *                 },
      *                 integrations: {
diff --git a/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/write/client/requests/RegisterDocsRequest.ts b/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/write/client/requests/RegisterDocsRequest.ts
index dbdc2d136f..d1bae3c218 100644
--- a/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/write/client/requests/RegisterDocsRequest.ts
+++ b/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v1/resources/write/client/requests/RegisterDocsRequest.ts
@@ -269,6 +269,13 @@ import * as FernRegistry from "../../../../../../../../index";
  *                     },
  *                     heap: {
  *                         appId: "string"
+ *                     },
+ *                     datadog: {
+ *                         applicationId: "string",
+ *                         clientToken: "string",
+ *                         site: {
+ *                             "key": "value"
+ *                         }
  *                     }
  *                 },
  *                 integrations: {
diff --git a/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v2/resources/write/client/Client.ts b/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v2/resources/write/client/Client.ts
index 6f79369d80..5f26273d35 100644
--- a/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v2/resources/write/client/Client.ts
+++ b/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v2/resources/write/client/Client.ts
@@ -454,6 +454,13 @@ export class Write {
      *                     },
      *                     heap: {
      *                         appId: "string"
+     *                     },
+     *                     datadog: {
+     *                         applicationId: "string",
+     *                         clientToken: "string",
+     *                         site: {
+     *                             "key": "value"
+     *                         }
      *                     }
      *                 },
      *                 integrations: {
diff --git a/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v2/resources/write/client/requests/RegisterDocsRequest.ts b/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v2/resources/write/client/requests/RegisterDocsRequest.ts
index dbdc2d136f..d1bae3c218 100644
--- a/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v2/resources/write/client/requests/RegisterDocsRequest.ts
+++ b/packages/fdr-sdk/src/client/generated/api/resources/docs/resources/v2/resources/write/client/requests/RegisterDocsRequest.ts
@@ -269,6 +269,13 @@ import * as FernRegistry from "../../../../../../../../index";
  *                     },
  *                     heap: {
  *                         appId: "string"
+ *                     },
+ *                     datadog: {
+ *                         applicationId: "string",
+ *                         clientToken: "string",
+ *                         site: {
+ *                             "key": "value"
+ *                         }
  *                     }
  *                 },
  *                 integrations: {
diff --git a/packages/parsers/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/AnalyticsConfig.ts b/packages/parsers/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/AnalyticsConfig.ts
index 4dc3e9971d..b186569ba0 100644
--- a/packages/parsers/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/AnalyticsConfig.ts
+++ b/packages/parsers/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/AnalyticsConfig.ts
@@ -21,4 +21,5 @@ export interface AnalyticsConfig {
     fathom: FernRegistry.docs.v1.commons.FathomConfig | undefined;
     clearbit: FernRegistry.docs.v1.commons.ClearBitConfig | undefined;
     heap: FernRegistry.docs.v1.commons.HeapConfig | undefined;
+    datadog: FernRegistry.docs.v1.commons.DatadogRumConfig | undefined;
 }
diff --git a/packages/parsers/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/DatadogRumConfig.ts b/packages/parsers/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/DatadogRumConfig.ts
new file mode 100644
index 0000000000..104ac3d227
--- /dev/null
+++ b/packages/parsers/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/DatadogRumConfig.ts
@@ -0,0 +1,9 @@
+/**
+ * This file was auto-generated by Fern from our API Definition.
+ */
+
+export interface DatadogRumConfig {
+    applicationId: string;
+    clientToken: string;
+    site: string | undefined;
+}
diff --git a/packages/parsers/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.ts b/packages/parsers/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.ts
index 2d510b2e0e..23ca48691a 100644
--- a/packages/parsers/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.ts
+++ b/packages/parsers/src/client/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.ts
@@ -19,6 +19,7 @@ export * from "./PlausibleConfig";
 export * from "./FathomConfig";
 export * from "./ClearBitConfig";
 export * from "./HeapConfig";
+export * from "./DatadogRumConfig";
 export * from "./DocsLayoutConfig";
 export * from "./SearchbarPlacement";
 export * from "./TabsPlacement";
diff --git a/packages/ui/analytics/package.json b/packages/ui/analytics/package.json
new file mode 100644
index 0000000000..7e90d97527
--- /dev/null
+++ b/packages/ui/analytics/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "@fern-docs/analytics",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./provider": {
+      "types": "./src/provider.tsx",
+      "default": "./dist/provider.js"
+    }
+  },
+  "scripts": {
+    "compile": "tsc --build",
+    "clean": "rm -rf ./dist && tsc --build --clean",
+    "format": "prettier --write --ignore-unknown --ignore-path ../../shared/.prettierignore \"**\"",
+    "format:check": "prettier --check --ignore-unknown --ignore-path ../../shared/.prettierignore \"**\"",
+    "lint": "eslint --max-warnings 0 src --ext .ts --resolve-plugins-relative-to ../../",
+    "dev": "tsc --watch tsconfig.json"
+  },
+  "peerDependencies": {
+    "next": "^14",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@fern-api/fdr-sdk": "workspace:*",
+    "@fern-platform/configs": "workspace:*",
+    "@types/mixpanel-browser": "^2.50.2",
+    "@types/node": "^18.7.18",
+    "@types/react": "^18",
+    "@types/react-dom": "^18.3.0",
+    "depcheck": "^1.4.3",
+    "eslint": "^8.56.0",
+    "next": "^14",
+    "organize-imports-cli": "^0.10.0",
+    "prettier": "^3.3.2",
+    "react": "^18",
+    "react-dom": "^18",
+    "typescript": "5.4.3"
+  },
+  "dependencies": {
+    "@amplitude/analytics-browser": "^2.11.10",
+    "@datadog/browser-rum": "^5.34.0",
+    "@hotjar/browser": "^1.0.9",
+    "@segment/snippet": "^5.2.1",
+    "fathom-client": "^3.7.2",
+    "logrocket": "^9.0.0",
+    "mixpanel-browser": "^2.57.1",
+    "posthog-js": "^1.154.5",
+    "zod": "^3.24.1"
+  }
+}
diff --git a/packages/ui/analytics/src/amplitude.tsx b/packages/ui/analytics/src/amplitude.tsx
new file mode 100644
index 0000000000..ec86287aea
--- /dev/null
+++ b/packages/ui/analytics/src/amplitude.tsx
@@ -0,0 +1,22 @@
+import { init, track } from "@amplitude/analytics-browser";
+import { ReactNode, useEffect } from "react";
+import { useSafeListenTrackEvents } from "./use-track";
+
+export default function AmplitudeScript({ apiKey }: { apiKey: string }): ReactNode {
+    useEffect(() => {
+        try {
+            init(apiKey, undefined, {
+                autocapture: true,
+            });
+        } catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn("Error initializing Amplitude", e);
+        }
+    }, [apiKey]);
+
+    useSafeListenTrackEvents(({ event, properties }) => {
+        track(event, properties);
+    });
+
+    return false;
+}
diff --git a/packages/ui/analytics/src/clearbit.tsx b/packages/ui/analytics/src/clearbit.tsx
new file mode 100644
index 0000000000..dcade6d1bd
--- /dev/null
+++ b/packages/ui/analytics/src/clearbit.tsx
@@ -0,0 +1,13 @@
+import Script from "next/script";
+import { ReactNode } from "react";
+
+// TODO: send events to clearbit
+export default function ClearbitScript({ apiKey }: { apiKey: string }): ReactNode {
+    return (
+        <Script
+            id="clearbit"
+            src={`https://tag.clearbitscripts.com/v1/${apiKey}/tags.js`}
+            referrerPolicy="strict-origin-when-cross-origin"
+        />
+    );
+}
diff --git a/packages/ui/analytics/src/datadog-rum.tsx b/packages/ui/analytics/src/datadog-rum.tsx
new file mode 100644
index 0000000000..3be707e596
--- /dev/null
+++ b/packages/ui/analytics/src/datadog-rum.tsx
@@ -0,0 +1,26 @@
+import { datadogRum, type RumInitConfiguration } from "@datadog/browser-rum";
+import { ReactNode, useEffect } from "react";
+import { useSafeListenTrackEvents } from "./use-track";
+import { useUserInfo } from "./user";
+
+export default function DatadogRumScript(props: RumInitConfiguration): ReactNode {
+    useEffect(() => {
+        datadogRum.init(props);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const user = useUserInfo();
+    useEffect(() => {
+        if (user) {
+            datadogRum.setUser({ email: user.email, name: user.name });
+        } else {
+            datadogRum.clearUser();
+        }
+    }, [user]);
+
+    useSafeListenTrackEvents(({ event, properties }) => {
+        datadogRum.addAction(event, properties);
+    });
+
+    return false;
+}
diff --git a/packages/ui/analytics/src/fathom.tsx b/packages/ui/analytics/src/fathom.tsx
new file mode 100644
index 0000000000..443d2ac9d2
--- /dev/null
+++ b/packages/ui/analytics/src/fathom.tsx
@@ -0,0 +1,20 @@
+import * as Fathom from "fathom-client";
+import { ReactNode, useEffect } from "react";
+import { useRouteChangeComplete } from "./use-route-changed";
+import { useSafeListenTrackEvents } from "./use-track";
+
+export default function FathomScript({ siteId }: { siteId: string }): ReactNode {
+    useEffect(() => {
+        Fathom.load(siteId);
+    }, [siteId]);
+
+    useRouteChangeComplete(() => {
+        Fathom.trackPageview();
+    });
+
+    useSafeListenTrackEvents(({ event, properties }) => {
+        Fathom.trackEvent(event, properties);
+    });
+
+    return false;
+}
diff --git a/packages/ui/app/src/analytics/FullstoryScript.tsx b/packages/ui/analytics/src/fullstory.tsx
similarity index 63%
rename from packages/ui/app/src/analytics/FullstoryScript.tsx
rename to packages/ui/analytics/src/fullstory.tsx
index 850c1db57d..86a5620ada 100644
--- a/packages/ui/app/src/analytics/FullstoryScript.tsx
+++ b/packages/ui/analytics/src/fullstory.tsx
@@ -1,19 +1,38 @@
-import { DocsV1Read } from "@fern-api/fdr-sdk";
 import Script from "next/script";
-import { ReactElement } from "react";
+import { ReactNode, useEffect } from "react";
+import { useSafeListenTrackEvents } from "./use-track";
+import { useUserInfo } from "./user";
 
-export function FullstoryScript(props: { config?: DocsV1Read.FullStoryAnalyticsConfig }): ReactElement {
-    if (!props.config) {
-        return <></>;
-    }
+export default function FullstoryScript(props: { orgId: string }): ReactNode {
+    useSafeListenTrackEvents(({ event, properties }) => {
+        if (typeof window.FS === "function") {
+            // https://developer.fullstory.com/browser/capture-events/analytics-events/
+            window.FS("trackEvent", { name: event, properties });
+        }
+    });
 
-    return <Script id="init-fullstory" dangerouslySetInnerHTML={{ __html: initFullstory(props.config) }} />;
+    const user = useUserInfo();
+    useEffect(() => {
+        if (user && user.email && typeof window.FS === "function") {
+            // https://developer.fullstory.com/browser/identification/set-user-properties/
+            window.FS("setProperties", {
+                type: "user",
+                properties: {
+                    displayName: user.name,
+                    email: user.email,
+                },
+            });
+        }
+    }, [user]);
+
+    return <Script id="fullstory" type="text/javascript" dangerouslySetInnerHTML={{ __html: initFullstory(props) }} />;
 }
 
-function initFullstory(config: DocsV1Read.FullStoryAnalyticsConfig) {
-    return `window['_fs_host'] = 'fullstory.com';
+function initFullstory({ orgId }: { orgId: string }) {
+    return `window['_fs_debug'] = false;
+window['_fs_host'] = 'fullstory.com';
 window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
-window['_fs_org'] = '${config.orgId}';
+window['_fs_org'] = '${orgId}';
 window['_fs_namespace'] = 'FS';
 !function(m,n,e,t,l,o,g,y){var s,f,a=function(h){
 return!(h in m)||(m.console&&m.console.log&&m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].'),!1)}(e)
diff --git a/packages/ui/analytics/src/ga.tsx b/packages/ui/analytics/src/ga.tsx
new file mode 100644
index 0000000000..618b2ad0ec
--- /dev/null
+++ b/packages/ui/analytics/src/ga.tsx
@@ -0,0 +1,61 @@
+import Head from "next/head";
+import Script from "next/script";
+import { ReactNode, useEffect } from "react";
+import { useSafeListenTrackEvents } from "./use-track";
+
+type GAParams = {
+    gaId: string;
+    dataLayerName?: string;
+    debugMode?: boolean;
+    nonce?: string;
+};
+
+export default function GoogleAnalytics(props: GAParams): ReactNode {
+    const { gaId, debugMode, dataLayerName = "dataLayer", nonce } = props;
+    useEffect(() => {
+        // performance.mark is being used as a feature use signal. While it is traditionally used for performance
+        // benchmarking it is low overhead and thus considered safe to use in production and it is a widely available
+        // existing API.
+        // The performance measurement will be handled by Chrome Aurora
+
+        performance.mark("mark_feature_usage", {
+            detail: {
+                feature: "next-third-parties-ga",
+            },
+        });
+    }, []);
+
+    useSafeListenTrackEvents(({ event, properties }) => {
+        sendGAEvent(dataLayerName, { event, properties });
+    });
+
+    return (
+        <>
+            <Head>
+                <script
+                    key="ga"
+                    id="_next-ga-init"
+                    dangerouslySetInnerHTML={{
+                        __html: `
+          window['${dataLayerName}'] = window['${dataLayerName}'] || [];
+          function gtag(){window['${dataLayerName}'].push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', '${gaId}' ${debugMode ? ",{ 'debug_mode': true }" : ""});`,
+                    }}
+                    nonce={nonce}
+                />
+            </Head>
+            <Script id="_next-ga" src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`} nonce={nonce} />
+        </>
+    );
+}
+
+function sendGAEvent(dataLayer: string, ...args: unknown[]): void {
+    if (window[dataLayer]) {
+        window[dataLayer].push(...args);
+    } else {
+        // eslint-disable-next-line no-console
+        console.warn(`GA dataLayer ${dataLayer} does not exist`);
+    }
+}
diff --git a/packages/ui/analytics/src/gtm.tsx b/packages/ui/analytics/src/gtm.tsx
new file mode 100644
index 0000000000..31a559418d
--- /dev/null
+++ b/packages/ui/analytics/src/gtm.tsx
@@ -0,0 +1,65 @@
+import Head from "next/head";
+import { ReactNode, useEffect } from "react";
+import { useSafeListenTrackEvents } from "./use-track";
+
+type GTMParams = {
+    gtmId: string;
+    dataLayerName?: string;
+    nonce?: string;
+};
+
+export default function GoogleTagManager(props: GTMParams): ReactNode {
+    const { gtmId, dataLayerName = "dataLayer", nonce } = props;
+
+    useEffect(() => {
+        // performance.mark is being used as a feature use signal. While it is traditionally used for performance
+        // benchmarking it is low overhead and thus considered safe to use in production and it is a widely available
+        // existing API.
+        // The performance measurement will be handled by Chrome Aurora
+
+        performance.mark("mark_feature_usage", {
+            detail: {
+                feature: "next-third-parties-gtm",
+            },
+        });
+    }, []);
+
+    useSafeListenTrackEvents(({ event, properties }) => {
+        sendGTMEvent(dataLayerName, { event, properties });
+    });
+
+    return (
+        <>
+            <Head>
+                <script
+                    key="ga"
+                    dangerouslySetInnerHTML={{
+                        __html: `
+(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='${dataLayerName}'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','${dataLayerName}','${gtmId}');
+`,
+                    }}
+                    nonce={nonce}
+                />
+            </Head>
+            <noscript nonce={nonce}>
+                <iframe
+                    src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`}
+                    height="0"
+                    width="0"
+                    style={{ display: "none", visibility: "hidden" }}
+                    nonce={nonce}
+                />
+            </noscript>
+        </>
+    );
+}
+
+export const sendGTMEvent = (dataLayer: string, data: unknown): void => {
+    // define dataLayer so we can still queue up events before GTM init
+    window[dataLayer] = window[dataLayer] || [];
+    window[dataLayer].push(data);
+};
diff --git a/packages/ui/analytics/src/heap.tsx b/packages/ui/analytics/src/heap.tsx
new file mode 100644
index 0000000000..71fb8ec1fc
--- /dev/null
+++ b/packages/ui/analytics/src/heap.tsx
@@ -0,0 +1,37 @@
+import Script from "next/script";
+import { ReactNode, useEffect } from "react";
+import { useSafeListenTrackEvents } from "./use-track";
+import { useUserInfo } from "./user";
+
+export default function HeapScript({ appId }: { appId: string }): ReactNode {
+    useSafeListenTrackEvents(({ event, properties }) => {
+        if (window.heap) {
+            window.heap.track(event, properties);
+        }
+    });
+
+    const user = useUserInfo();
+    useEffect(() => {
+        if (!window.heap) {
+            return;
+        }
+        try {
+            if (user && user.email) {
+                window.heap.identify(user.email);
+            } else {
+                window.heap.resetIdentity();
+            }
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.warn("Error identifying user with Heap", error);
+        }
+    }, [user]);
+    return <Script id="heap" type="text/javascript" dangerouslySetInnerHTML={{ __html: initHeapScript(appId) }} />;
+}
+
+function initHeapScript(appId: string) {
+    return `
+window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};   
+heap.load("${appId}"); 
+`;
+}
diff --git a/packages/ui/analytics/src/hotjar.tsx b/packages/ui/analytics/src/hotjar.tsx
new file mode 100644
index 0000000000..94eec08d99
--- /dev/null
+++ b/packages/ui/analytics/src/hotjar.tsx
@@ -0,0 +1,36 @@
+import Hotjar from "@hotjar/browser";
+import { ReactNode, useEffect } from "react";
+import { useRouteChangeComplete } from "./use-route-changed";
+import { useSafeListenTrackEvents } from "./use-track";
+import { useUserInfo } from "./user";
+
+export default function HotjarScript({ id, version }: { id: string; version: string }): ReactNode {
+    useEffect(() => {
+        Hotjar.init(Number(id), Number(version));
+    }, [id, version]);
+
+    const user = useUserInfo();
+    useEffect(() => {
+        if (user) {
+            const userInfo: Record<string, string> = {};
+            if (user.name) {
+                userInfo.name = user.name;
+            }
+            if (user.email) {
+                userInfo.email = user.email;
+            }
+            Hotjar.identify(null, userInfo);
+        }
+    }, [user]);
+
+    useRouteChangeComplete((route) => {
+        Hotjar.stateChange(route);
+    });
+
+    // note: hotjar doesn't support properties :facepalm:
+    useSafeListenTrackEvents(({ event }) => {
+        Hotjar.event(event);
+    });
+
+    return false;
+}
diff --git a/packages/ui/analytics/src/index.ts b/packages/ui/analytics/src/index.ts
new file mode 100644
index 0000000000..b42d0a7159
--- /dev/null
+++ b/packages/ui/analytics/src/index.ts
@@ -0,0 +1,7 @@
+declare global {
+    interface Window {
+        [key: string]: any;
+    }
+}
+
+export { track, trackInternal } from "./track";
diff --git a/packages/ui/analytics/src/intercom.tsx b/packages/ui/analytics/src/intercom.tsx
new file mode 100644
index 0000000000..923e306c76
--- /dev/null
+++ b/packages/ui/analytics/src/intercom.tsx
@@ -0,0 +1,70 @@
+import Script from "next/script";
+import { ReactElement, useEffect } from "react";
+import { useSafeListenTrackEvents } from "./use-track";
+import { useUserInfo } from "./user";
+
+// copied from @intercom/messenger-js-sdk
+interface IntercomSettings {
+    app_id: string;
+    api_base?: string;
+    email?: string;
+    created_at?: number;
+    name?: string;
+    user_id?: string;
+    phone?: string;
+    unsubscribed_from_emails?: boolean;
+    language_override?: string;
+    utm_campaign?: string;
+    utm_content?: string;
+    utm_medium?: string;
+    utm_source?: string;
+    utm_term?: string;
+    avatar?: any;
+    user_hash?: string;
+    company?: any;
+    companies?: [any];
+    page_title?: string;
+    custom_launcher_selector?: string;
+    alignment?: string;
+    vertical_padding?: number;
+    horizontal_padding?: number;
+    hide_default_launcher?: boolean;
+    session_duration?: number;
+    action_color?: string;
+    background_color?: string;
+    installation_type?: string;
+}
+
+export function IntercomScript(props: IntercomSettings): ReactElement {
+    useIntercomInitializer(props);
+    return <Script id="intercom" dangerouslySetInnerHTML={{ __html: widgetBootstrapScript(props.app_id) }} />;
+}
+
+/**
+ * If the given intercom config is defined, intialize the Intercom script via the official npm sdk
+ * in a `useEffect`.
+ *
+ * @param config
+ */
+function useIntercomInitializer(config: IntercomSettings): void {
+    const user = useUserInfo();
+
+    useEffect(() => {
+        try {
+            if (window.Intercom) {
+                window.Intercom("boot", { ...config, email: user?.email, name: user?.name } satisfies IntercomSettings);
+            }
+        } catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn("Error initializing Intercom", e);
+        }
+    }, [config, user?.email, user?.name]);
+
+    useSafeListenTrackEvents(({ event, properties }) => {
+        window.Intercom("trackEvent", event, properties);
+    });
+}
+
+function widgetBootstrapScript(appId: string) {
+    return `(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/${appId}';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();`;
+}
diff --git a/packages/ui/analytics/src/koala.tsx b/packages/ui/analytics/src/koala.tsx
new file mode 100644
index 0000000000..13ee6efa18
--- /dev/null
+++ b/packages/ui/analytics/src/koala.tsx
@@ -0,0 +1,53 @@
+import Script from "next/script";
+import { ReactNode, useEffect } from "react";
+import { useSafeListenTrackEvents } from "./use-track";
+import { useUserInfo } from "./user";
+
+export default function KoalaScript({ apiKey }: { apiKey: string }): ReactNode {
+    const user = useUserInfo();
+
+    useEffect(() => {
+        if (user && user.email && window.ko) {
+            window.ko.identify(user.email);
+        }
+    }, [user]);
+
+    useSafeListenTrackEvents(({ event, properties }) => {
+        if (window.ko) {
+            window.ko.track(event, properties);
+        }
+    });
+
+    return <Script id="koala" type="text/javascript" dangerouslySetInnerHTML={{ __html: initKoala(apiKey) }} />;
+}
+
+function initKoala(apiKey: string): string {
+    return `
+  !(function (t) {
+    if (window.ko) return;
+    (window.ko = []),
+      [
+        "identify",
+        "track",
+        "removeListeners",
+        "open",
+        "on",
+        "off",
+        "qualify",
+        "ready",
+      ].forEach(function (t) {
+        ko[t] = function () {
+          var n = [].slice.call(arguments);
+          return n.unshift(t), ko.push(n), ko;
+        };
+      });
+    var n = document.createElement("script");
+    (n.async = !0),
+      n.setAttribute(
+        "src",
+        "https://cdn.getkoala.com/v1/${apiKey}/sdk.js"
+      ),
+      (document.body || document.head).appendChild(n);
+  })();
+    `;
+}
diff --git a/packages/ui/analytics/src/logrocket.tsx b/packages/ui/analytics/src/logrocket.tsx
new file mode 100644
index 0000000000..17e083244d
--- /dev/null
+++ b/packages/ui/analytics/src/logrocket.tsx
@@ -0,0 +1,15 @@
+import LogRocket from "logrocket";
+import { ReactNode, useEffect } from "react";
+import { useSafeListenTrackEvents } from "./use-track";
+
+export default function LogRocketScript({ appId }: { appId: string }): ReactNode {
+    useEffect(() => {
+        LogRocket.init(appId);
+    }, [appId]);
+
+    useSafeListenTrackEvents(({ event, properties }) => {
+        LogRocket.track(event, properties as any);
+    });
+
+    return false;
+}
diff --git a/packages/ui/analytics/src/mixpanel.tsx b/packages/ui/analytics/src/mixpanel.tsx
new file mode 100644
index 0000000000..5a922751ad
--- /dev/null
+++ b/packages/ui/analytics/src/mixpanel.tsx
@@ -0,0 +1,25 @@
+import mixpanel from "mixpanel-browser";
+import { ReactNode, useEffect } from "react";
+import { useSafeListenTrackEvents } from "./use-track";
+import { useUserInfo } from "./user";
+
+export default function MixpanelScript({ token }: { token: string }): ReactNode {
+    useEffect(() => {
+        mixpanel.init(token, {
+            track_pageview: true,
+        });
+    }, [token]);
+
+    const user = useUserInfo();
+    useEffect(() => {
+        if (user?.email) {
+            mixpanel.identify(user.email);
+        }
+    }, [user]);
+
+    useSafeListenTrackEvents(({ event, properties }) => {
+        mixpanel.track(event, properties);
+    });
+
+    return null;
+}
diff --git a/packages/ui/analytics/src/pirsch.tsx b/packages/ui/analytics/src/pirsch.tsx
new file mode 100644
index 0000000000..01a09aedbe
--- /dev/null
+++ b/packages/ui/analytics/src/pirsch.tsx
@@ -0,0 +1,7 @@
+import Script from "next/script";
+import { ReactNode } from "react";
+
+// TODO: send events to pirsch
+export default function PirschScript({ identificationCode }: { identificationCode: string }): ReactNode {
+    return <Script defer src="https://api.pirsch.io/pa.js" id="pianjs" data-code={identificationCode} />;
+}
diff --git a/packages/ui/analytics/src/plausible.tsx b/packages/ui/analytics/src/plausible.tsx
new file mode 100644
index 0000000000..53dd76e229
--- /dev/null
+++ b/packages/ui/analytics/src/plausible.tsx
@@ -0,0 +1,7 @@
+import Script from "next/script";
+import { ReactNode } from "react";
+
+// TODO: send events to plausible
+export default function PlausibleScript({ domain }: { domain: string }): ReactNode {
+    return <Script id="plausible" defer src="https://plausible.io/js/script.js" data-domain={domain} />;
+}
diff --git a/packages/ui/analytics/src/posthog-customer.tsx b/packages/ui/analytics/src/posthog-customer.tsx
new file mode 100644
index 0000000000..f5938c3bc2
--- /dev/null
+++ b/packages/ui/analytics/src/posthog-customer.tsx
@@ -0,0 +1,69 @@
+import posthog, { type PostHog } from "posthog-js";
+import { ReactNode, useEffect } from "react";
+import { useRouteChangeComplete } from "./use-route-changed";
+import { useSafeListenTrackEvents } from "./use-track";
+import { useUserInfo } from "./user";
+
+/**
+ * Posthog natively allows us to define additional capture objects with distinct configs on the global instance,
+ * via the `posthog.init` method.
+ *
+ * When customers provide a custom PostHog config, we funnel posthog events to our posthog instance
+ * as well as theirs. However, Posthog doesn't provide types for this yet in their js sdk, so
+ */
+type PostHogWithCustomer = PostHog & {
+    customer: PostHog;
+};
+
+/**
+ * @param instance
+ * @returns whether the given posthog instance has a secondary capturing object for a customer.
+ */
+function posthogHasCustomer(instance: PostHog): instance is PostHogWithCustomer {
+    return Boolean((instance as PostHogWithCustomer).customer);
+}
+
+export default function CustomerPosthog({ token, api_host }: { token: string; api_host?: string }): ReactNode {
+    // initialize the posthog instance
+    useEffect(() => {
+        posthog.init(
+            token,
+            {
+                api_host,
+                capture_pageview: true,
+                capture_pageleave: true,
+            },
+            "customer",
+        );
+    }, [token, api_host]);
+
+    // identify the user after the posthog instance is initialized
+    const user = useUserInfo();
+    useEffect(() => {
+        if (user && user.email && getCustomerPosthog()) {
+            getCustomerPosthog()?.identify(user.email);
+        } else if (getCustomerPosthog()?._isIdentified()) {
+            getCustomerPosthog()?.reset();
+        }
+    }, [user]);
+
+    // capture pageviews
+    useRouteChangeComplete(() => {
+        // posthog doesn't handle this automatically: https://posthog.com/docs/libraries/next-js#pageview
+        getCustomerPosthog()?.capture("$pageview");
+    });
+
+    // capture events
+    useSafeListenTrackEvents(({ event, properties }) => {
+        getCustomerPosthog()?.capture(event, properties);
+    }, true);
+
+    return false;
+}
+
+function getCustomerPosthog(): PostHog | undefined {
+    if (posthogHasCustomer(posthog)) {
+        return posthog.customer;
+    }
+    return undefined;
+}
diff --git a/packages/ui/analytics/src/posthog-internal.tsx b/packages/ui/analytics/src/posthog-internal.tsx
new file mode 100644
index 0000000000..6853f50cea
--- /dev/null
+++ b/packages/ui/analytics/src/posthog-internal.tsx
@@ -0,0 +1,46 @@
+import posthog from "posthog-js";
+import { ReactNode, useEffect } from "react";
+import { useRouteChangeComplete } from "./use-route-changed";
+import { useSafeListenTrackEvents } from "./use-track";
+import { useUserInfo } from "./user";
+
+export default function Posthog({ route }: { route: string }): ReactNode {
+    // initialize the posthog instance
+    useEffect(() => {
+        const token = process.env.NEXT_PUBLIC_POSTHOG_API_KEY;
+        if (token == null) {
+            // eslint-disable-next-line no-console
+            console.warn("Posthog will NOT be initialized.");
+            return;
+        }
+
+        posthog.init(token, {
+            api_host: route,
+            capture_pageview: true,
+            capture_pageleave: true,
+        });
+    }, [route]);
+
+    // identify the user after the posthog instance is initialized
+    const user = useUserInfo();
+    useEffect(() => {
+        if (user && user.email && posthog._isIdentified()) {
+            posthog.identify(user.email);
+        } else if (posthog._isIdentified()) {
+            posthog.reset();
+        }
+    }, [user]);
+
+    // capture pageviews
+    useRouteChangeComplete(() => {
+        // posthog doesn't handle this automatically: https://posthog.com/docs/libraries/next-js#pageview
+        posthog.capture("$pageview");
+    });
+
+    // capture events
+    useSafeListenTrackEvents(({ event, properties }) => {
+        posthog.capture(event, properties);
+    }, true);
+
+    return false;
+}
diff --git a/packages/ui/analytics/src/provider.tsx b/packages/ui/analytics/src/provider.tsx
new file mode 100644
index 0000000000..f30300ce13
--- /dev/null
+++ b/packages/ui/analytics/src/provider.tsx
@@ -0,0 +1,62 @@
+import type { DocsV1Read } from "@fern-api/fdr-sdk";
+import dynamic from "next/dynamic";
+import { memo } from "react";
+import { UserInfo, UserInfoProvider } from "./user";
+
+// const Amplitude = dynamic(() => import("./amplitude"), { ssr: true });
+// const Clearbit = dynamic(() => import("./clearbit"), { ssr: true });
+const CustomerPosthog = dynamic(() => import("./posthog-customer"), { ssr: true });
+// const DatadogRum = dynamic(() => import("./datadog-rum"), { ssr: true });
+// const Fathom = dynamic(() => import("./fathom"), { ssr: true });
+// const Fullstory = dynamic(() => import("./fullstory"), { ssr: true });
+const GoogleAnalytics = dynamic(() => import("./ga"), { ssr: true });
+const GoogleTagManager = dynamic(() => import("./gtm"), { ssr: true });
+// const Heap = dynamic(() => import("./heap"), { ssr: true });
+// const Hotjar = dynamic(() => import("./hotjar"), { ssr: true });
+// const Intercom = dynamic(() => import("./intercom"), { ssr: true });
+// const Koala = dynamic(() => import("./koala"), { ssr: true });
+// const LogRocket = dynamic(() => import("./logrocket"), { ssr: true });
+// const Mixpanel = dynamic(() => import("./mixpanel"), { ssr: true });
+// const Pirsch = dynamic(() => import("./pirsch"), { ssr: true });
+// const Plausible = dynamic(() => import("./plausible"), { ssr: true });
+const Posthog = dynamic(() => import("./posthog-internal"), { ssr: true });
+const Segment = dynamic(() => import("./segment"), { ssr: true });
+
+export const CustomerAnalytics = memo(function CustomerAnalytics(
+    props: DocsV1Read.AnalyticsConfig &
+        UserInfo & {
+            posthogRoute: string;
+        },
+) {
+    return (
+        <UserInfoProvider email={props.email} name={props.name}>
+            {/* Always render posthog for internal analytics + optional customer */}
+            <Posthog route={props.posthogRoute} />
+
+            {/* Additional analytics below are user-configured */}
+            {/* {props.amplitude && <Amplitude apiKey={props.amplitude.apiKey} />} */}
+            {/* {props.clearbit && <Clearbit apiKey={props.clearbit.apiKey} />} */}
+            {/* {props.datadog && (
+                <DatadogRum
+                    applicationId={props.datadog.applicationId}
+                    clientToken={props.datadog.clientToken}
+                    site={props.datadog.site}
+                />
+            )} */}
+            {/* {props.fathom && <Fathom siteId={props.fathom.siteId} />}
+            {props.fullstory && <Fullstory orgId={props.fullstory.orgId} />} */}
+            {props.ga4 && <GoogleAnalytics gaId={props.ga4.measurementId} />}
+            {props.gtm && <GoogleTagManager gtmId={props.gtm.containerId} />}
+            {/* {props.heap && <Heap appId={props.heap.appId} />}
+            {props.hotjar && <Hotjar id={props.hotjar.hjid} version={props.hotjar.hjsv} />}
+            {props.intercom && <Intercom app_id={props.intercom.appId} api_base={props.intercom.apiBase} />}
+            {props.koala && <Koala apiKey={props.koala.apiKey} />}
+            {props.logrocket && <LogRocket appId={props.logrocket.apiKey} />}
+            {props.mixpanel && <Mixpanel token={props.mixpanel.apiKey} />}
+            {props.pirsch && <Pirsch identificationCode={props.pirsch.id} />}
+            {props.plausible && <Plausible domain={props.plausible.domain} />} */}
+            {props.posthog && <CustomerPosthog token={props.posthog.apiKey} api_host={props.posthog.endpoint} />}
+            {props.segment && <Segment apiKey={props.segment.writeKey} />}
+        </UserInfoProvider>
+    );
+});
diff --git a/packages/ui/analytics/src/segment.tsx b/packages/ui/analytics/src/segment.tsx
new file mode 100644
index 0000000000..1a27df91a8
--- /dev/null
+++ b/packages/ui/analytics/src/segment.tsx
@@ -0,0 +1,40 @@
+import * as snippet from "@segment/snippet";
+import Script from "next/script";
+import { ReactNode, useEffect } from "react";
+import { useSafeListenTrackEvents } from "./use-track";
+import { useUserInfo } from "./user";
+
+export default function SegmentScript(props: snippet.Options): ReactNode {
+    const user = useUserInfo();
+
+    useEffect(() => {
+        try {
+            if (user && window.analytics) {
+                window.analytics.identify(user.email, {
+                    name: user.name,
+                    email: user.email,
+                });
+            }
+        } catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn("Error identifying user with segment", e);
+        }
+    }, [user]);
+
+    useSafeListenTrackEvents(({ event, properties }) => {
+        if (window.analytics) {
+            window.analytics.track(event, properties);
+        }
+    });
+
+    return (
+        <Script id="segment" type="text/javascript" dangerouslySetInnerHTML={{ __html: renderSegmentSnippet(props) }} />
+    );
+}
+
+function renderSegmentSnippet(opts: snippet.Options): string {
+    if (process.env.NODE_ENV === "development") {
+        return snippet.max(opts);
+    }
+    return snippet.min(opts);
+}
diff --git a/packages/ui/analytics/src/track.ts b/packages/ui/analytics/src/track.ts
new file mode 100644
index 0000000000..ed7aee87be
--- /dev/null
+++ b/packages/ui/analytics/src/track.ts
@@ -0,0 +1,29 @@
+const TRACK_EVENT_NAME = "fern-docs-track-analytics";
+
+/**
+ * Track an event.
+ *
+ * @param event - The event name.
+ * @param properties - The event properties.
+ */
+export function track(event: string, properties?: Record<string, unknown>): void {
+    if (typeof window === "undefined") {
+        return;
+    }
+
+    window.dispatchEvent(new CustomEvent(TRACK_EVENT_NAME, { detail: { event, properties } }));
+}
+
+/**
+ * Track an event that is only for internal use.
+ *
+ * @param event - The event name.
+ * @param properties - The event properties.
+ */
+export function trackInternal(event: string, properties?: Record<string, unknown>): void {
+    if (typeof window === "undefined") {
+        return;
+    }
+
+    window.dispatchEvent(new CustomEvent(TRACK_EVENT_NAME, { detail: { event, properties, internal: true } }));
+}
diff --git a/packages/ui/analytics/src/use-route-changed.ts b/packages/ui/analytics/src/use-route-changed.ts
new file mode 100644
index 0000000000..1939c87d8c
--- /dev/null
+++ b/packages/ui/analytics/src/use-route-changed.ts
@@ -0,0 +1,17 @@
+import { Router } from "next/router";
+import { useEffect, useRef } from "react";
+
+export function useRouteChangeComplete(callback: (route: string) => void): void {
+    const callbackRef = useRef(callback);
+    callbackRef.current = callback;
+
+    useEffect(() => {
+        const handleRouteChangeComplete = (route: string) => {
+            callbackRef.current(route);
+        };
+        Router.events.on("routeChangeComplete", handleRouteChangeComplete);
+        return () => {
+            Router.events.off("routeChangeComplete", handleRouteChangeComplete);
+        };
+    }, []);
+}
diff --git a/packages/ui/analytics/src/use-track.ts b/packages/ui/analytics/src/use-track.ts
new file mode 100644
index 0000000000..fe728e37f4
--- /dev/null
+++ b/packages/ui/analytics/src/use-track.ts
@@ -0,0 +1,55 @@
+import React from "react";
+import { z } from "zod";
+
+const TRACK_EVENT_NAME = "fern-docs-track-analytics";
+const TrackEventSchema = z.object({
+    event: z.string(),
+    properties: z
+        .record(
+            z.union([
+                z.string(),
+                z.number(),
+                z.boolean(),
+                z.string().array().readonly(),
+                z.number().array().readonly(),
+                z.boolean().array().readonly(),
+                z.undefined(),
+            ]),
+        )
+        .optional(),
+    internal: z.boolean().optional(),
+});
+
+type TrackEvent = z.infer<typeof TrackEventSchema>;
+
+/**
+ * Listen for track events, and emit them to analytics integrations.
+ *
+ * @param cb - The callback to emit the event to.
+ * @param allowInternal - Whether to allow internal events to be emitted. Defaults to false. Only use this for Fern's internal posthog instance.
+ */
+export function useSafeListenTrackEvents(cb: (detail: TrackEvent) => void, allowInternal = false): void {
+    const ref = React.useRef<(detail: TrackEvent) => void>(cb);
+
+    React.useEffect(() => {
+        ref.current = cb;
+    });
+
+    React.useEffect(() => {
+        const handler = (event: Event) => {
+            try {
+                if (event instanceof CustomEvent) {
+                    const detail = TrackEventSchema.safeParse(event.detail);
+                    if (detail.success && (allowInternal || !detail.data.internal)) {
+                        ref.current(detail.data);
+                    }
+                }
+            } catch (error) {
+                // eslint-disable-next-line no-console
+                console.warn("Error emitting track event", error, event);
+            }
+        };
+        window.addEventListener(TRACK_EVENT_NAME, handler);
+        return () => window.removeEventListener(TRACK_EVENT_NAME, handler);
+    }, [allowInternal]);
+}
diff --git a/packages/ui/analytics/src/user.tsx b/packages/ui/analytics/src/user.tsx
new file mode 100644
index 0000000000..a329f9b24f
--- /dev/null
+++ b/packages/ui/analytics/src/user.tsx
@@ -0,0 +1,20 @@
+import { PropsWithChildren, ReactNode, createContext, useContext, useMemo } from "react";
+
+export interface UserInfo {
+    email?: string;
+    name?: string;
+}
+
+const UserInfoContext = createContext<UserInfo>({});
+
+export function UserInfoProvider({ children, email, name }: PropsWithChildren<UserInfo>): ReactNode {
+    return (
+        <UserInfoContext.Provider value={useMemo(() => ({ email, name }), [email, name])}>
+            {children}
+        </UserInfoContext.Provider>
+    );
+}
+
+export function useUserInfo(): UserInfo {
+    return useContext(UserInfoContext);
+}
diff --git a/packages/ui/analytics/tsconfig.json b/packages/ui/analytics/tsconfig.json
new file mode 100644
index 0000000000..94465e5f5b
--- /dev/null
+++ b/packages/ui/analytics/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@fern-platform/configs/tsconfig/react-library.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["./src/**/*"]
+}
diff --git a/packages/ui/app/package.json b/packages/ui/app/package.json
index 3d0c7f852e..5cee59bb7a 100644
--- a/packages/ui/app/package.json
+++ b/packages/ui/app/package.json
@@ -34,7 +34,10 @@
     "chromatic": "pnpx chromatic --project-token=chpt_48b3c560025e978"
   },
   "dependencies": {
+    "@amplitude/analytics-browser": "^2.11.10",
+    "@datadog/browser-rum": "^5.34.0",
     "@emotion/is-prop-valid": "^1.2.2",
+    "@fern-docs/analytics": "workspace:*",
     "@fern-api/fdr-sdk": "workspace:*",
     "@fern-api/template-resolver": "workspace:*",
     "@fern-api/ui-core-utils": "workspace:*",
@@ -49,8 +52,8 @@
     "@fern-ui/next-seo": "workspace:*",
     "@fern-ui/react-commons": "workspace:*",
     "@fern-ui/search-utils": "workspace:*",
+    "@hotjar/browser": "^1.0.9",
     "@inkeep/widgets": "^0.2.288",
-    "@next/third-parties": "14.2.9",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-collapsible": "^1.1.1",
@@ -72,6 +75,7 @@
     "es-toolkit": "^1.27.0",
     "esbuild": "0.20.2",
     "fastdom": "^1.0.12",
+    "fathom-client": "^3.7.2",
     "framer-motion": "^11.2.4",
     "github-slugger": "^2.0.0",
     "hast-util-to-jsx-runtime": "^2.3.0",
@@ -83,8 +87,10 @@
     "jotai-location": "^0.5.5",
     "jsonpath": "^1.1.1",
     "launchdarkly-js-client-sdk": "^3.4.0",
+    "logrocket": "^9.0.0",
     "mdx-bundler": "^10.0.2",
     "mermaid": "^11.2.1",
+    "mixpanel-browser": "^2.57.1",
     "moment": "^2.30.1",
     "next": "^14",
     "next-mdx-remote": "^5.0.0",
@@ -136,6 +142,7 @@
     "@types/hast": "^3.0.4",
     "@types/jsonpath": "^0.2.4",
     "@types/mdx": "^2.0.13",
+    "@types/mixpanel-browser": "^2.50.2",
     "@types/node": "^18.7.18",
     "@types/numeral": "^2.0.5",
     "@types/react": "^18",
diff --git a/packages/ui/app/src/analytics/CustomerAnalytics.tsx b/packages/ui/app/src/analytics/CustomerAnalytics.tsx
deleted file mode 100644
index b5b24beb48..0000000000
--- a/packages/ui/app/src/analytics/CustomerAnalytics.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { DocsV1Read } from "@fern-api/fdr-sdk";
-import { isEqual } from "es-toolkit/predicate";
-import { useAtomValue } from "jotai";
-import { selectAtom } from "jotai/utils";
-import dynamic from "next/dynamic";
-import Script from "next/script";
-import { ReactElement, memo } from "react";
-import { DOCS_ATOM, DOMAIN_ATOM, DocsProps, EMPTY_ANALYTICS_CONFIG } from "../atoms";
-import { Posthog } from "./PosthogContainer";
-import { renderSegmentSnippet } from "./segment";
-
-const IntercomScript = dynamic(() => import("./IntercomScript").then((mod) => mod.IntercomScript));
-const FullstoryScript = dynamic(() => import("./FullstoryScript").then((mod) => mod.FullstoryScript));
-const GoogleAnalytics = dynamic(() => import("@next/third-parties/google").then((mod) => mod.GoogleAnalytics));
-const GoogleTagManager = dynamic(() => import("@next/third-parties/google").then((mod) => mod.GoogleTagManager));
-
-const ANALYTICS_ATOM = selectAtom(DOCS_ATOM, (docs) => docs.analytics ?? {}, isEqual);
-const ANALYTICS_CONFIG_ATOM = selectAtom<DocsProps, DocsV1Read.AnalyticsConfig>(
-    DOCS_ATOM,
-    (docs) => docs.analyticsConfig ?? EMPTY_ANALYTICS_CONFIG,
-    isEqual,
-);
-
-export const CustomerAnalytics = memo(function CustomerAnalytics(): ReactElement | null {
-    const domain = useAtomValue(DOMAIN_ATOM);
-    const { ga4, gtm } = useAtomValue(ANALYTICS_ATOM);
-    const config = useAtomValue(ANALYTICS_CONFIG_ATOM);
-
-    return (
-        <>
-            {/* renders either segment with our write key or segment with the customer's write key */}
-            <Script
-                id="segment-script"
-                dangerouslySetInnerHTML={{
-                    __html: renderSegmentSnippet(domain, config.segment?.writeKey),
-                }}
-            />
-            <Posthog customerConfig={config.posthog} />
-            <IntercomScript config={config.intercom} />
-            <FullstoryScript config={config.fullstory} />
-
-            {/* renders Google Analytics 4 or Google Tag Manager using @next/third-parties */}
-            {ga4 != null && <GoogleAnalytics gaId={ga4.measurementId} />}
-            {gtm != null && <GoogleTagManager gtmId={gtm.tagId} />}
-        </>
-    );
-});
diff --git a/packages/ui/app/src/analytics/IntercomScript.tsx b/packages/ui/app/src/analytics/IntercomScript.tsx
deleted file mode 100644
index b2dded0f0a..0000000000
--- a/packages/ui/app/src/analytics/IntercomScript.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { DocsV1Read } from "@fern-api/fdr-sdk";
-import Script from "next/script";
-import { ReactElement, useEffect } from "react";
-
-// Should mirror or be a subset of InitType from @intercom/messenger-js-sdk
-type IntercomInitType = { app_id?: string; api_base?: string };
-
-/**
- * Transforms our internal representation of Intercom's Config into the type necessary to
- * bootstrap Intercom.
- *
- * @param config
- * @returns
- */
-export function normalizeIntercomConfig(config: DocsV1Read.IntercomConfig): IntercomInitType {
-    return {
-        app_id: config.appId,
-        api_base: config.apiBase,
-    };
-}
-
-/**
- * If the given intercom config is defined, intialize the Intercom script via the official npm sdk
- * in a `useEffect`.
- *
- * @param config
- */
-export function useIntercomInitializer(config?: DocsV1Read.IntercomConfig): void {
-    useEffect(() => {
-        if (config && window.Intercom) {
-            window.Intercom("boot", normalizeIntercomConfig(config));
-        }
-    }, [config]);
-}
-
-export function IntercomScript(props: { config?: DocsV1Read.IntercomConfig }): ReactElement {
-    useIntercomInitializer(props.config);
-
-    if (!props.config) {
-        return <></>;
-    }
-
-    return (
-        <>
-            <Script
-                id="init-intercom"
-                dangerouslySetInnerHTML={{
-                    __html: widgetBootstrapScript(props.config.appId),
-                }}
-            />
-        </>
-    );
-}
-
-function widgetBootstrapScript(appId: string) {
-    return `(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/${appId}';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();`;
-}
diff --git a/packages/ui/app/src/analytics/PosthogContainer.tsx b/packages/ui/app/src/analytics/PosthogContainer.tsx
deleted file mode 100644
index 4dbb277815..0000000000
--- a/packages/ui/app/src/analytics/PosthogContainer.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { DocsV1Read } from "@fern-api/fdr-sdk";
-import { ReactElement } from "react";
-import { useInitializePosthog } from "./posthog";
-
-export function Posthog(props: { customerConfig?: DocsV1Read.PostHogConfig }): ReactElement {
-    useInitializePosthog(props.customerConfig);
-    return <></>;
-}
diff --git a/packages/ui/app/src/analytics/posthog.ts b/packages/ui/app/src/analytics/posthog.ts
deleted file mode 100644
index 7e52bcf522..0000000000
--- a/packages/ui/app/src/analytics/posthog.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-import type { DocsV1Read } from "@fern-api/fdr-sdk";
-import { Router } from "next/router";
-import type { PostHog } from "posthog-js";
-import { useEffect } from "react";
-import { useApiRoute } from "../hooks/useApiRoute";
-
-export function safeCall(action: () => void): void {
-    try {
-        return action();
-    } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error(e);
-    }
-}
-
-/**
- * Posthog natively allows us to define additional capture objects with distinct configs on the global instance,
- * via the `posthog.init` method.
- *
- * When customers provide a custom PostHog config, we funnel posthog events to our posthog instance
- * as well as theirs. However, Posthog doesn't provide types for this yet in their js sdk, so
- */
-type PostHogWithCustomer = PostHog & {
-    customer: PostHog;
-};
-
-/**
- * @param instance
- * @returns whether the given posthog instance has a secondary capturing object for a customer.
- */
-function posthogHasCustomer(instance: PostHog): instance is PostHogWithCustomer {
-    return Boolean((instance as PostHogWithCustomer).customer);
-}
-
-async function safeAccessPosthog(run: (posthog: PostHog) => void): Promise<void> {
-    const posthog = (await import("posthog-js")).default;
-    if (posthog.__loaded) {
-        safeCall(() => run(posthog));
-    }
-}
-
-/**
- * Safely runs the given logic if the global posthog instance has a secondary capturing object for a customer.
- *
- * @param run
- */
-function ifCustomer(posthog: PostHog, run: (hog: PostHogWithCustomer) => void): void {
-    safeCall(() => {
-        if (posthogHasCustomer(posthog) && posthog.customer.__loaded) {
-            run(posthog);
-        }
-    });
-}
-
-export async function initializePosthog(api_host: string, customerConfig?: DocsV1Read.PostHogConfig): Promise<void> {
-    const apiKey = process.env.NEXT_PUBLIC_POSTHOG_API_KEY;
-
-    if (apiKey == null) {
-        // eslint-disable-next-line no-console
-        console.warn("Posthog will NOT be initialized.");
-        return;
-    }
-
-    /**
-     * TODO: refactor this to use the posthog react provider
-     */
-    const posthog = (await import("posthog-js")).default;
-
-    if (posthog.__loaded) {
-        if (posthog.config.api_host !== api_host) {
-            // api_host may change because of useApiRoute
-            posthog.set_config({ api_host });
-        }
-    } else {
-        /**
-         * Initialize the global posthog instance.
-         * Events will be tunneled through the /api/fern-docs/analytics/posthog route.
-         */
-        posthog.init(apiKey, {
-            api_host,
-            debug: process.env.NODE_ENV === "development",
-            capture_pageview: true,
-            capture_pageleave: true,
-        });
-    }
-
-    /**
-     * If the customer has a custom PostHog config, we initialize a secondary capturing object for them.
-     * This allows us to funnel posthog events to both our posthog instance as well as theirs.
-     *
-     * Note: Events will NOT be tunneled through the /api/fern-docs/analytics/posthog route.
-     * Posthog will default to the https://us.i.posthog.com capture endpoint, unless a custom endpoint is provided.
-     */
-    if (customerConfig != null && process.env.NODE_ENV !== "development") {
-        posthog.init(
-            customerConfig.apiKey,
-            {
-                api_host: customerConfig.endpoint,
-                capture_pageview: true,
-                capture_pageleave: true,
-            },
-            "customer",
-        );
-    }
-}
-
-export function identifyUser(userId: string): void {
-    void safeAccessPosthog((posthog) => {
-        posthog.identify(userId);
-        ifCustomer(posthog, (posthog) => posthog.customer.identify(userId));
-    });
-}
-
-export function registerPosthogProperties(properties: Record<string, unknown>): void {
-    void safeAccessPosthog((posthog) => {
-        posthog.register(properties);
-        ifCustomer(posthog, (posthog) => posthog.customer.register(properties));
-    });
-}
-
-export function resetPosthog(): void {
-    void safeAccessPosthog((posthog) => {
-        posthog.reset();
-        ifCustomer(posthog, (posthog) => posthog.customer.reset());
-    });
-}
-
-export function capturePosthogEvent(eventName: string, properties?: Record<string, unknown>): void {
-    void safeAccessPosthog((posthog) => {
-        posthog.capture(eventName, properties);
-        ifCustomer(posthog, (posthog) => posthog.customer.capture(eventName, properties));
-    });
-}
-
-const trackPageView = (url: string) => {
-    safeCall(() => {
-        capturePosthogEvent("$pageview");
-        typeof window !== "undefined" &&
-            window?.analytics &&
-            typeof window.analytics.page === "function" &&
-            window?.analytics?.page("Page View", { page: url });
-    });
-};
-
-export function useInitializePosthog(customerConfig?: DocsV1Read.PostHogConfig): void {
-    const route = useApiRoute("/api/fern-docs/analytics/posthog");
-    useEffect(() => {
-        safeCall(() => initializePosthog(route, customerConfig));
-        Router.events.on("routeChangeComplete", trackPageView);
-        return () => {
-            Router.events.off("routeChangeComplete", trackPageView);
-        };
-    }, [customerConfig, route]);
-}
diff --git a/packages/ui/app/src/analytics/segment.ts b/packages/ui/app/src/analytics/segment.ts
deleted file mode 100644
index cb852d3e7b..0000000000
--- a/packages/ui/app/src/analytics/segment.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as snippet from "@segment/snippet";
-
-const DOMAINS_TO_SKIP = ["privategpt.docs.buildwithfern.com"];
-
-export function renderSegmentSnippet(domain: string, customSegmentWriteKey?: string): string {
-    const apiKey = process.env.NEXT_PUBLIC_SEGMENT_API_KEY?.trim();
-    const opts = {
-        apiKey: customSegmentWriteKey ? customSegmentWriteKey : apiKey,
-        page: true,
-    };
-    // Skip rendering the snippet for certain domains
-    if (DOMAINS_TO_SKIP.includes(domain) || !opts.apiKey) {
-        return "";
-    }
-    if (process.env.NODE_ENV === "development") {
-        return snippet.max(opts);
-    }
-    return snippet.min(opts);
-}
diff --git a/packages/ui/app/src/analytics/types.ts b/packages/ui/app/src/analytics/types.ts
deleted file mode 100644
index 4b47899df6..0000000000
--- a/packages/ui/app/src/analytics/types.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-export interface GTMParams {
-    tagId: string;
-}
-
-// todo: migrate this to a fern definition
-export interface CustomerAnalytics {
-    // amplitude?: {
-    //     apiKey: string;
-    // };
-    // clearbit?: {
-    //     publicApiKey: string;
-    // };
-    // fathom?: {
-    //     siteId: string;
-    // };
-    ga4?: {
-        measurementId: string;
-    };
-    gtm?: GTMParams;
-    // hotjar?: {
-    //     hjid: number;
-    //     hjsv: number;
-    // };
-    // koala?: {
-    //     publicApiKey: string;
-    // };
-    // logrocket?: {
-    //     appId: string;
-    // };
-    // mixpanel?: {
-    //     projectToken: string;
-    // };
-    // pirsch?: {
-    //     id: string;
-    // };
-    // plausible?: {
-    //     domain: string;
-    // };
-    // posthog?: {
-    //     apiKey: string;
-    //     apiHost?: string;
-    // };
-}
diff --git a/packages/ui/app/src/api-reference/ApiSectionMarkdownPage.tsx b/packages/ui/app/src/api-reference/ApiSectionMarkdownPage.tsx
index bbb77b41ba..c0a470152e 100644
--- a/packages/ui/app/src/api-reference/ApiSectionMarkdownPage.tsx
+++ b/packages/ui/app/src/api-reference/ApiSectionMarkdownPage.tsx
@@ -1,7 +1,7 @@
 import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import clsx from "clsx";
 import { ReactElement, memo, useRef } from "react";
-import { useHref } from "../hooks/useHref";
+import { useHref } from "../atoms";
 import { LayoutEvaluator } from "../layouts/LayoutEvaluator";
 import { DocsContent } from "../resolver/DocsContent";
 import { useApiPageCenterElement } from "./useApiPageCenterElement";
diff --git a/packages/ui/app/src/api-reference/endpoints/EndpointContent.tsx b/packages/ui/app/src/api-reference/endpoints/EndpointContent.tsx
index 6e2ed0861b..ab67114476 100644
--- a/packages/ui/app/src/api-reference/endpoints/EndpointContent.tsx
+++ b/packages/ui/app/src/api-reference/endpoints/EndpointContent.tsx
@@ -17,8 +17,8 @@ import {
     MOBILE_SIDEBAR_ENABLED_ATOM,
     store,
     useAtomEffect,
+    useHref,
 } from "../../atoms";
-import { useHref } from "../../hooks/useHref";
 import { JsonPropertyPath } from "../examples/JsonPropertyPath";
 import { useApiPageCenterElement } from "../useApiPageCenterElement";
 import { EndpointContentHeader } from "./EndpointContentHeader";
diff --git a/packages/ui/app/src/api-reference/endpoints/EndpointParameter.tsx b/packages/ui/app/src/api-reference/endpoints/EndpointParameter.tsx
index 5383cec85f..4a4c2f105a 100644
--- a/packages/ui/app/src/api-reference/endpoints/EndpointParameter.tsx
+++ b/packages/ui/app/src/api-reference/endpoints/EndpointParameter.tsx
@@ -1,15 +1,14 @@
 import type * as ApiDefinition from "@fern-api/fdr-sdk/api-definition";
 import type * as FernDocs from "@fern-api/fdr-sdk/docs";
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
-import { EMPTY_ARRAY } from "@fern-api/ui-core-utils";
+import { EMPTY_ARRAY, unknownToString } from "@fern-api/ui-core-utils";
+import { trackInternal } from "@fern-docs/analytics";
 import { AvailabilityBadge } from "@fern-ui/components/badges";
 import cn from "clsx";
 import { compact } from "es-toolkit/array";
 import { FC, PropsWithChildren, ReactNode, memo, useEffect, useRef, useState } from "react";
-import { capturePosthogEvent } from "../../analytics/posthog";
-import { useIsApiReferencePaginated, useRouteListener } from "../../atoms";
+import { useHref, useIsApiReferencePaginated, useRouteListener } from "../../atoms";
 import { FernAnchor } from "../../components/FernAnchor";
-import { useHref } from "../../hooks/useHref";
 import { Markdown } from "../../mdx/Markdown";
 import { renderTypeShorthandRoot } from "../../type-shorthand";
 import { getAnchorId } from "../../util/anchor";
@@ -102,12 +101,12 @@ export const EndpointParameterContent: FC<PropsWithChildren<EndpointParameter.Co
 
     useEffect(() => {
         if (descriptions.length > 0) {
-            capturePosthogEvent("api_reference_multiple_descriptions", {
+            trackInternal("api_reference_multiple_descriptions", {
                 name,
                 slug,
                 anchorIdParts,
                 count: descriptions.length,
-                descriptions,
+                descriptions: descriptions.map((d) => unknownToString(d)),
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/packages/ui/app/src/api-reference/endpoints/EndpointSection.tsx b/packages/ui/app/src/api-reference/endpoints/EndpointSection.tsx
index d69dfd0273..32a06aafc8 100644
--- a/packages/ui/app/src/api-reference/endpoints/EndpointSection.tsx
+++ b/packages/ui/app/src/api-reference/endpoints/EndpointSection.tsx
@@ -2,9 +2,9 @@ import type * as FernDocs from "@fern-api/fdr-sdk/docs";
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import dynamic from "next/dynamic";
 import { ReactNode, createElement, useRef } from "react";
+import { useHref } from "../../atoms";
 import { FernAnchor } from "../../components/FernAnchor";
 import { FernErrorBoundary } from "../../components/FernErrorBoundary";
-import { useHref } from "../../hooks/useHref";
 import { getAnchorId } from "../../util/anchor";
 
 const Markdown = dynamic(() => import("../../mdx/Markdown").then(({ Markdown }) => Markdown), {
diff --git a/packages/ui/app/src/api-reference/types/discriminated-union/DiscriminatedUnionVariant.tsx b/packages/ui/app/src/api-reference/types/discriminated-union/DiscriminatedUnionVariant.tsx
index 1393077637..8932b47da9 100644
--- a/packages/ui/app/src/api-reference/types/discriminated-union/DiscriminatedUnionVariant.tsx
+++ b/packages/ui/app/src/api-reference/types/discriminated-union/DiscriminatedUnionVariant.tsx
@@ -1,15 +1,15 @@
 import * as ApiDefinition from "@fern-api/fdr-sdk/api-definition";
 import type * as FernDocs from "@fern-api/fdr-sdk/docs";
 import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
+import { unknownToString } from "@fern-api/ui-core-utils";
 import titleCase from "@fern-api/ui-core-utils/titleCase";
+import { trackInternal } from "@fern-docs/analytics";
 import { AvailabilityBadge } from "@fern-ui/components/badges";
 import cn from "clsx";
 import { compact } from "es-toolkit/array";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { capturePosthogEvent } from "../../../analytics/posthog";
-import { useIsApiReferencePaginated, useRouteListener } from "../../../atoms";
+import { useHref, useIsApiReferencePaginated, useRouteListener } from "../../../atoms";
 import { FernAnchor } from "../../../components/FernAnchor";
-import { useHref } from "../../../hooks/useHref";
 import { Markdown } from "../../../mdx/Markdown";
 import { getAnchorId } from "../../../util/anchor";
 import {
@@ -87,13 +87,13 @@ export const DiscriminatedUnionVariant: React.FC<DiscriminatedUnionVariant.Props
 
     useEffect(() => {
         if (descriptions.length > 0) {
-            capturePosthogEvent("api_reference_multiple_descriptions", {
+            trackInternal("api_reference_multiple_descriptions", {
                 slug,
                 anchorIdParts,
                 discriminant,
                 discriminantValue: unionVariant.discriminantValue,
                 count: descriptions.length,
-                descriptions,
+                descriptions: descriptions.map((d) => unknownToString(d)),
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/packages/ui/app/src/api-reference/types/object/ObjectProperty.tsx b/packages/ui/app/src/api-reference/types/object/ObjectProperty.tsx
index 72aa4904b5..4a25decbae 100644
--- a/packages/ui/app/src/api-reference/types/object/ObjectProperty.tsx
+++ b/packages/ui/app/src/api-reference/types/object/ObjectProperty.tsx
@@ -1,14 +1,14 @@
 import * as ApiDefinition from "@fern-api/fdr-sdk/api-definition";
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
+import { unknownToString } from "@fern-api/ui-core-utils";
+import { trackInternal } from "@fern-docs/analytics";
 import { AvailabilityBadge } from "@fern-ui/components/badges";
 import cn from "clsx";
 import { compact } from "es-toolkit/array";
 import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { capturePosthogEvent } from "../../../analytics/posthog";
-import { useIsApiReferencePaginated, useRouteListener } from "../../../atoms";
+import { useHref, useIsApiReferencePaginated, useRouteListener } from "../../../atoms";
 import { FernAnchor } from "../../../components/FernAnchor";
 import { FernErrorBoundary } from "../../../components/FernErrorBoundary";
-import { useHref } from "../../../hooks/useHref";
 import { Markdown } from "../../../mdx/Markdown";
 import { renderTypeShorthandRoot } from "../../../type-shorthand";
 import { getAnchorId } from "../../../util/anchor";
@@ -109,12 +109,12 @@ const UnmemoizedObjectPropertyInternal = forwardRef<HTMLDivElement, ObjectProper
 
     useEffect(() => {
         if (descriptions.length > 0) {
-            capturePosthogEvent("api_reference_multiple_descriptions", {
+            trackInternal("api_reference_multiple_descriptions", {
                 name: property.key,
                 slug,
                 anchorIdParts,
                 count: descriptions.length,
-                descriptions,
+                descriptions: descriptions.map((d) => unknownToString(d)),
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/packages/ui/app/src/api-reference/web-socket/WebSocket.tsx b/packages/ui/app/src/api-reference/web-socket/WebSocket.tsx
index 4bae775058..84b6d50576 100644
--- a/packages/ui/app/src/api-reference/web-socket/WebSocket.tsx
+++ b/packages/ui/app/src/api-reference/web-socket/WebSocket.tsx
@@ -7,9 +7,9 @@ import { AvailabilityBadge } from "@fern-ui/components/badges";
 import cn from "clsx";
 import { ArrowDown, ArrowUp, Wifi } from "iconoir-react";
 import { Children, FC, HTMLAttributes, ReactNode, useMemo, useRef } from "react";
+import { useHref } from "../../atoms";
 import { FernAnchor } from "../../components/FernAnchor";
 import { FernBreadcrumbs } from "../../components/FernBreadcrumbs";
-import { useHref } from "../../hooks/useHref";
 import { Markdown } from "../../mdx/Markdown";
 import { PlaygroundButton } from "../../playground/PlaygroundButton";
 import { usePlaygroundBaseUrl } from "../../playground/utils/select-environment";
diff --git a/packages/ui/app/src/api-reference/webhooks/WebhookContent.tsx b/packages/ui/app/src/api-reference/webhooks/WebhookContent.tsx
index 068523955f..046fad7e80 100644
--- a/packages/ui/app/src/api-reference/webhooks/WebhookContent.tsx
+++ b/packages/ui/app/src/api-reference/webhooks/WebhookContent.tsx
@@ -2,8 +2,8 @@ import * as ApiDefinition from "@fern-api/fdr-sdk/api-definition";
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import cn from "clsx";
 import { memo, useCallback, useRef } from "react";
+import { useHref } from "../../atoms";
 import { FernBreadcrumbs } from "../../components/FernBreadcrumbs";
-import { useHref } from "../../hooks/useHref";
 import { Markdown } from "../../mdx/Markdown";
 import { EndpointParameter } from "../endpoints/EndpointParameter";
 import { EndpointSection } from "../endpoints/EndpointSection";
diff --git a/packages/ui/app/src/atoms/analytics.ts b/packages/ui/app/src/atoms/analytics.ts
new file mode 100644
index 0000000000..092ac7e1bc
--- /dev/null
+++ b/packages/ui/app/src/atoms/analytics.ts
@@ -0,0 +1,16 @@
+import { DocsV1Read } from "@fern-api/fdr-sdk";
+import { isEqual } from "es-toolkit/predicate";
+import { useAtomValue } from "jotai";
+import { selectAtom } from "jotai/utils";
+import { DOCS_ATOM, EMPTY_ANALYTICS_CONFIG } from "./docs";
+import { DocsProps } from "./types";
+
+const ANALYTICS_CONFIG_ATOM = selectAtom<DocsProps, DocsV1Read.AnalyticsConfig>(
+    DOCS_ATOM,
+    (docs) => docs.analyticsConfig ?? EMPTY_ANALYTICS_CONFIG,
+    isEqual,
+);
+
+export function useAnalyticsConfig(): DocsV1Read.AnalyticsConfig {
+    return useAtomValue(ANALYTICS_CONFIG_ATOM);
+}
diff --git a/packages/ui/app/src/atoms/docs.ts b/packages/ui/app/src/atoms/docs.ts
index 63f8beafcd..8d9227f2c8 100644
--- a/packages/ui/app/src/atoms/docs.ts
+++ b/packages/ui/app/src/atoms/docs.ts
@@ -22,6 +22,7 @@ export const EMPTY_ANALYTICS_CONFIG: DocsV1Read.AnalyticsConfig = {
     fathom: undefined,
     clearbit: undefined,
     heap: undefined,
+    datadog: undefined,
 };
 
 export const EMPTY_DOCS_STATE: DocsProps = {
@@ -66,7 +67,6 @@ export const EMPTY_DOCS_STATE: DocsProps = {
     featureFlags: DEFAULT_FEATURE_FLAGS,
     apis: [],
     seo: {},
-    analytics: undefined,
     analyticsConfig: EMPTY_ANALYTICS_CONFIG,
     fallback: {},
     theme: "default",
diff --git a/packages/ui/app/src/atoms/index.ts b/packages/ui/app/src/atoms/index.ts
index feedd43abe..7a491df4d9 100644
--- a/packages/ui/app/src/atoms/index.ts
+++ b/packages/ui/app/src/atoms/index.ts
@@ -1,3 +1,4 @@
+export * from "./analytics";
 export * from "./announcement";
 export * from "./apis";
 export * from "./auth";
@@ -7,7 +8,6 @@ export * from "./flags";
 export * from "./hooks";
 export * from "./lang";
 export * from "./layout";
-export * from "./location";
 export * from "./logo";
 export * from "./navigation";
 export * from "./playground";
diff --git a/packages/ui/app/src/atoms/launchdarkly.ts b/packages/ui/app/src/atoms/launchdarkly.ts
index d02152d98e..dd6bfa8df4 100644
--- a/packages/ui/app/src/atoms/launchdarkly.ts
+++ b/packages/ui/app/src/atoms/launchdarkly.ts
@@ -1,7 +1,7 @@
 import { atom, useAtomValue, useSetAtom } from "jotai";
 import * as LDClient from "launchdarkly-js-client-sdk";
 import { useCallback, useEffect, useState } from "react";
-import { useApiRouteSWR } from "../hooks/useApiRouteSWR";
+import { useApiRouteSWR } from "./navigation";
 
 // NOTE do not export this file in any index.ts file so that it can be properly tree-shaken
 // otherwise we risk importing launchdarkly-js-client-sdk in all of our bundles
diff --git a/packages/ui/app/src/atoms/location.ts b/packages/ui/app/src/atoms/location.ts
deleted file mode 100644
index ebef908783..0000000000
--- a/packages/ui/app/src/atoms/location.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
-import { useEventCallback } from "@fern-ui/react-commons";
-import { atom } from "jotai";
-import { atomWithLocation } from "jotai-location";
-import { useAtomCallback } from "jotai/utils";
-import { Router } from "next/router";
-import { useCallback } from "react";
-import { useCallbackOne } from "use-memo-one";
-import { selectHref, useHref } from "../hooks/useHref";
-import { useAtomEffect } from "./hooks";
-import { RESOLVED_PATH_ATOM } from "./navigation";
-
-export const LOCATION_ATOM = atomWithLocation({
-    subscribe: (callback) => {
-        Router.events.on("routeChangeComplete", callback);
-        Router.events.on("routeChangeError", callback);
-        Router.events.on("hashChangeComplete", callback);
-        return () => {
-            Router.events.off("routeChangeComplete", callback);
-            Router.events.off("routeChangeError", callback);
-            Router.events.off("hashChangeComplete", callback);
-        };
-    },
-});
-LOCATION_ATOM.debugLabel = "LOCATION_ATOM";
-
-export const ANCHOR_ATOM = atom(
-    (get) => get(LOCATION_ATOM).hash?.slice(1),
-    (get, set, anchor: string | undefined) => {
-        const location = get(LOCATION_ATOM);
-        const hash = anchor != null ? `#${anchor}` : undefined;
-        if (location.hash === hash) {
-            return;
-        }
-        set(LOCATION_ATOM, { ...get(LOCATION_ATOM), hash }, { replace: true });
-    },
-);
-ANCHOR_ATOM.debugLabel = "ANCHOR_ATOM";
-
-export const SLUG_ATOM = atom(
-    (get) => {
-        const location = get(LOCATION_ATOM);
-        if (location.pathname == null) {
-            return get(RESOLVED_PATH_ATOM).slug;
-        }
-        return FernNavigation.Slug(location.pathname?.replace(/^\/|\/$/g, "") ?? "");
-    },
-    (get, set, slug: FernNavigation.Slug) => {
-        const location = get(LOCATION_ATOM);
-        const pathname = selectHref(get, slug);
-        if (location.pathname === pathname) {
-            return;
-        }
-
-        // eslint-disable-next-line no-console
-        console.debug("setting location to in slug atom", pathname);
-
-        // replaces the current location with the new slug, and removes any hash (from an anchor) that may be present
-        set(LOCATION_ATOM, { pathname, searchParams: location.searchParams, hash: "" }, { replace: true });
-    },
-);
-SLUG_ATOM.debugLabel = "SLUG_ATOM";
-
-export function useRouteListener(slug: FernNavigation.Slug, callback: (hash: string | undefined) => void): void {
-    const callbackRef = useEventCallback(callback);
-    const route = useHref(slug);
-    return useAtomEffect(
-        useCallbackOne(
-            (get) => {
-                const location = get(LOCATION_ATOM);
-                if (location.pathname?.toLowerCase() === route.toLowerCase()) {
-                    setTimeout(() => callbackRef(get(ANCHOR_ATOM)), 0);
-                }
-            },
-            [route, callbackRef],
-        ),
-    );
-}
-
-let justNavigatedTimeout: number;
-
-/**
- * This atom is used to prevent the slug from being updated when the user navigates to a new page,
- * which sometimes happens when the on-scroll useApiPageCenterElement is overly sensitive.
- */
-export const JUST_NAVIGATED_ATOM = atom(true);
-JUST_NAVIGATED_ATOM.debugLabel = "JUST_NAVIGATED_ATOM";
-
-export function useSetJustNavigated(): [set: () => void, destroy: () => void] {
-    // note: JUST_NAVIGATED_ATOM is never "mounted" so we need to implement mount/unmount as an effect
-    useAtomEffect(
-        useCallbackOne((_get, set) => {
-            window.clearTimeout(justNavigatedTimeout);
-            justNavigatedTimeout = window.setTimeout(() => {
-                set(JUST_NAVIGATED_ATOM, false);
-            }, 1000);
-            return () => {
-                window.clearTimeout(justNavigatedTimeout);
-            };
-        }, []),
-    );
-    return [
-        useAtomCallback(
-            useCallbackOne((_get, set) => {
-                window.clearTimeout(justNavigatedTimeout);
-                set(JUST_NAVIGATED_ATOM, true);
-                justNavigatedTimeout = window.setTimeout(() => {
-                    set(JUST_NAVIGATED_ATOM, false);
-                }, 1000);
-            }, []),
-        ),
-        useCallback(() => {
-            window.clearTimeout(justNavigatedTimeout);
-        }, []),
-    ];
-}
diff --git a/packages/ui/app/src/atoms/navigation.ts b/packages/ui/app/src/atoms/navigation.ts
index c2f08455a3..53917e2b8b 100644
--- a/packages/ui/app/src/atoms/navigation.ts
+++ b/packages/ui/app/src/atoms/navigation.ts
@@ -1,13 +1,25 @@
 import type { ApiDefinition } from "@fern-api/fdr-sdk/api-definition";
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
-import { SidebarTab, VersionSwitcherInfo } from "@fern-ui/fdr-utils";
+import { visitDiscriminatedUnion, withDefaultProtocol } from "@fern-api/ui-core-utils";
+import type { SidebarTab, VersionSwitcherInfo } from "@fern-ui/fdr-utils";
+import { useEventCallback } from "@fern-ui/react-commons";
 import { isEqual } from "es-toolkit/predicate";
-import { atom, useAtomValue } from "jotai";
-import { selectAtom } from "jotai/utils";
-import { DocsContent } from "../resolver/DocsContent";
+import { atom, useAtomValue, type Atom, type Getter } from "jotai";
+import { atomWithLocation } from "jotai-location";
+import { selectAtom, useAtomCallback } from "jotai/utils";
+import { Router } from "next/router";
+import { useCallback } from "react";
+import useSWR, { preload, type Fetcher, type SWRConfiguration, type SWRResponse } from "swr";
+import useSWRImmutable from "swr/immutable";
+import urlJoin from "url-join";
+import { useCallbackOne } from "use-memo-one";
+import { z } from "zod";
+import type { DocsContent } from "../resolver/DocsContent";
+import { withSkewProtection } from "../util/withSkewProtection";
+import { WRITE_API_DEFINITION_ATOM } from "./apis";
 import { DOCS_ATOM } from "./docs";
-import { SLUG_ATOM } from "./location";
-import { NavbarLink } from "./types";
+import { useAtomEffect } from "./hooks";
+import type { NavbarLink } from "./types";
 
 export const DOMAIN_ATOM = atom<string>((get) => get(DOCS_ATOM).baseUrl.domain);
 DOMAIN_ATOM.debugLabel = "DOMAIN_ATOM";
@@ -135,3 +147,241 @@ export function useDomain(): string {
 export function useBasePath(): string | undefined {
     return useAtomValue(BASEPATH_ATOM);
 }
+
+export const LOCATION_ATOM = atomWithLocation({
+    subscribe: (callback) => {
+        Router.events.on("routeChangeComplete", callback);
+        Router.events.on("routeChangeError", callback);
+        Router.events.on("hashChangeComplete", callback);
+        return () => {
+            Router.events.off("routeChangeComplete", callback);
+            Router.events.off("routeChangeError", callback);
+            Router.events.off("hashChangeComplete", callback);
+        };
+    },
+});
+LOCATION_ATOM.debugLabel = "LOCATION_ATOM";
+
+export const ANCHOR_ATOM = atom(
+    (get) => get(LOCATION_ATOM).hash?.slice(1),
+    (get, set, anchor: string | undefined) => {
+        const location = get(LOCATION_ATOM);
+        const hash = anchor != null ? `#${anchor}` : undefined;
+        if (location.hash === hash) {
+            return;
+        }
+        set(LOCATION_ATOM, { ...get(LOCATION_ATOM), hash }, { replace: true });
+    },
+);
+ANCHOR_ATOM.debugLabel = "ANCHOR_ATOM";
+
+export const SLUG_ATOM = atom(
+    (get) => {
+        const location = get(LOCATION_ATOM);
+        if (location.pathname == null) {
+            return get(RESOLVED_PATH_ATOM).slug;
+        }
+        return FernNavigation.Slug(location.pathname?.replace(/^\/|\/$/g, "") ?? "");
+    },
+    (get, set, slug: FernNavigation.Slug) => {
+        const location = get(LOCATION_ATOM);
+        const pathname = selectHref(get, slug);
+        if (location.pathname === pathname) {
+            return;
+        }
+
+        // eslint-disable-next-line no-console
+        console.debug("setting location to in slug atom", pathname);
+
+        // replaces the current location with the new slug, and removes any hash (from an anchor) that may be present
+        set(LOCATION_ATOM, { pathname, searchParams: location.searchParams, hash: "" }, { replace: true });
+    },
+);
+SLUG_ATOM.debugLabel = "SLUG_ATOM";
+
+export function useRouteListener(slug: FernNavigation.Slug, callback: (hash: string | undefined) => void): void {
+    const callbackRef = useEventCallback(callback);
+    const route = useHref(slug);
+    return useAtomEffect(
+        useCallbackOne(
+            (get) => {
+                const location = get(LOCATION_ATOM);
+                if (location.pathname?.toLowerCase() === route.toLowerCase()) {
+                    setTimeout(() => callbackRef(get(ANCHOR_ATOM)), 0);
+                }
+            },
+            [route, callbackRef],
+        ),
+    );
+}
+
+let justNavigatedTimeout: number;
+
+/**
+ * This atom is used to prevent the slug from being updated when the user navigates to a new page,
+ * which sometimes happens when the on-scroll useApiPageCenterElement is overly sensitive.
+ */
+export const JUST_NAVIGATED_ATOM = atom(true);
+JUST_NAVIGATED_ATOM.debugLabel = "JUST_NAVIGATED_ATOM";
+
+export function useSetJustNavigated(): [set: () => void, destroy: () => void] {
+    // note: JUST_NAVIGATED_ATOM is never "mounted" so we need to implement mount/unmount as an effect
+    useAtomEffect(
+        useCallbackOne((_get, set) => {
+            window.clearTimeout(justNavigatedTimeout);
+            justNavigatedTimeout = window.setTimeout(() => {
+                set(JUST_NAVIGATED_ATOM, false);
+            }, 1000);
+            return () => {
+                window.clearTimeout(justNavigatedTimeout);
+            };
+        }, []),
+    );
+    return [
+        useAtomCallback(
+            useCallbackOne((_get, set) => {
+                window.clearTimeout(justNavigatedTimeout);
+                set(JUST_NAVIGATED_ATOM, true);
+                justNavigatedTimeout = window.setTimeout(() => {
+                    set(JUST_NAVIGATED_ATOM, false);
+                }, 1000);
+            }, []),
+        ),
+        useCallback(() => {
+            window.clearTimeout(justNavigatedTimeout);
+        }, []),
+    ];
+}
+
+export function getToHref(includeTrailingSlash: boolean = false): (slug: FernNavigation.Slug, host?: string) => string {
+    return (slug, host) => {
+        const path = slug === "" ? "/" : includeTrailingSlash ? `/${slug}/` : `/${slug}`;
+        if (host == null) {
+            return path;
+        }
+        return urlJoin(withDefaultProtocol(host), path);
+    };
+}
+
+export function useToHref(): (slug: FernNavigation.Slug) => string {
+    return getToHref(useAtomValue(TRAILING_SLASH_ATOM));
+}
+
+export function useHref(slug: FernNavigation.Slug, anchor?: string): string;
+export function useHref(slug: FernNavigation.Slug | undefined, anchor?: string): string | undefined;
+export function useHref(slug: FernNavigation.Slug | undefined, anchor?: string): string | undefined {
+    const toHref = useToHref();
+    if (slug == null) {
+        return anchor;
+    }
+    const pathName = toHref(slug);
+    return anchor != null ? `${pathName}#${anchor}` : pathName;
+}
+
+export function selectHref(get: <T>(atom: Atom<T>) => T, slug: FernNavigation.Slug): string {
+    return getToHref(get(TRAILING_SLASH_ATOM))(slug);
+}
+
+export type FernDocsApiRoute = `/api/fern-docs/${string}`;
+
+// see useHref.ts for a similar pattern
+export function getApiRouteSupplier({
+    includeTrailingSlash,
+    basepath,
+}: {
+    includeTrailingSlash?: boolean;
+    basepath?: string;
+}): (route: FernDocsApiRoute) => string {
+    return (route) => {
+        // note: if the first argument of urjoin is "", it will strip the leading slash. `|| "/"` ensures "" -> "/"
+        if (includeTrailingSlash) {
+            return urlJoin(basepath || "/", route, "/");
+        } else {
+            return urlJoin(basepath || "/", route);
+        }
+    };
+}
+
+export function useApiRoute(
+    route: FernDocsApiRoute,
+    options?: {
+        includeTrailingSlash?: boolean;
+        basepath?: string;
+    },
+): string {
+    const basepath = useAtomValue(BASEPATH_ATOM);
+    const includeTrailingSlash = useAtomValue(TRAILING_SLASH_ATOM);
+    return getApiRouteSupplier({ includeTrailingSlash, basepath, ...options })(route);
+}
+
+export function selectApiRoute(
+    get: Getter,
+    route: FernDocsApiRoute,
+    options?: {
+        includeTrailingSlash?: boolean;
+        basepath?: string;
+    },
+): string {
+    const basepath = get(BASEPATH_ATOM);
+    const includeTrailingSlash = get(TRAILING_SLASH_ATOM);
+    return getApiRouteSupplier({ includeTrailingSlash, basepath, ...options })(route);
+}
+
+interface Options<T> extends SWRConfiguration<T, Error, Fetcher<T>> {
+    disabled?: boolean;
+    request?: RequestInit & { headers?: Record<string, string> };
+    validate?: z.ZodType<T>;
+}
+
+function createFetcher<T>(
+    init?: RequestInit & { headers?: Record<string, string> },
+    validate?: z.ZodType<T>,
+): (url: string) => Promise<T> {
+    return async (url: string): Promise<T> => {
+        const request = { ...init, headers: withSkewProtection(init?.headers) };
+        const r = await fetch(url, request);
+        const data = await r.json();
+        if (validate) {
+            return validate.parse(data);
+        }
+        return data;
+    };
+}
+
+export function useApiRouteSWR<T>(
+    route: FernDocsApiRoute,
+    { disabled, request, validate, ...options }: Options<T> = {},
+): SWRResponse<T> {
+    const key = useApiRoute(route);
+    return useSWR(disabled ? null : key, createFetcher(request, validate), options);
+}
+
+export function useApiRouteSWRImmutable<T>(
+    route: FernDocsApiRoute,
+    { disabled, request, validate, ...options }: Options<T> = {},
+): SWRResponse<T> {
+    const key = useApiRoute(route);
+    return useSWRImmutable(disabled ? null : key, createFetcher(request, validate), options);
+}
+
+const fetcher = (url: string): Promise<ApiDefinition> => fetch(url).then((res) => res.json());
+
+export function usePreloadApiLeaf(): (node: FernNavigation.NavigationNodeApiLeaf) => Promise<ApiDefinition> {
+    return useAtomCallback(
+        useCallbackOne(async (get, set, node: FernNavigation.NavigationNodeApiLeaf) => {
+            const route = selectApiRoute(
+                get,
+                `/api/fern-docs/api-definition/${encodeURIComponent(node.apiDefinitionId)}/${visitDiscriminatedUnion(
+                    node,
+                )._visit({
+                    endpoint: (node) => `endpoint/${encodeURIComponent(node.endpointId)}`,
+                    webSocket: (node) => `websocket/${encodeURIComponent(node.webSocketId)}`,
+                    webhook: (node) => `webhook/${encodeURIComponent(node.webhookId)}`,
+                })}`,
+            );
+            const apiDefinition = await preload(route, fetcher);
+            set(WRITE_API_DEFINITION_ATOM, apiDefinition);
+            return apiDefinition;
+        }, []),
+    );
+}
diff --git a/packages/ui/app/src/atoms/playground.ts b/packages/ui/app/src/atoms/playground.ts
index 57e5cd5429..125f3416b9 100644
--- a/packages/ui/app/src/atoms/playground.ts
+++ b/packages/ui/app/src/atoms/playground.ts
@@ -1,28 +1,26 @@
 import {
-    EndpointContext,
-    WebSocketContext,
     createEndpointContext,
     createWebSocketContext,
+    type EndpointContext,
+    type WebSocketContext,
 } from "@fern-api/fdr-sdk/api-definition";
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { useEventCallback } from "@fern-ui/react-commons";
-import { WritableAtom, atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { atom, useAtom, useAtomValue, useSetAtom, type WritableAtom } from "jotai";
 import { RESET, atomFamily, atomWithStorage, useAtomCallback } from "jotai/utils";
-import { Dispatch, SetStateAction, useEffect } from "react";
+import { useEffect, type Dispatch, type SetStateAction } from "react";
 import { useCallbackOne } from "use-memo-one";
-import { selectHref } from "../hooks/useHref";
-import { usePreloadApiLeaf } from "../playground/hooks/usePreloadApiLeaf";
 import {
     PLAYGROUND_AUTH_STATE_BASIC_AUTH_INITIAL,
     PLAYGROUND_AUTH_STATE_BEARER_TOKEN_INITIAL,
     PLAYGROUND_AUTH_STATE_HEADER_INITIAL,
     PLAYGROUND_AUTH_STATE_OAUTH_INITIAL,
-    PlaygroundAuthStateBasicAuth,
-    PlaygroundAuthStateBearerToken,
-    PlaygroundAuthStateHeader,
-    PlaygroundAuthStateOAuth,
     PlaygroundAuthStateSchema,
     type PlaygroundAuthState,
+    type PlaygroundAuthStateBasicAuth,
+    type PlaygroundAuthStateBearerToken,
+    type PlaygroundAuthStateHeader,
+    type PlaygroundAuthStateOAuth,
     type PlaygroundEndpointRequestFormState,
     type PlaygroundRequestFormState,
     type PlaygroundWebSocketRequestFormState,
@@ -36,8 +34,7 @@ import { FERN_USER_ATOM } from "./auth";
 import { FEATURE_FLAGS_ATOM } from "./flags";
 import { useAtomEffect } from "./hooks";
 import { HEADER_HEIGHT_ATOM } from "./layout";
-import { LOCATION_ATOM } from "./location";
-import { CURRENT_NODE_ATOM, NAVIGATION_NODES_ATOM } from "./navigation";
+import { CURRENT_NODE_ATOM, LOCATION_ATOM, NAVIGATION_NODES_ATOM, selectHref, usePreloadApiLeaf } from "./navigation";
 import { atomWithStorageValidation } from "./utils/atomWithStorageValidation";
 import { IS_MOBILE_SCREEN_ATOM } from "./viewport";
 
diff --git a/packages/ui/app/src/atoms/types.ts b/packages/ui/app/src/atoms/types.ts
index b8e89c0676..876d939225 100644
--- a/packages/ui/app/src/atoms/types.ts
+++ b/packages/ui/app/src/atoms/types.ts
@@ -5,9 +5,8 @@ import { ColorsConfig, SidebarTab, VersionSwitcherInfo } from "@fern-ui/fdr-util
 import type { FernUser } from "@fern-ui/fern-docs-auth";
 import type { FeatureFlags } from "@fern-ui/fern-docs-utils";
 import { NextSeoProps } from "@fern-ui/next-seo";
-import { CustomerAnalytics } from "../analytics/types";
-import { DocsContent } from "../resolver/DocsContent";
-import { FernTheme } from "../themes/ThemedDocs";
+import type { DocsContent } from "../resolver/DocsContent";
+import type { FernTheme } from "../themes/ThemedDocs";
 
 export interface NavigationProps {
     currentTabIndex: number | undefined;
@@ -60,7 +59,6 @@ export interface DocsProps {
     featureFlags: FeatureFlags;
     apis: FdrAPI.ApiDefinitionId[];
     seo: NextSeoProps;
-    analytics: CustomerAnalytics | undefined; // deprecated
     analyticsConfig: DocsV1Read.AnalyticsConfig | undefined;
     fallback: Record<string, any>;
     theme: FernTheme;
diff --git a/packages/ui/app/src/changelog/ChangelogEntryPage.tsx b/packages/ui/app/src/changelog/ChangelogEntryPage.tsx
index d6e377a139..cdd9608da5 100644
--- a/packages/ui/app/src/changelog/ChangelogEntryPage.tsx
+++ b/packages/ui/app/src/changelog/ChangelogEntryPage.tsx
@@ -1,8 +1,8 @@
 import { ArrowLeft } from "iconoir-react";
 import { ReactElement } from "react";
+import { useHref } from "../atoms";
 import { BottomNavigationNeighbors } from "../components/BottomNavigationNeighbors";
 import { FernLink } from "../components/FernLink";
-import { useHref } from "../hooks/useHref";
 import { Markdown } from "../mdx/Markdown";
 import { DocsContent } from "../resolver/DocsContent";
 
diff --git a/packages/ui/app/src/changelog/ChangelogPage.tsx b/packages/ui/app/src/changelog/ChangelogPage.tsx
index 2d495de92b..dcc7ec2135 100644
--- a/packages/ui/app/src/changelog/ChangelogPage.tsx
+++ b/packages/ui/app/src/changelog/ChangelogPage.tsx
@@ -6,11 +6,10 @@ import { chunk } from "es-toolkit/array";
 import { atom, useAtomValue } from "jotai";
 import { Fragment, ReactElement, useEffect, useMemo } from "react";
 import { useMemoOne } from "use-memo-one";
-import { IS_READY_ATOM, LOCATION_ATOM, SCROLL_BODY_ATOM, SIDEBAR_ROOT_NODE_ATOM } from "../atoms";
+import { IS_READY_ATOM, LOCATION_ATOM, SCROLL_BODY_ATOM, SIDEBAR_ROOT_NODE_ATOM, useToHref } from "../atoms";
 import { BottomNavigationButtons } from "../components/BottomNavigationButtons";
 import { FernLink } from "../components/FernLink";
 import { PageHeader } from "../components/PageHeader";
-import { useToHref } from "../hooks/useHref";
 import { Markdown } from "../mdx/Markdown";
 import { DocsContent } from "../resolver/DocsContent";
 import { BuiltWithFern } from "../sidebar/BuiltWithFern";
diff --git a/packages/ui/app/src/components/ApiReferenceButton.tsx b/packages/ui/app/src/components/ApiReferenceButton.tsx
index be51ba793e..59af8af890 100644
--- a/packages/ui/app/src/components/ApiReferenceButton.tsx
+++ b/packages/ui/app/src/components/ApiReferenceButton.tsx
@@ -1,7 +1,7 @@
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { FernTooltip, FernTooltipProvider } from "@fern-ui/components";
 import { ArrowUpRight } from "iconoir-react";
-import { useHref } from "../hooks/useHref";
+import { useHref } from "../atoms";
 import { FernLinkButton } from "./FernLinkButton";
 
 export const ApiReferenceButton: React.FC<{ slug: FernNavigation.Slug }> = ({ slug }) => {
diff --git a/packages/ui/app/src/components/BottomNavigationNeighbors.tsx b/packages/ui/app/src/components/BottomNavigationNeighbors.tsx
index 0e837d0fdb..5775c69594 100644
--- a/packages/ui/app/src/components/BottomNavigationNeighbors.tsx
+++ b/packages/ui/app/src/components/BottomNavigationNeighbors.tsx
@@ -1,7 +1,7 @@
 import { useAtomValue } from "jotai";
 import { FC, useMemo } from "react";
+import { useToHref } from "../atoms";
 import { NEIGHBORS_ATOM } from "../atoms/navigation";
-import { useToHref } from "../hooks/useHref";
 import { DocsContent } from "../resolver/DocsContent";
 import { BottomNavigationButtons } from "./BottomNavigationButtons";
 
diff --git a/packages/ui/app/src/components/FernBreadcrumbs.tsx b/packages/ui/app/src/components/FernBreadcrumbs.tsx
index 732ac61fa3..0f6e3bcc5c 100644
--- a/packages/ui/app/src/components/FernBreadcrumbs.tsx
+++ b/packages/ui/app/src/components/FernBreadcrumbs.tsx
@@ -1,7 +1,7 @@
 import type { FernNavigation } from "@fern-api/fdr-sdk";
 import { NavArrowRight } from "iconoir-react";
 import { Fragment, ReactElement } from "react";
-import { useToHref } from "../hooks/useHref";
+import { useToHref } from "../atoms";
 import { FernLink } from "./FernLink";
 
 export interface FernBreadcrumbsProps {
diff --git a/packages/ui/app/src/components/FernLink.tsx b/packages/ui/app/src/components/FernLink.tsx
index 9dda5af4db..5e1c182dbf 100644
--- a/packages/ui/app/src/components/FernLink.tsx
+++ b/packages/ui/app/src/components/FernLink.tsx
@@ -4,8 +4,7 @@ import Link, { LinkProps } from "next/link";
 import { ReactElement, forwardRef, useEffect, useState, type ComponentProps } from "react";
 import { format, parse, resolve, type UrlObject } from "url";
 import { useMemoOne } from "use-memo-one";
-import { SLUG_ATOM, useDomain } from "../atoms";
-import { selectHref } from "../hooks/useHref";
+import { SLUG_ATOM, selectHref, useDomain } from "../atoms";
 
 interface FernLinkProps extends ComponentProps<typeof Link> {
     showExternalLinkIcon?: boolean;
diff --git a/packages/ui/app/src/components/JavascriptProvider.tsx b/packages/ui/app/src/components/JavascriptProvider.tsx
index 8cfae0f59c..a7a048711a 100644
--- a/packages/ui/app/src/components/JavascriptProvider.tsx
+++ b/packages/ui/app/src/components/JavascriptProvider.tsx
@@ -1,7 +1,6 @@
 import { atom, useAtomValue } from "jotai";
 import Script from "next/script";
 import { memo } from "react";
-import { CustomerAnalytics } from "../analytics/CustomerAnalytics";
 import { DOCS_ATOM, FILES_ATOM } from "../atoms";
 
 const JS_ATOM = atom((get) => get(DOCS_ATOM).js);
@@ -27,7 +26,6 @@ export const JavascriptProvider = memo(() => {
                 />
             ))}
             {js?.remote?.map((remote) => <Script key={remote.url} src={remote.url} strategy={remote.strategy} />)}
-            <CustomerAnalytics />
         </>
     );
 });
diff --git a/packages/ui/app/src/components/LinkPreload.tsx b/packages/ui/app/src/components/LinkPreload.tsx
index 07374cafc8..b5fc16876e 100644
--- a/packages/ui/app/src/components/LinkPreload.tsx
+++ b/packages/ui/app/src/components/LinkPreload.tsx
@@ -1,7 +1,7 @@
 import Head from "next/head";
 import { ReactElement } from "react";
+import { useApiRoute } from "../atoms";
 import { useIsLocalPreview } from "../contexts/local-preview";
-import { useApiRoute } from "../hooks/useApiRoute";
 
 export function LinkPreload({ href }: { href: string }): ReactElement {
     return (
diff --git a/packages/ui/app/src/docs/CustomerAnalytics.tsx b/packages/ui/app/src/docs/CustomerAnalytics.tsx
new file mode 100644
index 0000000000..e9bd364db0
--- /dev/null
+++ b/packages/ui/app/src/docs/CustomerAnalytics.tsx
@@ -0,0 +1,10 @@
+import { AnalyticsProvider } from "@fern-docs/analytics/provider";
+import { ReactNode } from "react";
+import { useAnalyticsConfig, useApiRoute, useFernUser } from "../atoms";
+
+export function CustomerAnalytics(): ReactNode {
+    const config = useAnalyticsConfig();
+    const user = useFernUser();
+    const posthogRoute = useApiRoute("/api/fern-docs/analytics/posthog");
+    return <AnalyticsProvider {...config} email={user?.email} name={user?.name} posthogRoute={posthogRoute} />;
+}
diff --git a/packages/ui/app/src/docs/NextApp.tsx b/packages/ui/app/src/docs/NextApp.tsx
index 5224e4b2e8..4b44a5a65e 100644
--- a/packages/ui/app/src/docs/NextApp.tsx
+++ b/packages/ui/app/src/docs/NextApp.tsx
@@ -12,6 +12,7 @@ import "../css/globals.scss";
 import { NextNProgress } from "../header/NProgress";
 import { useInterceptNextDataHref } from "../hooks/useInterceptNextDataHref";
 import { ThemeScript } from "../themes/ThemeScript";
+import { CustomerAnalytics } from "./CustomerAnalytics";
 
 export function NextApp({ Component, pageProps, router }: AppProps<DocsProps | undefined>): ReactElement {
     // This is a hack to handle edge-cases related to multitenant subpath rendering:
@@ -24,6 +25,7 @@ export function NextApp({ Component, pageProps, router }: AppProps<DocsProps | u
     return (
         <JotaiProvider store={store}>
             <HydrateAtoms pageProps={pageProps}>
+                <CustomerAnalytics />
                 <ThemeScript colors={pageProps?.colors} />
                 <NextNProgress options={{ showSpinner: false, speed: 400 }} showOnShallow={false} />
                 <Toaster />
diff --git a/packages/ui/app/src/docs/NotFoundPage.tsx b/packages/ui/app/src/docs/NotFoundPage.tsx
new file mode 100644
index 0000000000..04af5e44ad
--- /dev/null
+++ b/packages/ui/app/src/docs/NotFoundPage.tsx
@@ -0,0 +1,19 @@
+import { track } from "@fern-docs/analytics";
+import Error from "next/error";
+import { ReactElement, useEffect } from "react";
+
+/**
+ * This is required for Next.js to generate `_next/static/chunks/pages/404.js`
+ * Which helps prevent a client-side error to be thrown when navigating to a non-existent page
+ */
+
+// NOTE: do not add initial props (SSG or SSR) here or else it will break.
+// The middleware is unable to rewrite to the NextData page route, so it always returns {}.
+// If you use initial props, the middleware's response will probably cause a client-side error to be thrown.
+export function NotFoundPage(): ReactElement {
+    useEffect(() => {
+        track("not_found");
+    }, []);
+
+    return <Error statusCode={404} />;
+}
diff --git a/packages/ui/app/src/feedback/Feedback.tsx b/packages/ui/app/src/feedback/Feedback.tsx
index aa8094dfa5..92f18fd803 100644
--- a/packages/ui/app/src/feedback/Feedback.tsx
+++ b/packages/ui/app/src/feedback/Feedback.tsx
@@ -1,10 +1,10 @@
+import { track } from "@fern-docs/analytics";
 import { FernButton, FernButtonGroup, toast } from "@fern-ui/components";
 import { useKeyboardPress } from "@fern-ui/react-commons";
 import clsx from "clsx";
 import { ThumbsDown, ThumbsUp } from "iconoir-react";
 import { Router } from "next/router";
 import { FC, useCallback, useEffect, useRef, useState } from "react";
-import { capturePosthogEvent, registerPosthogProperties } from "../analytics/posthog";
 import { FeedbackForm } from "./FeedbackForm";
 import { FeedbackFormDialog } from "./FeedbackFormDialog";
 
@@ -36,7 +36,7 @@ export const Feedback: FC<FeedbackProps> = ({ className }) => {
         setIsHelpful(true);
         setShowFeedbackInput(true);
         textareaRef.current?.focus();
-        capturePosthogEvent("feedback_voted", {
+        track("feedback_voted", {
             satisfied: true,
         });
     };
@@ -44,7 +44,7 @@ export const Feedback: FC<FeedbackProps> = ({ className }) => {
         setIsHelpful(false);
         setShowFeedbackInput(true);
         textareaRef.current?.focus();
-        capturePosthogEvent("feedback_voted", {
+        track("feedback_voted", {
             satisfied: false,
         });
     };
@@ -61,8 +61,7 @@ export const Feedback: FC<FeedbackProps> = ({ className }) => {
             email: string;
             showEmailInput: boolean | "indeterminate";
         }) => {
-            registerPosthogProperties({ email });
-            capturePosthogEvent("feedback_submitted", {
+            track("feedback_submitted", {
                 satisfied: isHelpful ? true : false,
                 feedback: feedbackId,
                 message: feedbackMessage,
diff --git a/packages/ui/app/src/feedback/FeedbackPopover.tsx b/packages/ui/app/src/feedback/FeedbackPopover.tsx
index 24bfa2ca7e..cbcee667fa 100644
--- a/packages/ui/app/src/feedback/FeedbackPopover.tsx
+++ b/packages/ui/app/src/feedback/FeedbackPopover.tsx
@@ -1,10 +1,10 @@
+import { track } from "@fern-docs/analytics";
 import { FernButton, FernButtonGroup } from "@fern-ui/components";
 import clsx from "clsx";
 import { motion } from "framer-motion";
 import { Check, ThumbsDown, ThumbsUp } from "iconoir-react";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import * as Selection from "selection-popover";
-import { capturePosthogEvent } from "../analytics/posthog";
 import { useSelection } from "../hooks/useSelection";
 import { FeedbackForm } from "./FeedbackForm";
 
@@ -82,7 +82,7 @@ export const FeedbackPopover = forwardRef<SelectionTextToolbarElement, Selection
 
         const handleThumbsUp = useCallback(() => {
             setIsHelpful(true);
-            capturePosthogEvent("feedback_voted", {
+            track("feedback_voted", {
                 satisfied: true,
                 selectedText: selection?.toString().trim(),
             });
@@ -90,7 +90,7 @@ export const FeedbackPopover = forwardRef<SelectionTextToolbarElement, Selection
 
         const handleThumbsDown = useCallback(() => {
             setIsHelpful(false);
-            capturePosthogEvent("feedback_voted", {
+            track("feedback_voted", {
                 satisfied: false,
                 selectedText: selection?.toString().trim(),
             });
@@ -105,7 +105,7 @@ export const FeedbackPopover = forwardRef<SelectionTextToolbarElement, Selection
                 email: string;
                 showEmailInput: boolean | "indeterminate";
             }) => {
-                capturePosthogEvent("feedback_submitted", {
+                track("feedback_submitted", {
                     satisfied: isHelpful,
                     feedback: feedbackId,
                     selectedText: selection?.toString().trim(),
diff --git a/packages/ui/app/src/header/VersionDropdown.tsx b/packages/ui/app/src/header/VersionDropdown.tsx
index 3632f1c7d5..fce768e052 100644
--- a/packages/ui/app/src/header/VersionDropdown.tsx
+++ b/packages/ui/app/src/header/VersionDropdown.tsx
@@ -2,9 +2,8 @@ import { FernButton } from "@fern-ui/components";
 import { getVersionAvailabilityLabel } from "@fern-ui/fdr-utils";
 import { Lock, NavArrowDown } from "iconoir-react";
 import { useAtomValue } from "jotai";
-import { CURRENT_VERSION_ID_ATOM, VERSIONS_ATOM } from "../atoms";
+import { CURRENT_VERSION_ID_ATOM, VERSIONS_ATOM, useToHref } from "../atoms";
 import { FernLinkDropdown } from "../components/FernLinkDropdown";
-import { useToHref } from "../hooks/useHref";
 
 export declare namespace VersionDropdown {
     export interface Props {}
diff --git a/packages/ui/app/src/hooks/__test__/useHref.test.ts b/packages/ui/app/src/hooks/__test__/useHref.test.ts
index 629d6f19fb..bef268711d 100644
--- a/packages/ui/app/src/hooks/__test__/useHref.test.ts
+++ b/packages/ui/app/src/hooks/__test__/useHref.test.ts
@@ -1,5 +1,5 @@
 import { FernNavigation } from "@fern-api/fdr-sdk";
-import { getToHref } from "../useHref";
+import { getToHref } from "../../atoms";
 
 const toHrefWithLeadingSlash = getToHref(true);
 const toHrefWithoutLeadingSlash = getToHref(false);
diff --git a/packages/ui/app/src/hooks/useApiRoute.ts b/packages/ui/app/src/hooks/useApiRoute.ts
deleted file mode 100644
index 862de3590b..0000000000
--- a/packages/ui/app/src/hooks/useApiRoute.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Getter, useAtomValue } from "jotai";
-import urlJoin from "url-join";
-import { BASEPATH_ATOM, TRAILING_SLASH_ATOM } from "../atoms";
-
-export type FernDocsApiRoute = `/api/fern-docs/${string}`;
-
-interface Options {
-    includeTrailingSlash?: boolean;
-    basepath?: string;
-}
-
-// see useHref.ts for a similar pattern
-export function getApiRouteSupplier({ includeTrailingSlash, basepath }: Options): (route: FernDocsApiRoute) => string {
-    return (route) => {
-        // note: if the first argument of urjoin is "", it will strip the leading slash. `|| "/"` ensures "" -> "/"
-        if (includeTrailingSlash) {
-            return urlJoin(basepath || "/", route, "/");
-        } else {
-            return urlJoin(basepath || "/", route);
-        }
-    };
-}
-
-export function useApiRoute(route: FernDocsApiRoute, options?: Options): string {
-    const basepath = useAtomValue(BASEPATH_ATOM);
-    const includeTrailingSlash = useAtomValue(TRAILING_SLASH_ATOM);
-    return getApiRouteSupplier({ includeTrailingSlash, basepath, ...options })(route);
-}
-
-export function selectApiRoute(get: Getter, route: FernDocsApiRoute, options?: Options): string {
-    const basepath = get(BASEPATH_ATOM);
-    const includeTrailingSlash = get(TRAILING_SLASH_ATOM);
-    return getApiRouteSupplier({ includeTrailingSlash, basepath, ...options })(route);
-}
diff --git a/packages/ui/app/src/hooks/useApiRouteSWR.ts b/packages/ui/app/src/hooks/useApiRouteSWR.ts
deleted file mode 100644
index 826b506a45..0000000000
--- a/packages/ui/app/src/hooks/useApiRouteSWR.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import useSWR, { Fetcher, SWRConfiguration, SWRResponse } from "swr";
-import useSWRImmutable from "swr/immutable";
-import { z } from "zod";
-import { withSkewProtection } from "../util/withSkewProtection";
-import { FernDocsApiRoute, useApiRoute } from "./useApiRoute";
-
-interface Options<T> extends SWRConfiguration<T, Error, Fetcher<T>> {
-    disabled?: boolean;
-    request?: RequestInit & { headers?: Record<string, string> };
-    validate?: z.ZodType<T>;
-}
-
-function createFetcher<T>(
-    init?: RequestInit & { headers?: Record<string, string> },
-    validate?: z.ZodType<T>,
-): (url: string) => Promise<T> {
-    return async (url: string): Promise<T> => {
-        const request = { ...init, headers: withSkewProtection(init?.headers) };
-        const r = await fetch(url, request);
-        const data = await r.json();
-        if (validate) {
-            return validate.parse(data);
-        }
-        return data;
-    };
-}
-
-export function useApiRouteSWR<T>(
-    route: FernDocsApiRoute,
-    { disabled, request, validate, ...options }: Options<T> = {},
-): SWRResponse<T> {
-    const key = useApiRoute(route);
-    return useSWR(disabled ? null : key, createFetcher(request, validate), options);
-}
-
-export function useApiRouteSWRImmutable<T>(
-    route: FernDocsApiRoute,
-    { disabled, request, validate, ...options }: Options<T> = {},
-): SWRResponse<T> {
-    const key = useApiRoute(route);
-    return useSWRImmutable(disabled ? null : key, createFetcher(request, validate), options);
-}
diff --git a/packages/ui/app/src/hooks/useHref.ts b/packages/ui/app/src/hooks/useHref.ts
deleted file mode 100644
index 325fdb3266..0000000000
--- a/packages/ui/app/src/hooks/useHref.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
-import { withDefaultProtocol } from "@fern-api/ui-core-utils";
-import { Atom, useAtomValue } from "jotai";
-import urlJoin from "url-join";
-import { TRAILING_SLASH_ATOM } from "../atoms";
-
-export function getToHref(includeTrailingSlash: boolean = false): (slug: FernNavigation.Slug, host?: string) => string {
-    return (slug, host) => {
-        const path = slug === "" ? "/" : includeTrailingSlash ? `/${slug}/` : `/${slug}`;
-        if (host == null) {
-            return path;
-        }
-        return urlJoin(withDefaultProtocol(host), path);
-    };
-}
-
-export function useToHref(): (slug: FernNavigation.Slug) => string {
-    return getToHref(useAtomValue(TRAILING_SLASH_ATOM));
-}
-
-export function useHref(slug: FernNavigation.Slug, anchor?: string): string;
-export function useHref(slug: FernNavigation.Slug | undefined, anchor?: string): string | undefined;
-export function useHref(slug: FernNavigation.Slug | undefined, anchor?: string): string | undefined {
-    const toHref = useToHref();
-    if (slug == null) {
-        return anchor;
-    }
-    const pathName = toHref(slug);
-    return anchor != null ? `${pathName}#${anchor}` : pathName;
-}
-
-export function selectHref(get: <T>(atom: Atom<T>) => T, slug: FernNavigation.Slug): string {
-    return getToHref(get(TRAILING_SLASH_ATOM))(slug);
-}
diff --git a/packages/ui/app/src/hooks/useSidebarTabHref.ts b/packages/ui/app/src/hooks/useSidebarTabHref.ts
index 3b85aeccbb..bb2c083d20 100644
--- a/packages/ui/app/src/hooks/useSidebarTabHref.ts
+++ b/packages/ui/app/src/hooks/useSidebarTabHref.ts
@@ -1,6 +1,6 @@
 import { visitDiscriminatedUnion } from "@fern-api/ui-core-utils";
 import { SidebarTab } from "@fern-ui/fdr-utils";
-import { useToHref } from "./useHref";
+import { useToHref } from "../atoms";
 
 export function useSidebarTabHref(tab: SidebarTab): string {
     const toHref = useToHref();
diff --git a/packages/ui/app/src/hooks/useStandardProxyEnvironment.ts b/packages/ui/app/src/hooks/useStandardProxyEnvironment.ts
index c64498e515..5f9f20a2e8 100644
--- a/packages/ui/app/src/hooks/useStandardProxyEnvironment.ts
+++ b/packages/ui/app/src/hooks/useStandardProxyEnvironment.ts
@@ -1,7 +1,6 @@
 import { withDefaultProtocol } from "@fern-api/ui-core-utils";
 import { once } from "es-toolkit/function";
-import { useBasePath, useFeatureFlags } from "../atoms";
-import { useApiRoute } from "./useApiRoute";
+import { useApiRoute, useBasePath, useFeatureFlags } from "../atoms";
 
 const APP_BUILDWITHFERN_COM = "app.buildwithfern.com";
 
diff --git a/packages/ui/app/src/index.ts b/packages/ui/app/src/index.ts
index 5f7497bc40..114380e8e9 100644
--- a/packages/ui/app/src/index.ts
+++ b/packages/ui/app/src/index.ts
@@ -1,9 +1,8 @@
-export { capturePosthogEvent } from "./analytics/posthog";
-export { type CustomerAnalytics } from "./analytics/types";
+export { EMPTY_ANALYTICS_CONFIG, getApiRouteSupplier } from "./atoms";
 export type { DocsProps, NavbarLink } from "./atoms";
 export * from "./docs/DocsPage";
 export * from "./docs/NextApp";
-export { getApiRouteSupplier } from "./hooks/useApiRoute";
+export { NotFoundPage } from "./docs/NotFoundPage";
 export * from "./mdx/types";
 export { Stream } from "./playground/Stream";
 export { ProxyRequestSchema } from "./playground/types";
diff --git a/packages/ui/app/src/playground/auth/PlaygroundCardTriggerApiKeyInjected.tsx b/packages/ui/app/src/playground/auth/PlaygroundCardTriggerApiKeyInjected.tsx
index d35e024282..9aee610ce3 100644
--- a/packages/ui/app/src/playground/auth/PlaygroundCardTriggerApiKeyInjected.tsx
+++ b/packages/ui/app/src/playground/auth/PlaygroundCardTriggerApiKeyInjected.tsx
@@ -6,8 +6,7 @@ import { useAtomValue, useSetAtom } from "jotai";
 import { useSearchParams } from "next/navigation";
 import { ReactElement, useEffect } from "react";
 import urlJoin from "url-join";
-import { PLAYGROUND_AUTH_STATE_ATOM, PLAYGROUND_AUTH_STATE_BEARER_TOKEN_ATOM } from "../../atoms";
-import { useApiRoute } from "../../hooks/useApiRoute";
+import { PLAYGROUND_AUTH_STATE_ATOM, PLAYGROUND_AUTH_STATE_BEARER_TOKEN_ATOM, useApiRoute } from "../../atoms";
 import { Callout } from "../../mdx/components/callout";
 import { PlaygroundAuthorizationForm } from "./PlaygroundAuthorizationForm";
 
diff --git a/packages/ui/app/src/playground/endpoint/PlaygroundEndpoint.tsx b/packages/ui/app/src/playground/endpoint/PlaygroundEndpoint.tsx
index a5bfe88cc0..87718adefc 100644
--- a/packages/ui/app/src/playground/endpoint/PlaygroundEndpoint.tsx
+++ b/packages/ui/app/src/playground/endpoint/PlaygroundEndpoint.tsx
@@ -1,6 +1,7 @@
 import type { EndpointContext } from "@fern-api/fdr-sdk/api-definition";
-import { buildEndpointUrl } from "@fern-api/fdr-sdk/api-definition";
+import { buildEndpointUrl, toCurlyBraceEndpointPathLiteral } from "@fern-api/fdr-sdk/api-definition";
 import { unknownToString } from "@fern-api/ui-core-utils";
+import { track } from "@fern-docs/analytics";
 import { FernTooltipProvider } from "@fern-ui/components";
 import { Loadable, failed, loaded, loading, notStartedLoading } from "@fern-ui/loadable";
 import { useEventCallback } from "@fern-ui/react-commons";
@@ -13,11 +14,11 @@ import {
     PLAYGROUND_AUTH_STATE_ATOM,
     PLAYGROUND_AUTH_STATE_OAUTH_ATOM,
     store,
+    useApiRoute,
     useBasePath,
     useFeatureFlags,
     usePlaygroundEndpointFormState,
 } from "../../atoms";
-import { useApiRoute } from "../../hooks/useApiRoute";
 import { usePlaygroundSettings } from "../../hooks/usePlaygroundSettings";
 import { getAppBuildwithfernCom } from "../../hooks/useStandardProxyEnvironment";
 import { executeGrpc } from "../fetch-utils/executeGrpc";
@@ -62,13 +63,6 @@ export const PlaygroundEndpoint = ({ context }: { context: EndpointContext }): R
     const uploadEnvironment = useApiRoute("/api/fern-docs/upload", { basepath: proxyBasePath });
     const [baseUrl, environmentId] = usePlaygroundBaseUrl(endpoint);
 
-    // TODO: remove potentially
-    // const grpcClient = useMemo(() => {
-    //     return new FernProxyClient({
-    //         environment: "https://kmxxylsbwyu2f4x7rbhreris3i0zfbys.lambda-url.us-east-1.on.aws/",
-    //     });
-    // }, []);
-
     const setOAuthValue = useSetAtom(PLAYGROUND_AUTH_STATE_OAUTH_ATOM);
 
     const sendRequest = useCallback(async () => {
@@ -77,8 +71,7 @@ export const PlaygroundEndpoint = ({ context }: { context: EndpointContext }): R
         }
         setResponse(loading());
         try {
-            const { capturePosthogEvent } = await import("../../analytics/posthog");
-            capturePosthogEvent("api_playground_request_sent", {
+            track("api_playground_request_sent", {
                 endpointId: endpoint.id,
                 endpointName: node.title,
                 method: endpoint.method,
@@ -147,17 +140,18 @@ export const PlaygroundEndpoint = ({ context }: { context: EndpointContext }): R
                 const res = await executeProxyRest(proxyEnvironment, req);
                 setResponse(loaded(res));
                 if (res.type !== "stream") {
-                    capturePosthogEvent("api_playground_request_received", {
+                    track("api_playground_request_received", {
                         endpointId: endpoint.id,
                         endpointName: node.title,
                         method: endpoint.method,
+                        endpointPath: toCurlyBraceEndpointPathLiteral(endpoint.path),
+                        environment: baseUrl,
                         docsRoute: `/${node.slug}`,
-                        response: {
-                            status: res.response.status,
-                            statusText: res.response.statusText,
-                            time: res.time,
-                            size: res.size,
-                        },
+
+                        status: res.response.status,
+                        statusText: res.response.statusText,
+                        responseTime: res.time,
+                        responseSize: res.size ?? undefined,
                     });
                 }
             }
diff --git a/packages/ui/app/src/playground/endpoint/PlaygroundEndpointSelectorLeafNode.tsx b/packages/ui/app/src/playground/endpoint/PlaygroundEndpointSelectorLeafNode.tsx
index 3ffbec1122..5e71e91f6b 100644
--- a/packages/ui/app/src/playground/endpoint/PlaygroundEndpointSelectorLeafNode.tsx
+++ b/packages/ui/app/src/playground/endpoint/PlaygroundEndpointSelectorLeafNode.tsx
@@ -5,9 +5,8 @@ import clsx from "clsx";
 import { atom, useAtomValue } from "jotai";
 import { ReactElement, forwardRef } from "react";
 import { useMemoOne } from "use-memo-one";
-import { getApiDefinitionAtom, useOpenPlayground } from "../../atoms";
+import { getApiDefinitionAtom, useOpenPlayground, usePreloadApiLeaf } from "../../atoms";
 import { Markdown } from "../../mdx/Markdown";
-import { usePreloadApiLeaf } from "../hooks/usePreloadApiLeaf";
 
 interface PlaygroundEndpointSelectorLeafNodeProps {
     node: FernNavigation.EndpointNode | FernNavigation.WebSocketNode;
diff --git a/packages/ui/app/src/playground/hooks/index.ts b/packages/ui/app/src/playground/hooks/index.ts
index 38f532a428..204d9ce880 100644
--- a/packages/ui/app/src/playground/hooks/index.ts
+++ b/packages/ui/app/src/playground/hooks/index.ts
@@ -1,5 +1,4 @@
 export { useEndpointContext } from "./useEndpointContext";
 export { useOAuthEndpointContext } from "./useOAuthEndpointContext";
-export { usePreloadApiLeaf } from "./usePreloadApiLeaf";
 export { useWebSocketContext } from "./useWebSocketContext";
 export { useWebsocketMessages } from "./useWebsocketMessages";
diff --git a/packages/ui/app/src/playground/hooks/useEndpointContext.ts b/packages/ui/app/src/playground/hooks/useEndpointContext.ts
index 0835eb14f7..7f5bbf22a3 100644
--- a/packages/ui/app/src/playground/hooks/useEndpointContext.ts
+++ b/packages/ui/app/src/playground/hooks/useEndpointContext.ts
@@ -1,8 +1,7 @@
 import { createEndpointContext, type ApiDefinition, type EndpointContext } from "@fern-api/fdr-sdk/api-definition";
 import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { useMemo } from "react";
-import { useWriteApiDefinitionAtom } from "../../atoms";
-import { useApiRouteSWRImmutable } from "../../hooks/useApiRouteSWR";
+import { useApiRouteSWRImmutable, useWriteApiDefinitionAtom } from "../../atoms";
 
 interface LoadableEndpointContext {
     context: EndpointContext | undefined;
diff --git a/packages/ui/app/src/playground/hooks/usePreloadApiLeaf.ts b/packages/ui/app/src/playground/hooks/usePreloadApiLeaf.ts
deleted file mode 100644
index 4c21cbfc48..0000000000
--- a/packages/ui/app/src/playground/hooks/usePreloadApiLeaf.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { ApiDefinition } from "@fern-api/fdr-sdk/api-definition";
-import type { NavigationNodeApiLeaf } from "@fern-api/fdr-sdk/navigation";
-import { visitDiscriminatedUnion } from "@fern-api/ui-core-utils";
-import { useAtomCallback } from "jotai/utils";
-import { preload } from "swr";
-import { useCallbackOne } from "use-memo-one";
-import { WRITE_API_DEFINITION_ATOM } from "../../atoms";
-import { selectApiRoute } from "../../hooks/useApiRoute";
-
-const fetcher = (url: string): Promise<ApiDefinition> => fetch(url).then((res) => res.json());
-
-export function usePreloadApiLeaf(): (node: NavigationNodeApiLeaf) => Promise<ApiDefinition> {
-    return useAtomCallback(
-        useCallbackOne(async (get, set, node: NavigationNodeApiLeaf) => {
-            const route = selectApiRoute(
-                get,
-                `/api/fern-docs/api-definition/${encodeURIComponent(node.apiDefinitionId)}/${visitDiscriminatedUnion(
-                    node,
-                )._visit({
-                    endpoint: (node) => `endpoint/${encodeURIComponent(node.endpointId)}`,
-                    webSocket: (node) => `websocket/${encodeURIComponent(node.webSocketId)}`,
-                    webhook: (node) => `webhook/${encodeURIComponent(node.webhookId)}`,
-                })}`,
-            );
-            const apiDefinition = await preload(route, fetcher);
-            set(WRITE_API_DEFINITION_ATOM, apiDefinition);
-            return apiDefinition;
-        }, []),
-    );
-}
diff --git a/packages/ui/app/src/playground/hooks/useWebSocketContext.ts b/packages/ui/app/src/playground/hooks/useWebSocketContext.ts
index 05e86458b8..bc83a9e4fe 100644
--- a/packages/ui/app/src/playground/hooks/useWebSocketContext.ts
+++ b/packages/ui/app/src/playground/hooks/useWebSocketContext.ts
@@ -3,8 +3,7 @@ import { createWebSocketContext } from "@fern-api/fdr-sdk/api-definition";
 import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { useSetAtom } from "jotai";
 import { useEffect, useMemo } from "react";
-import { WRITE_API_DEFINITION_ATOM } from "../../atoms";
-import { useApiRouteSWRImmutable } from "../../hooks/useApiRouteSWR";
+import { WRITE_API_DEFINITION_ATOM, useApiRouteSWRImmutable } from "../../atoms";
 
 interface LoadableWebSocketContext {
     context: WebSocketContext | undefined;
diff --git a/packages/ui/app/src/search/SearchHit.tsx b/packages/ui/app/src/search/SearchHit.tsx
index 20d32f493e..4b12b49048 100644
--- a/packages/ui/app/src/search/SearchHit.tsx
+++ b/packages/ui/app/src/search/SearchHit.tsx
@@ -4,8 +4,7 @@ import { getSlugForSearchRecord, type SearchRecord } from "@fern-ui/search-utils
 import cn from "clsx";
 import Link from "next/link";
 import { ReactElement, useMemo } from "react";
-import { useBasePath, useCloseMobileSidebar, useCloseSearchDialog } from "../atoms";
-import { useHref } from "../hooks/useHref";
+import { useBasePath, useCloseMobileSidebar, useCloseSearchDialog, useHref } from "../atoms";
 import { EndpointRecord } from "./content/EndpointRecord";
 import { EndpointRecordV2 } from "./content/EndpointRecordV2";
 import { EndpointRecordV3 } from "./content/EndpointRecordV3";
diff --git a/packages/ui/app/src/search/SearchHits.tsx b/packages/ui/app/src/search/SearchHits.tsx
index 77b32f6eb9..23bc0c2f41 100644
--- a/packages/ui/app/src/search/SearchHits.tsx
+++ b/packages/ui/app/src/search/SearchHits.tsx
@@ -6,9 +6,8 @@ import { Minus, Xmark } from "iconoir-react";
 import { useRouter } from "next/router";
 import React, { PropsWithChildren, useEffect, useMemo, useRef, useState } from "react";
 import { useInfiniteHits, useInstantSearch } from "react-instantsearch";
-import { useBasePath, useCloseSearchDialog } from "../atoms";
+import { useBasePath, useCloseSearchDialog, useToHref } from "../atoms";
 import { Separator } from "../components/Separator";
-import { useToHref } from "../hooks/useHref";
 import { SearchHit } from "./SearchHit";
 
 export const EmptyStateView: React.FC<PropsWithChildren> = ({ children }) => {
diff --git a/packages/ui/app/src/search/SearchV2.tsx b/packages/ui/app/src/search/SearchV2.tsx
index 7cc41fa7b5..86b14a1dab 100644
--- a/packages/ui/app/src/search/SearchV2.tsx
+++ b/packages/ui/app/src/search/SearchV2.tsx
@@ -31,14 +31,14 @@ import {
     HAS_API_PLAYGROUND,
     THEME_SWITCH_ENABLED_ATOM,
     atomWithStorageString,
+    useApiRoute,
+    useApiRouteSWRImmutable,
     useFeatureFlags,
     useFernUser,
     useIsPlaygroundOpen,
     useSetTheme,
     useTogglePlayground,
 } from "../atoms";
-import { useApiRoute } from "../hooks/useApiRoute";
-import { useApiRouteSWRImmutable } from "../hooks/useApiRouteSWR";
 
 const ALGOLIA_USER_TOKEN_KEY = "algolia-user-token";
 
diff --git a/packages/ui/app/src/seo/getSeoProp.ts b/packages/ui/app/src/seo/getSeoProp.ts
index a0f593480b..6071d58c4c 100644
--- a/packages/ui/app/src/seo/getSeoProp.ts
+++ b/packages/ui/app/src/seo/getSeoProp.ts
@@ -4,7 +4,7 @@ import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { assertNonNullish, visitDiscriminatedUnion } from "@fern-api/ui-core-utils";
 import { getFrontmatter, markdownToString } from "@fern-ui/fern-docs-mdx";
 import type { LinkTag, MetaTag, NextSeoProps } from "@fern-ui/next-seo";
-import { getToHref } from "../hooks/useHref";
+import { getToHref } from "../atoms";
 import { getFontExtension } from "../themes/stylesheet/getFontVariables";
 import { getBreadcrumbList } from "./getBreadcrumbList";
 
diff --git a/packages/ui/app/src/services/useApiKeyInjectionConfig.ts b/packages/ui/app/src/services/useApiKeyInjectionConfig.ts
index 9615a44262..bc0933416d 100644
--- a/packages/ui/app/src/services/useApiKeyInjectionConfig.ts
+++ b/packages/ui/app/src/services/useApiKeyInjectionConfig.ts
@@ -1,5 +1,5 @@
 import type { APIKeyInjectionConfig } from "@fern-ui/fern-docs-auth";
-import { useApiRouteSWR } from "../hooks/useApiRouteSWR";
+import { useApiRouteSWR } from "../atoms";
 
 const DEFAULT = { enabled: false as const, returnToQueryParam: "state" };
 
diff --git a/packages/ui/app/src/services/useSearchService.ts b/packages/ui/app/src/services/useSearchService.ts
index 4b4844a455..521afbd1f7 100644
--- a/packages/ui/app/src/services/useSearchService.ts
+++ b/packages/ui/app/src/services/useSearchService.ts
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import type { SearchConfig } from "@fern-ui/search-utils";
+import { useApiRouteSWR } from "../atoms";
 import { useIsLocalPreview } from "../contexts/local-preview";
-import { useApiRouteSWR } from "../hooks/useApiRouteSWR";
 
 export type SearchCredentials = {
     appId: string;
diff --git a/packages/ui/app/src/sidebar/SidebarLink.tsx b/packages/ui/app/src/sidebar/SidebarLink.tsx
index d25dd80eab..8e43c99541 100644
--- a/packages/ui/app/src/sidebar/SidebarLink.tsx
+++ b/packages/ui/app/src/sidebar/SidebarLink.tsx
@@ -19,9 +19,8 @@ import {
     useRef,
 } from "react";
 import { useCallbackOne } from "use-memo-one";
-import { IS_READY_ATOM, SIDEBAR_SCROLL_CONTAINER_ATOM, useAtomEffect, useCloseMobileSidebar } from "../atoms";
+import { IS_READY_ATOM, SIDEBAR_SCROLL_CONTAINER_ATOM, useAtomEffect, useCloseMobileSidebar, useHref } from "../atoms";
 import { FernLink } from "../components/FernLink";
-import { useHref } from "../hooks/useHref";
 import { scrollToRoute } from "../util/anchor";
 import { scrollToCenter } from "../util/scrollToCenter";
 
diff --git a/packages/ui/app/tsconfig.build.json b/packages/ui/app/tsconfig.build.json
deleted file mode 100644
index c1a3106bd1..0000000000
--- a/packages/ui/app/tsconfig.build.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "./tsconfig.json",
-  "exclude": ["**/__test__/**"]
-}
diff --git a/packages/ui/app/tsconfig.json b/packages/ui/app/tsconfig.json
index 0bc4419a62..c95da6d3a2 100644
--- a/packages/ui/app/tsconfig.json
+++ b/packages/ui/app/tsconfig.json
@@ -49,6 +49,9 @@
     },
     {
       "path": "../fern-docs-syntax-highlighter"
+    },
+    {
+      "path": "../analytics"
     }
   ]
 }
diff --git a/packages/ui/docs-bundle/next.config.mjs b/packages/ui/docs-bundle/next.config.mjs
index dd08f49dba..665a9cd3e4 100644
--- a/packages/ui/docs-bundle/next.config.mjs
+++ b/packages/ui/docs-bundle/next.config.mjs
@@ -56,23 +56,38 @@ const nextConfig = {
         "@fern-api/fdr-sdk",
         "@fern-api/template-resolver",
         "@fern-api/ui-core-utils",
+        "@fern-docs/analytics",
         "@fern-ui/components",
         "@fern-ui/fdr-utils",
         "@fern-ui/fern-docs-auth",
         "@fern-ui/fern-docs-edge-config",
         "@fern-ui/fern-docs-mdx",
-        "@fern-ui/fern-docs-utils",
+        "@fern-ui/fern-docs-search-server",
         "@fern-ui/fern-docs-search-ui",
+        "@fern-ui/fern-docs-server",
+        "@fern-ui/fern-docs-syntax-highlighter",
+        "@fern-ui/fern-docs-utils",
         "@fern-ui/loadable",
         "@fern-ui/next-seo",
         "@fern-ui/react-commons",
         "@fern-ui/search-utils",
         "@fern-ui/ui",
+
+        // analytics
+        "@amplitude/analytics-browser",
+        "@datadog/browser-rum",
+        "@hotjar/browser",
+        "@segment/snippet",
+        "fathom-client",
+        "logrocket",
+        "mixpanel-browser",
+        "posthog-js",
+        "zod",
     ],
     experimental: {
         scrollRestoration: true,
         hardNavigate404: true,
-        optimizePackageImports: ["@fern-ui/ui"],
+        optimizePackageImports: ["@fern-ui/ui", "es-toolkit"],
 
         /**
          * If the rewrite comes from another nextjs middleware,
diff --git a/packages/ui/docs-bundle/src/pages/404.tsx b/packages/ui/docs-bundle/src/pages/404.tsx
index 4533c789e1..48bfdf7bc3 100644
--- a/packages/ui/docs-bundle/src/pages/404.tsx
+++ b/packages/ui/docs-bundle/src/pages/404.tsx
@@ -1,19 +1,3 @@
-import { capturePosthogEvent } from "@fern-ui/ui";
-import Error from "next/error";
-import { ReactElement, useEffect } from "react";
+import { NotFoundPage } from "@fern-ui/ui";
 
-/**
- * This is required for Next.js to generate `_next/static/chunks/pages/404.js`
- * Which helps prevent a client-side error to be thrown when navigating to a non-existent page
- */
-
-// NOTE: do not add initial props (SSG or SSR) here or else it will break.
-// The middleware is unable to rewrite to the NextData page route, so it always returns {}.
-// If you use initial props, the middleware's response will probably cause a client-side error to be thrown.
-export default function Page(): ReactElement {
-    useEffect(() => {
-        capturePosthogEvent("not_found");
-    });
-
-    return <Error statusCode={404} />;
-}
+export default NotFoundPage;
diff --git a/packages/ui/docs-bundle/src/server/withInitialProps.ts b/packages/ui/docs-bundle/src/server/withInitialProps.ts
index 3aaf6e9503..a89723a748 100644
--- a/packages/ui/docs-bundle/src/server/withInitialProps.ts
+++ b/packages/ui/docs-bundle/src/server/withInitialProps.ts
@@ -1,3 +1,4 @@
+import { DocsV1Read } from "@fern-api/fdr-sdk/client/types";
 import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { withDefaultProtocol } from "@fern-api/ui-core-utils";
 import visitDiscriminatedUnion from "@fern-api/ui-core-utils/visitDiscriminatedUnion";
@@ -22,6 +23,7 @@ import { getMdxBundler } from "@fern-ui/ui/bundlers";
 import { GetServerSidePropsResult, Redirect } from "next";
 import { ComponentProps } from "react";
 import urlJoin from "url-join";
+import { EMPTY_ANALYTICS_CONFIG } from "../../../app/src/atoms/docs";
 import { DocsLoader } from "./DocsLoader";
 import { getAuthState } from "./auth/getAuthState";
 import { getReturnToQueryParam } from "./auth/return-to";
@@ -328,10 +330,12 @@ export async function withInitialProps({
         ),
         user: authState.authed ? authState.user : undefined,
         fallback: {},
-        // eslint-disable-next-line deprecation/deprecation
-        analytics: await getCustomerAnalytics(docs.baseUrl.domain, docs.baseUrl.basePath),
         theme: featureFlags.isCohereTheme ? "cohere" : "default",
-        analyticsConfig: docs.definition.config.analyticsConfig,
+        analyticsConfig: mergeAnalyticsConfig(
+            docs.definition.config.analyticsConfig,
+            // eslint-disable-next-line deprecation/deprecation
+            await getCustomerAnalytics(docs.baseUrl.domain, docs.baseUrl.basePath),
+        ),
         defaultLang: docs.definition.config.defaultLanguage ?? "curl",
         stylesheet: renderThemeStylesheet(
             colors,
@@ -369,3 +373,30 @@ function withRedirect(destination: string): { redirect: Redirect } {
     }
     return { redirect: { destination, permanent: false } };
 }
+
+function mergeAnalyticsConfig(
+    analytics: DocsV1Read.AnalyticsConfig | undefined,
+    /*
+     * Edge analytics config is deprecated and will be removed in the future.
+     */
+    edgeAnalyticsConfig:
+        | {
+              ga4?: { measurementId: string };
+              gtm?: { tagId: string };
+          }
+        | undefined,
+): DocsV1Read.AnalyticsConfig | undefined {
+    if (!edgeAnalyticsConfig) {
+        return analytics;
+    }
+
+    const ga4MeasurementId = analytics?.ga4?.measurementId ?? edgeAnalyticsConfig.ga4?.measurementId;
+    const gtmTagId = analytics?.gtm?.containerId ?? edgeAnalyticsConfig.gtm?.tagId;
+
+    return {
+        ...EMPTY_ANALYTICS_CONFIG,
+        ...analytics,
+        ga4: ga4MeasurementId != null ? { measurementId: ga4MeasurementId } : undefined,
+        gtm: gtmTagId != null ? { containerId: gtmTagId } : undefined,
+    };
+}
diff --git a/packages/ui/docs-bundle/tsconfig.json b/packages/ui/docs-bundle/tsconfig.json
index 1de58e5a0b..df98f6154a 100644
--- a/packages/ui/docs-bundle/tsconfig.json
+++ b/packages/ui/docs-bundle/tsconfig.json
@@ -39,7 +39,7 @@
       "path": "../../fdr-sdk/tsconfig.build.json"
     },
     {
-      "path": "../app/tsconfig.build.json"
+      "path": "../app"
     },
     {
       "path": "../components"
diff --git a/packages/ui/fern-docs-edge-config/src/getCustomerAnalytics.ts b/packages/ui/fern-docs-edge-config/src/getCustomerAnalytics.ts
index 725d397838..0ecafbff3a 100644
--- a/packages/ui/fern-docs-edge-config/src/getCustomerAnalytics.ts
+++ b/packages/ui/fern-docs-edge-config/src/getCustomerAnalytics.ts
@@ -1,14 +1,13 @@
 import { get } from "@vercel/edge-config";
 import urlJoin from "url-join";
 
-interface GTMParams {
-    tagId: string;
-}
 interface CustomerAnalytics {
     ga4?: {
         measurementId: string;
     };
-    gtm?: GTMParams;
+    gtm?: {
+        tagId: string;
+    };
 }
 
 /**
diff --git a/packages/ui/local-preview-bundle/src/utils/getDocsPageProps.ts b/packages/ui/local-preview-bundle/src/utils/getDocsPageProps.ts
index 16b78da8ed..cf16e0bf08 100644
--- a/packages/ui/local-preview-bundle/src/utils/getDocsPageProps.ts
+++ b/packages/ui/local-preview-bundle/src/utils/getDocsPageProps.ts
@@ -212,7 +212,6 @@ export async function getDocsPageProps(
             false,
         ),
         fallback: {},
-        analytics: undefined,
         analyticsConfig: docs.definition.config.analyticsConfig,
         theme: docs.baseUrl.domain.includes("cohere") ? "cohere" : "default",
         user: undefined,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c54d74a46f..289a808bc2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1095,8 +1095,87 @@ importers:
         specifier: 5.4.3
         version: 5.4.3
 
+  packages/ui/analytics:
+    dependencies:
+      '@amplitude/analytics-browser':
+        specifier: ^2.11.10
+        version: 2.11.10
+      '@datadog/browser-rum':
+        specifier: ^5.34.0
+        version: 5.34.0
+      '@hotjar/browser':
+        specifier: ^1.0.9
+        version: 1.0.9
+      '@segment/snippet':
+        specifier: ^5.2.1
+        version: 5.2.1
+      fathom-client:
+        specifier: ^3.7.2
+        version: 3.7.2
+      logrocket:
+        specifier: ^9.0.0
+        version: 9.0.0
+      mixpanel-browser:
+        specifier: ^2.57.1
+        version: 2.57.1
+      posthog-js:
+        specifier: ^1.154.5
+        version: 1.154.5
+      zod:
+        specifier: ^3.24.1
+        version: 3.24.1
+    devDependencies:
+      '@fern-api/fdr-sdk':
+        specifier: workspace:*
+        version: link:../../fdr-sdk
+      '@fern-platform/configs':
+        specifier: workspace:*
+        version: link:../../configs
+      '@types/mixpanel-browser':
+        specifier: ^2.50.2
+        version: 2.50.2
+      '@types/node':
+        specifier: ^18.7.18
+        version: 18.19.33
+      '@types/react':
+        specifier: ^18
+        version: 18.3.3
+      '@types/react-dom':
+        specifier: ^18.3.0
+        version: 18.3.0
+      depcheck:
+        specifier: ^1.4.3
+        version: 1.4.7
+      eslint:
+        specifier: ^8.56.0
+        version: 8.57.0
+      next:
+        specifier: npm:@fern-api/next@14.2.9-fork.2
+        version: '@fern-api/next@14.2.9-fork.2(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.47.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.0)'
+      organize-imports-cli:
+        specifier: ^0.10.0
+        version: 0.10.0
+      prettier:
+        specifier: ^3.3.2
+        version: 3.3.3
+      react:
+        specifier: 18.3.1
+        version: 18.3.1
+      react-dom:
+        specifier: 18.3.1
+        version: 18.3.1(react@18.3.1)
+      typescript:
+        specifier: 5.4.3
+        version: 5.4.3
+
   packages/ui/app:
     dependencies:
+      '@amplitude/analytics-browser':
+        specifier: ^2.11.10
+        version: 2.11.10
+      '@datadog/browser-rum':
+        specifier: ^5.34.0
+        version: 5.34.0
       '@emotion/is-prop-valid':
         specifier: ^1.2.2
         version: 1.2.2
@@ -1109,6 +1188,9 @@ importers:
       '@fern-api/ui-core-utils':
         specifier: workspace:*
         version: link:../../commons/core-utils
+      '@fern-docs/analytics':
+        specifier: workspace:*
+        version: link:../analytics
       '@fern-ui/components':
         specifier: workspace:*
         version: link:../components
@@ -1142,12 +1224,12 @@ importers:
       '@fern-ui/search-utils':
         specifier: workspace:*
         version: link:../../commons/search-utils
+      '@hotjar/browser':
+        specifier: ^1.0.9
+        version: 1.0.9
       '@inkeep/widgets':
         specifier: ^0.2.288
         version: 0.2.288(@internationalized/date@3.5.4)(@types/react@18.3.3)(jsdom@24.0.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.4.3)
-      '@next/third-parties':
-        specifier: 14.2.9
-        version: 14.2.9(@fern-api/next@14.2.9-fork.2(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.47.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.0))(react@18.3.1)
       '@radix-ui/colors':
         specifier: ^3.0.0
         version: 3.0.0
@@ -1211,6 +1293,9 @@ importers:
       fastdom:
         specifier: ^1.0.12
         version: 1.0.12
+      fathom-client:
+        specifier: ^3.7.2
+        version: 3.7.2
       framer-motion:
         specifier: ^11.2.4
         version: 11.2.4(@emotion/is-prop-valid@1.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1244,12 +1329,18 @@ importers:
       launchdarkly-js-client-sdk:
         specifier: ^3.4.0
         version: 3.4.0
+      logrocket:
+        specifier: ^9.0.0
+        version: 9.0.0
       mdx-bundler:
         specifier: ^10.0.2
         version: 10.0.2(esbuild@0.20.2)
       mermaid:
         specifier: ^11.2.1
         version: 11.3.0
+      mixpanel-browser:
+        specifier: ^2.57.1
+        version: 2.57.1
       moment:
         specifier: ^2.30.1
         version: 2.30.1
@@ -1398,6 +1489,9 @@ importers:
       '@types/mdx':
         specifier: ^2.0.13
         version: 2.0.13
+      '@types/mixpanel-browser':
+        specifier: ^2.50.2
+        version: 2.50.2
       '@types/node':
         specifier: ^18.7.18
         version: 18.19.33
@@ -3354,6 +3448,33 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
+  '@amplitude/analytics-browser@2.11.10':
+    resolution: {integrity: sha512-+bc+KvAvrFTQefmq+iGDuzdtPdJm9HXHPI58yTnHJeXhXDhneH8cGmT6dfL1SvW/W2kGvBdFXiZMoPuHcR0xKg==}
+
+  '@amplitude/analytics-client-common@2.3.6':
+    resolution: {integrity: sha512-4KAaqevqzYJIUzgjBmH80QDmYgzUAE0JpKz2s7w6cjeoX9DrB1gBa+RqWySULiUeIDfx+DTlhsZPMzFn+og17w==}
+
+  '@amplitude/analytics-connector@1.6.2':
+    resolution: {integrity: sha512-9bk2IjyV3VgUdbI3ounKUuP+4u4ABftDWGdOKxshEQrHg6WhgC8V4hdhSHv9wOHebGTvZntRKM5LlSXUyDYBpw==}
+
+  '@amplitude/analytics-core@2.5.5':
+    resolution: {integrity: sha512-OSB1WSD6qYoHyHliZaSujyatik2SP+vtoy8Y0vgRdYIpbE24F2q+SwBF3X5A1IeUqZ5fdpz+BNMwwUVl0Z4Ykg==}
+
+  '@amplitude/analytics-remote-config@0.4.1':
+    resolution: {integrity: sha512-BYl6kQ9qjztrCACsugpxO+foLaQIC0aSEzoXEAb/gwOzInmqkyyI+Ub+aWTBih4xgB/lhWlOcidWHAmNiTJTNw==}
+
+  '@amplitude/analytics-types@2.8.4':
+    resolution: {integrity: sha512-jQ8WY1aPbpBshl0L/0YEeQn/wZlBr8Jlqc20qf8nbuDuimFy8RqAkE+BVaMI86FCkr3AJ7PjMXkGwCSbUx88CA==}
+
+  '@amplitude/experiment-core@0.10.1':
+    resolution: {integrity: sha512-2h0vqOaHoACmNiliGT78hnu9K/tmb7pWU1xw1KitlTtxK6wQqsY/IZPLMwBMG5MLp/AOzNEA/uelODfhBC5+SQ==}
+
+  '@amplitude/plugin-autocapture-browser@1.0.4':
+    resolution: {integrity: sha512-+aUSsH4hRX4bWtSL90S3Irb3JctvIM+6aQ/wRSo1bYtnpXp7JQjWKzTYVxKx41b92Cb5DCBvmYgcWyg75BKi9Q==}
+
+  '@amplitude/plugin-page-view-tracking-browser@2.3.6':
+    resolution: {integrity: sha512-3NsXskUxIA9m4GedGOCIKOkQ1uGUhuYnP/DpvSXXosJEMRSi82vFxBRX7FnYT1AmV32Du2Z2626CEAEy5W4yeQ==}
+
   '@ampproject/remapping@2.3.0':
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
@@ -4435,6 +4556,20 @@ packages:
   '@dabh/diagnostics@2.0.3':
     resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
 
+  '@datadog/browser-core@5.34.0':
+    resolution: {integrity: sha512-h2ZnRXxXRqHzV9uTwonug1QxYaDc6kY5E21yWPvhF1m1VqubOUhMeXw3pVn1pt2Izhs26ApYfepcATG6bmol4Q==}
+
+  '@datadog/browser-rum-core@5.34.0':
+    resolution: {integrity: sha512-XpxIHssem/er/BkLU94RIFFrdDCWQ864IdlwcsyHX02sN/jwm0PRzQfZAs0dZofsRFihfsLPyOOlH9tJ+UB7zw==}
+
+  '@datadog/browser-rum@5.34.0':
+    resolution: {integrity: sha512-6P3R8oji5/ie9V04+/oqrwdWLCK/OCQ5uvii8OGSad3TIEggp99CcRyAFCEy3PUCnAcwO2lpCS8zZUy6zXkFtw==}
+    peerDependencies:
+      '@datadog/browser-logs': 5.34.0
+    peerDependenciesMeta:
+      '@datadog/browser-logs':
+        optional: true
+
   '@discoveryjs/json-ext@0.5.7':
     resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
     engines: {node: '>=10.0.0'}
@@ -4775,6 +4910,9 @@ packages:
   '@hapi/topo@5.1.0':
     resolution: {integrity: sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==}
 
+  '@hotjar/browser@1.0.9':
+    resolution: {integrity: sha512-n9akDMod8BLGpYEQCrHwlYWWd63c1HlhUSXNIDfClZtKYXbUjIUOFlNZNNcUxgHTCsi4l2i+SWKsGsO0t93S8w==}
+
   '@humanwhocodes/config-array@0.11.14':
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
@@ -5159,12 +5297,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@next/third-parties@14.2.9':
-    resolution: {integrity: sha512-fPXe0lZkaMzDucGH+GSwQND/ffvsq7yuBsmLcTiJgj4IIyRUDmB+GshYczk+04w0s/9nTbzuQHDSJNFn03FU9g==}
-    peerDependencies:
-      next: npm:@fern-api/next@14.2.9-fork.2
-      react: 18.3.1
-
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -6252,6 +6384,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@rrweb/types@2.0.0-alpha.18':
+    resolution: {integrity: sha512-iMH3amHthJZ9x3gGmBPmdfim7wLGygC2GciIkw2A6SO8giSn8PHYtRT8OKNH4V+k3SZ6RSnYHcTQxBA7pSWZ3Q==}
+
   '@rushstack/eslint-patch@1.10.2':
     resolution: {integrity: sha512-hw437iINopmQuxWPSUEvqE56NCPsiU8N4AYtfHmJFckclktzK9YQJieD3XkDCDH4OjL+C7zgPUh73R/nrcHrqw==}
 
@@ -7100,6 +7235,9 @@ packages:
   '@types/cors@2.8.17':
     resolution: {integrity: sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==}
 
+  '@types/css-font-loading-module@0.0.7':
+    resolution: {integrity: sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==}
+
   '@types/date-fns@2.6.3':
     resolution: {integrity: sha512-Ke1lw2Ni1t/wMUoLtKFmSNCLozcTBd6vmMqFP4hRzXn6qzkNt97bPAX0x5Y/c15DP43kKvwW1ycStD5+43jVQA==}
     deprecated: This is a stub types definition. date-fns provides its own type definitions, so you do not need this installed.
@@ -7254,6 +7392,9 @@ packages:
   '@types/minimatch@3.0.5':
     resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==}
 
+  '@types/mixpanel-browser@2.50.2':
+    resolution: {integrity: sha512-Iw8cBzplUPfHoeYuasqeYwdbGTNXhN+5kFT9kU+C7zm0NtaiPpKoiuzITr2ZH9KgBsWi2MbG0FOzIg9sQepauQ==}
+
   '@types/ms@0.7.34':
     resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
 
@@ -7782,6 +7923,9 @@ packages:
     resolution: {integrity: sha512-FNoYzHawTMk/6KMQoEG5O4PuioX19UbwdQKF44yw0nLfOypfQdjtfZzo/UIJWAJ23sNIFbD1Ug9lbaDGMwbqQA==}
     engines: {node: '>=8'}
 
+  '@xstate/fsm@1.6.5':
+    resolution: {integrity: sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==}
+
   '@xtuc/ieee754@1.2.0':
     resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
 
@@ -8605,6 +8749,10 @@ packages:
   bare-events@2.2.2:
     resolution: {integrity: sha512-h7z00dWdG0PYOQEvChhOSWvOfkIKsdZGkWr083FgN/HyoQuebSew/cgirYqh9SCuy/hRvxc5Vy6Fw8xAmYHLkQ==}
 
+  base64-arraybuffer@1.0.2:
+    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
+    engines: {node: '>= 0.6.0'}
+
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
@@ -10333,6 +10481,9 @@ packages:
   fastq@1.17.1:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
 
+  fathom-client@3.7.2:
+    resolution: {integrity: sha512-sWtaNivhg7uwp/q1bUuIiNj4LeQZMEZ5NXXFFpZ8le4uDedAfQG84gPOdYehtVXbl+1yX2s8lmXZ2+IQ9a/xxA==}
+
   fault@2.0.1:
     resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
 
@@ -12125,6 +12276,9 @@ packages:
     resolution: {integrity: sha512-1ulHeNPp6k/LD8H91o7VYFBng5i1BDE7HoKxVbZiGFidS1Rj65qcywLxX+pVfAPoQJEjRdvKcusKwOupHCVOVQ==}
     engines: {node: '>= 12.0.0'}
 
+  logrocket@9.0.0:
+    resolution: {integrity: sha512-/nYoKA4W8nr3YETPyOin9oiFFzwGDv8Lh02DG8ZnS9coKBYwrEG+dE2OqpOotVbs4zJWjCCPaqhR/HAMi+O3yA==}
+
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
 
@@ -12631,6 +12785,12 @@ packages:
     resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
     engines: {node: '>= 8'}
 
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
+  mixpanel-browser@2.57.1:
+    resolution: {integrity: sha512-Qd3S+hu1zocN+AQgKYYoBDYhFaRXaKXtVRLuaApB5j5Qhe25eqSDKtMzkki5AmmuXH68O9i2FW5HkgCWgzJLyg==}
+
   mkdirp@0.3.0:
     resolution: {integrity: sha512-OHsdUcVAQ6pOtg5JYWpCBo9W/GySVuwvP9hueRMW7UqshC0tbfzLv8wjySTPm3tfUZ/21CE9E1pJagOA91Pxew==}
     deprecated: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
@@ -14254,9 +14414,18 @@ packages:
   roughjs@4.6.6:
     resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==}
 
+  rrdom@2.0.0-alpha.18:
+    resolution: {integrity: sha512-fSFzFFxbqAViITyYVA4Z0o5G6p1nEqEr/N8vdgSKie9Rn0FJxDSNJgjV0yiCIzcDs0QR+hpvgFhpbdZ6JIr5Nw==}
+
   rrweb-cssom@0.6.0:
     resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
 
+  rrweb-snapshot@2.0.0-alpha.18:
+    resolution: {integrity: sha512-hBHZL/NfgQX6wO1D9mpwqFu1NJPpim+moIcKhFEjVTZVRUfCln+LOugRc4teVTCISYHN8Cw5e2iNTWCSm+SkoA==}
+
+  rrweb@2.0.0-alpha.13:
+    resolution: {integrity: sha512-a8GXOCnzWHNaVZPa7hsrLZtNZ3CGjiL+YrkpLo0TfmxGLhjNZbWY2r7pE06p+FcjFNlgUVTmFrSJbK3kO7yxvw==}
+
   run-async@2.4.1:
     resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
     engines: {node: '>=0.12.0'}
@@ -15002,9 +15171,6 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
-  third-party-capital@1.0.20:
-    resolution: {integrity: sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==}
-
   three-mesh-bvh@0.7.8:
     resolution: {integrity: sha512-BGEZTOIC14U0XIRw3tO4jY7IjP7n7v24nv9JXS1CyeVRWOCkcOMhRnmENUjuV39gktAw4Ofhr0OvIAiTspQrrw==}
     deprecated: Deprecated due to three.js version incompatibility. Please use v0.8.0, instead.
@@ -16128,6 +16294,9 @@ packages:
   zod@3.23.8:
     resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
 
+  zod@3.24.1:
+    resolution: {integrity: sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==}
+
   zustand@3.7.2:
     resolution: {integrity: sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==}
     engines: {node: '>=12.7.0'}
@@ -16406,6 +16575,58 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
+  '@amplitude/analytics-browser@2.11.10':
+    dependencies:
+      '@amplitude/analytics-client-common': 2.3.6
+      '@amplitude/analytics-core': 2.5.5
+      '@amplitude/analytics-remote-config': 0.4.1
+      '@amplitude/analytics-types': 2.8.4
+      '@amplitude/plugin-autocapture-browser': 1.0.4
+      '@amplitude/plugin-page-view-tracking-browser': 2.3.6
+      tslib: 2.8.0
+
+  '@amplitude/analytics-client-common@2.3.6':
+    dependencies:
+      '@amplitude/analytics-connector': 1.6.2
+      '@amplitude/analytics-core': 2.5.5
+      '@amplitude/analytics-types': 2.8.4
+      tslib: 2.8.0
+
+  '@amplitude/analytics-connector@1.6.2':
+    dependencies:
+      '@amplitude/experiment-core': 0.10.1
+
+  '@amplitude/analytics-core@2.5.5':
+    dependencies:
+      '@amplitude/analytics-types': 2.8.4
+      tslib: 2.8.0
+
+  '@amplitude/analytics-remote-config@0.4.1':
+    dependencies:
+      '@amplitude/analytics-client-common': 2.3.6
+      '@amplitude/analytics-core': 2.5.5
+      '@amplitude/analytics-types': 2.8.4
+      tslib: 2.8.0
+
+  '@amplitude/analytics-types@2.8.4': {}
+
+  '@amplitude/experiment-core@0.10.1':
+    dependencies:
+      js-base64: 3.7.7
+
+  '@amplitude/plugin-autocapture-browser@1.0.4':
+    dependencies:
+      '@amplitude/analytics-client-common': 2.3.6
+      '@amplitude/analytics-types': 2.8.4
+      rxjs: 7.8.1
+      tslib: 2.8.0
+
+  '@amplitude/plugin-page-view-tracking-browser@2.3.6':
+    dependencies:
+      '@amplitude/analytics-client-common': 2.3.6
+      '@amplitude/analytics-types': 2.8.4
+      tslib: 2.8.0
+
   '@ampproject/remapping@2.3.0':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
@@ -18140,6 +18361,17 @@ snapshots:
       enabled: 2.0.0
       kuler: 2.0.0
 
+  '@datadog/browser-core@5.34.0': {}
+
+  '@datadog/browser-rum-core@5.34.0':
+    dependencies:
+      '@datadog/browser-core': 5.34.0
+
+  '@datadog/browser-rum@5.34.0':
+    dependencies:
+      '@datadog/browser-core': 5.34.0
+      '@datadog/browser-rum-core': 5.34.0
+
   '@discoveryjs/json-ext@0.5.7': {}
 
   '@dual-bundle/import-meta-resolve@4.1.0': {}
@@ -18504,6 +18736,8 @@ snapshots:
     dependencies:
       '@hapi/hoek': 9.3.0
 
+  '@hotjar/browser@1.0.9': {}
+
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
@@ -18945,8 +19179,8 @@ snapshots:
       p-queue: 6.6.2
       p-retry: 4.6.2
       uuid: 10.0.0
-      zod: 3.23.8
-      zod-to-json-schema: 3.23.5(zod@3.23.8)
+      zod: 3.24.1
+      zod-to-json-schema: 3.23.5(zod@3.24.1)
     transitivePeerDependencies:
       - openai
 
@@ -19049,12 +19283,6 @@ snapshots:
   '@next/swc-win32-x64-msvc@14.2.9':
     optional: true
 
-  '@next/third-parties@14.2.9(@fern-api/next@14.2.9-fork.2(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.47.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.0))(react@18.3.1)':
-    dependencies:
-      next: '@fern-api/next@14.2.9-fork.2(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.47.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.0)'
-      react: 18.3.1
-      third-party-capital: 1.0.20
-
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -20326,6 +20554,8 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.24.3':
     optional: true
 
+  '@rrweb/types@2.0.0-alpha.18': {}
+
   '@rushstack/eslint-patch@1.10.2': {}
 
   '@sec-ant/readable-stream@0.4.1': {}
@@ -21918,6 +22148,8 @@ snapshots:
     dependencies:
       '@types/node': 20.12.12
 
+  '@types/css-font-loading-module@0.0.7': {}
+
   '@types/date-fns@2.6.3':
     dependencies:
       date-fns: 4.1.0
@@ -22081,6 +22313,8 @@ snapshots:
 
   '@types/minimatch@3.0.5': {}
 
+  '@types/mixpanel-browser@2.50.2': {}
+
   '@types/ms@0.7.34': {}
 
   '@types/nlcst@1.0.4':
@@ -22780,6 +23014,8 @@ snapshots:
     dependencies:
       tslib: 2.8.0
 
+  '@xstate/fsm@1.6.5': {}
+
   '@xtuc/ieee754@1.2.0': {}
 
   '@xtuc/long@4.2.2': {}
@@ -24262,6 +24498,8 @@ snapshots:
   bare-events@2.2.2:
     optional: true
 
+  base64-arraybuffer@1.0.2: {}
+
   base64-js@1.5.1: {}
 
   before-after-hook@2.2.3: {}
@@ -26441,6 +26679,8 @@ snapshots:
     dependencies:
       reusify: 1.0.4
 
+  fathom-client@3.7.2: {}
+
   fault@2.0.1:
     dependencies:
       format: 0.2.2
@@ -28656,6 +28896,8 @@ snapshots:
       safe-stable-stringify: 2.4.3
       triple-beam: 1.4.1
 
+  logrocket@9.0.0: {}
+
   longest-streak@3.1.0: {}
 
   look-it-up@2.1.0: {}
@@ -29561,6 +29803,12 @@ snapshots:
       minipass: 3.3.6
       yallist: 4.0.0
 
+  mitt@3.0.1: {}
+
+  mixpanel-browser@2.57.1:
+    dependencies:
+      rrweb: 2.0.0-alpha.13
+
   mkdirp@0.3.0: {}
 
   mkdirp@1.0.4: {}
@@ -30556,8 +30804,7 @@ snapshots:
 
   prettier@3.3.2: {}
 
-  prettier@3.3.3:
-    optional: true
+  prettier@3.3.3: {}
 
   pretty-error@4.0.0:
     dependencies:
@@ -31396,8 +31643,27 @@ snapshots:
       points-on-curve: 0.2.0
       points-on-path: 0.2.1
 
+  rrdom@2.0.0-alpha.18:
+    dependencies:
+      rrweb-snapshot: 2.0.0-alpha.18
+
   rrweb-cssom@0.6.0: {}
 
+  rrweb-snapshot@2.0.0-alpha.18:
+    dependencies:
+      postcss: 8.4.31
+
+  rrweb@2.0.0-alpha.13:
+    dependencies:
+      '@rrweb/types': 2.0.0-alpha.18
+      '@types/css-font-loading-module': 0.0.7
+      '@xstate/fsm': 1.6.5
+      base64-arraybuffer: 1.0.2
+      fflate: 0.4.8
+      mitt: 3.0.1
+      rrdom: 2.0.0-alpha.18
+      rrweb-snapshot: 2.0.0-alpha.18
+
   run-async@2.4.1: {}
 
   run-parallel@1.2.0:
@@ -32321,8 +32587,6 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
-  third-party-capital@1.0.20: {}
-
   three-mesh-bvh@0.7.8(three@0.171.0):
     dependencies:
       three: 0.171.0
@@ -33641,8 +33905,14 @@ snapshots:
     dependencies:
       zod: 3.23.8
 
+  zod-to-json-schema@3.23.5(zod@3.24.1):
+    dependencies:
+      zod: 3.24.1
+
   zod@3.23.8: {}
 
+  zod@3.24.1: {}
+
   zustand@3.7.2(react@18.3.1):
     optionalDependencies:
       react: 18.3.1
diff --git a/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/AnalyticsConfig.d.ts b/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/AnalyticsConfig.d.ts
index 41b7506ece..403884b935 100644
--- a/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/AnalyticsConfig.d.ts
+++ b/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/AnalyticsConfig.d.ts
@@ -19,4 +19,5 @@ export interface AnalyticsConfig {
     fathom: FernRegistry.docs.v1.commons.FathomConfig | undefined;
     clearbit: FernRegistry.docs.v1.commons.ClearBitConfig | undefined;
     heap: FernRegistry.docs.v1.commons.HeapConfig | undefined;
+    datadog: FernRegistry.docs.v1.commons.DatadogRumConfig | undefined;
 }
diff --git a/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/DatadogRumConfig.d.ts b/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/DatadogRumConfig.d.ts
new file mode 100644
index 0000000000..79a907d12c
--- /dev/null
+++ b/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/DatadogRumConfig.d.ts
@@ -0,0 +1,8 @@
+/**
+ * This file was auto-generated by Fern from our API Definition.
+ */
+export interface DatadogRumConfig {
+    applicationId: string;
+    clientToken: string;
+    site: string | undefined;
+}
diff --git a/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/DatadogRumConfig.js b/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/DatadogRumConfig.js
new file mode 100644
index 0000000000..0b46289f5b
--- /dev/null
+++ b/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/DatadogRumConfig.js
@@ -0,0 +1,4 @@
+/**
+ * This file was auto-generated by Fern from our API Definition.
+ */
+export {};
diff --git a/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.d.ts b/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.d.ts
index 2d510b2e0e..23ca48691a 100644
--- a/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.d.ts
+++ b/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.d.ts
@@ -19,6 +19,7 @@ export * from "./PlausibleConfig";
 export * from "./FathomConfig";
 export * from "./ClearBitConfig";
 export * from "./HeapConfig";
+export * from "./DatadogRumConfig";
 export * from "./DocsLayoutConfig";
 export * from "./SearchbarPlacement";
 export * from "./TabsPlacement";
diff --git a/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.js b/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.js
index 2d510b2e0e..23ca48691a 100644
--- a/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.js
+++ b/servers/fdr/src/api/generated/api/resources/docs/resources/v1/resources/commons/resources/commons/types/index.js
@@ -19,6 +19,7 @@ export * from "./PlausibleConfig";
 export * from "./FathomConfig";
 export * from "./ClearBitConfig";
 export * from "./HeapConfig";
+export * from "./DatadogRumConfig";
 export * from "./DocsLayoutConfig";
 export * from "./SearchbarPlacement";
 export * from "./TabsPlacement";
diff --git a/turbo.json b/turbo.json
index 7a47bf21dc..95787e000a 100644
--- a/turbo.json
+++ b/turbo.json
@@ -43,5 +43,5 @@
       "dependsOn": ["^build", "^compile"]
     }
   },
-  "globalDependencies": [".eslintrc.js", ".prettierrc.json"]
+  "globalDependencies": [".eslintrc.js", ".prettierrc.json", "package.json"]
 }