diff --git a/packages/ui/app/package.json b/packages/ui/app/package.json index 393c622cea..2109f212f3 100644 --- a/packages/ui/app/package.json +++ b/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", diff --git a/packages/ui/app/src/analytics/CustomerAnalytics.tsx b/packages/ui/app/src/analytics/CustomerAnalytics.tsx new file mode 100644 index 0000000000..9d488b5850 --- /dev/null +++ b/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 = { + 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 && } + {analytics.gtm && ( + + )} + + ); +} diff --git a/packages/ui/app/src/contexts/docs-context/DocsContextProvider.tsx b/packages/ui/app/src/contexts/docs-context/DocsContextProvider.tsx index abb97e7a5e..fb90dc05f1 100644 --- a/packages/ui/app/src/contexts/docs-context/DocsContextProvider.tsx +++ b/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 = ({ child /> ))} {js?.remote?.map((remote) =>