add google analytics (#783)

packages/ui/app/package.json

@@ -43,6 +43,7 @@
     "@fern-ui/loadable": "workspace:*",
     "@fern-ui/react-commons": "workspace:*",
     "@headlessui/react": "^1.7.18",
+    "@next/third-parties": "^14.2.3",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",

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

@@ -0,0 +1,47 @@
+import { GoogleAnalytics, GoogleTagManager } from "@next/third-parties/google";
+import { ReactElement } from "react";
+
+interface Analytics {
+    ga4?: {
+        id: string;
+        dataLayerName?: string;
+    };
+    gtm?: {
+        id: string;
+        dataLayer?: string[];
+        dataLayerName?: string;
+        auth?: string;
+        preview?: string;
+    };
+}
+
+const CUSTOMER_ANALYTICS: Record<string, Analytics> = {
+    devrev: {
+        gtm: {
+            id: "GTM-P859DNW4",
+        },
+    },
+};
+
+export function CustomerAnalytics({ domain }: { domain: string }): ReactElement | null {
+    const analytics = Object.entries(CUSTOMER_ANALYTICS).find(([key]) => domain.includes(key))?.[1];
+
+    if (analytics == null) {
+        return null;
+    }
+
+    return (
+        <>
+            {analytics.ga4 && <GoogleAnalytics gaId={analytics.ga4.id} dataLayerName={analytics.ga4.dataLayerName} />}
+            {analytics.gtm && (
+                <GoogleTagManager
+                    gtmId={analytics.gtm.id}
+                    dataLayer={analytics.gtm.dataLayer}
+                    dataLayerName={analytics.gtm.dataLayerName}
+                    auth={analytics.gtm.auth}
+                    preview={analytics.gtm.preview}
+                />
+            )}
+        </>
+    );
+}

packages/ui/app/src/contexts/docs-context/DocsContextProvider.tsx

@@ -4,6 +4,7 @@ import { useTheme } from "next-themes";
 import Head from "next/head";
 import Script from "next/script";
 import { PropsWithChildren, ReactNode, useCallback, useMemo } from "react";
+import { CustomerAnalytics } from "../../analytics/CustomerAnalytics";
 import { DocsPage } from "../../next-app/DocsPage";
 import { getThemeColor } from "../../next-app/utils/getColorVariables";
 import { getFontExtension } from "../../next-app/utils/getFontVariables";
@@ -134,6 +135,8 @@ export const DocsContextProvider: React.FC<DocsContextProvider.Props> = ({ child
                 />
             ))}
             {js?.remote?.map((remote) => <Script key={remote.url} src={remote.url} strategy={remote.strategy} />)}
+
+            <CustomerAnalytics domain={baseUrl.domain} />
         </DocsContext.Provider>
     );
 };