fix: bulk add all analytics

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>

packages/ui/app/package.json

@@ -34,6 +34,8 @@
     "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-api/fdr-sdk": "workspace:*",
     "@fern-api/template-resolver": "workspace:*",
@@ -49,6 +51,7 @@
     "@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",
@@ -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",

packages/ui/app/src/analytics/amplitude.tsx

@@ -0,0 +1,18 @@
+import * as amplitude from "@amplitude/analytics-browser";
+import { ReactNode } from "react";
+import { useIsomorphicLayoutEffect } from "swr/_internal";
+
+export default function AmplitudeScript({ apiKey }: { apiKey: string }): ReactNode {
+    useIsomorphicLayoutEffect(() => {
+        try {
+            amplitude.init(apiKey, undefined, {
+                autocapture: true,
+            });
+        } catch (e) {
+            // eslint-disable-next-line no-console
+            console.error("Error initializing Amplitude", e);
+        }
+    }, [apiKey]);
+
+    return false;
+}

packages/ui/app/src/analytics/clearbit.tsx

@@ -0,0 +1,12 @@
+import Script from "next/script";
+import { ReactNode } from "react";
+
+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"
+        />
+    );
+}

packages/ui/app/src/analytics/datadog-rum.tsx

@@ -0,0 +1,11 @@
+import { datadogRum, type RumInitConfiguration } from "@datadog/browser-rum";
+import { ReactNode } from "react";
+import { useIsomorphicLayoutEffect } from "swr/_internal";
+
+export default function DatadogRumScript(props: RumInitConfiguration): ReactNode {
+    useIsomorphicLayoutEffect(() => {
+        datadogRum.init(props);
+    }, []);
+
+    return false;
+}

packages/ui/app/src/analytics/fathom.tsx

@@ -0,0 +1,16 @@
+import * as Fathom from "fathom-client";
+import { ReactNode } from "react";
+import { useIsomorphicLayoutEffect } from "swr/_internal";
+import { useRouteChangeComplete } from "../hooks/useRouteChanged";
+
+export function FathomScript({ siteId }: { siteId: string }): ReactNode {
+    useIsomorphicLayoutEffect(() => {
+        Fathom.load(siteId);
+    }, [siteId]);
+
+    useRouteChangeComplete(() => {
+        Fathom.trackPageview();
+    });
+
+    return false;
+}

packages/ui/app/src/analytics/FullstoryScript.tsx → packages/ui/app/src/analytics/fullstory.tsx

@@ -1,19 +1,15 @@
-import { DocsV1Read } from "@fern-api/fdr-sdk";
 import Script from "next/script";
-import { ReactElement } from "react";
+import { ReactNode } from "react";
 
-export function FullstoryScript(props: { config?: DocsV1Read.FullStoryAnalyticsConfig }): ReactElement {
-    if (!props.config) {
-        return <></>;
-    }
-
-    return <Script id="init-fullstory" dangerouslySetInnerHTML={{ __html: initFullstory(props.config) }} />;
+export default function FullstoryScript(props: { orgId: string }): ReactNode {
+    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)

packages/ui/app/src/analytics/heap.tsx

@@ -0,0 +1,13 @@
+import Script from "next/script";
+import { ReactNode } from "react";
+
+export default function HeapScript({ appId }: { appId: string }): ReactNode {
+    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}"); 
+`;
+}

packages/ui/app/src/analytics/hotjar.tsx

@@ -0,0 +1,16 @@
+import Hotjar from "@hotjar/browser";
+import { ReactNode } from "react";
+import { useIsomorphicLayoutEffect } from "swr/_internal";
+import { useRouteChangeComplete } from "../hooks/useRouteChanged";
+
+export default function HotjarScript({ id, version }: { id: string; version: string }): ReactNode {
+    useIsomorphicLayoutEffect(() => {
+        Hotjar.init(Number(id), Number(version));
+    }, [id, version]);
+
+    useRouteChangeComplete((route) => {
+        Hotjar.stateChange(route);
+    });
+
+    return false;
+}