add in gtag for neosync cloud conversion tracking (#3140)

frontend/apps/web/app/BaseLayout.tsx

@@ -5,7 +5,6 @@ import ConnectProvider from '@/components/providers/connect-provider';
 import { PostHogIdentifier } from '@/components/providers/posthog-provider';
 import TanstackQueryProvider from '@/components/providers/query-provider';
 import { SessionProvider } from '@/components/providers/session-provider';
-import { UnifyIdentifier } from '@/components/providers/unify-provider';
 import SiteHeader from '@/components/site-header/SiteHeader';
 import { Toaster } from '@/components/ui/sonner';
 import { ReactElement, ReactNode, Suspense } from 'react';
@@ -28,9 +27,6 @@ export default async function BaseLayout(props: Props): Promise<ReactElement> {
             <Suspense>
               <PostHogIdentifier />
             </Suspense>
-            <Suspense>
-              <UnifyIdentifier />
-            </Suspense>
             <div className="relative flex min-h-screen flex-col">
               <SiteHeader />
               <div className="flex-1 container" id="top-level-layout">

frontend/apps/web/app/api/config/config.ts

@@ -35,6 +35,11 @@ export function getSystemAppConfig(): SystemAppConfig {
     publicNeosyncApiBaseUrl: PUBLIC_PATHNAME, // ensures that this always points to the same domain
     isJobHooksEnabled: process.env.JOBHOOKS_ENABLED === 'true',
     isRbacEnabled: isNeosyncCloud || process.env.RBAC_ENABLED === 'true',
+    gtag: {
+      enabled: isAnalyticsEnabled() && !!process.env.GTAG,
+      key: process.env.GTAG,
+      conversion: process.env.GTAG_CONVERSION,
+    },
   };
 }
 

frontend/apps/web/app/config/app-config.ts

@@ -9,6 +9,7 @@ export interface SystemAppConfig {
   signInProviderId?: string;
   isMetricsServiceEnabled: boolean;
   isJobHooksEnabled: boolean;
+  gtag: GtagConfig;
 
   calendlyUpgradeLink: string;
   isGcpCloudStorageConnectionsEnabled: boolean;
@@ -29,3 +30,9 @@ interface UnifyConfig {
   enabled: boolean;
   key?: string;
 }
+
+interface GtagConfig {
+  enabled: boolean;
+  key?: string;
+  conversion?: string;
+}

frontend/apps/web/app/layout.tsx

@@ -1,4 +1,5 @@
 import '@/app/globals.css';
+import { GoogleScriptProvider } from '@/components/providers/googleTag-provider';
 import {
   PHProvider,
   PostHogPageview,
@@ -36,6 +37,7 @@ export default async function RootLayout({
                 <>
                   <Suspense>
                     <UnifyScriptProvider />
+                    <GoogleScriptProvider />
                   </Suspense>
                   <Suspense>
                     <PostHogPageview />

frontend/apps/web/components/providers/googleTag-provider.tsx

@@ -0,0 +1,47 @@
+'use client';
+import { useGetSystemAppConfig } from '@/libs/hooks/useGetSystemAppConfig';
+import Script from 'next/script';
+import { ReactElement } from 'react';
+
+export function GoogleScriptProvider(): ReactElement {
+  const { data: systemAppConfig, isLoading } = useGetSystemAppConfig();
+
+  if (
+    isLoading ||
+    !systemAppConfig?.gtag.enabled ||
+    !systemAppConfig.gtag.key
+  ) {
+    return <></>;
+  }
+  return (
+    <>
+      <Script
+        src={`https://www.googletagmanager.com/gtag/js?id=${systemAppConfig.gtag.key}`}
+        strategy="afterInteractive"
+      />
+      <Script
+        id="google-analytics"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', '${systemAppConfig.gtag.key}'}');
+      `,
+        }}
+      />
+      <Script
+        id="google-ads-conversion"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+        gtag('event', 'conversion', {
+          'send_to': ${systemAppConfig.gtag.conversion}
+        });
+      `,
+        }}
+      />
+    </>
+  );
+}

frontend/apps/web/components/providers/unify-provider.tsx

@@ -1,10 +1,7 @@
 'use client';
 import { useGetSystemAppConfig } from '@/libs/hooks/useGetSystemAppConfig';
-import { useNeosyncUser } from '@/libs/hooks/useNeosyncUser';
-import { useSession } from 'next-auth/react';
 import Script from 'next/script';
-import { ReactElement, useEffect } from 'react';
-import { useAccount } from './account-provider';
+import { ReactElement } from 'react';
 
 export function UnifyScriptProvider(): ReactElement {
   const { data: systemAppConfig, isLoading } = useGetSystemAppConfig();
@@ -25,58 +22,3 @@ export function UnifyScriptProvider(): ReactElement {
     />
   );
 }
-
-const isBrowser = () => typeof window !== 'undefined';
-
-export function UnifyIdentifier(): ReactElement {
-  const { data: systemAppConfig, isLoading: isSystemAppConfigLoading } =
-    useGetSystemAppConfig();
-  const { data: userData, isLoading: isUserDataLoading } = useNeosyncUser();
-  const { data: session } = useSession();
-  const { account, isLoading: isAccountLoading } = useAccount();
-  const user = session?.user;
-
-  useEffect(() => {
-    if (
-      !isBrowser() ||
-      isUserDataLoading ||
-      isAccountLoading ||
-      isSystemAppConfigLoading ||
-      !systemAppConfig?.unify.enabled ||
-      !systemAppConfig.unify.key ||
-      !systemAppConfig.isAuthEnabled ||
-      !user?.email
-    ) {
-      return;
-    }
-    // we only want to set the user id if auth is enabled, otherwise it is always the same
-    // so it makes it harder to identify unique posthog sessions when running in un-auth mode.
-    const userId = systemAppConfig?.isAuthEnabled
-      ? userData?.userId
-      : undefined;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (window as any).ko?.identify(user?.email, {
-      accountName: account?.name,
-      accountId: account?.id,
-      email: user?.email,
-      name: user?.name,
-      neosyncCloud: systemAppConfig?.isNeosyncCloud ?? false,
-      userId,
-    });
-  }, [
-    isUserDataLoading,
-    isAccountLoading,
-    isSystemAppConfigLoading,
-    account?.id,
-    account?.name,
-    userData?.userId,
-    systemAppConfig?.isAuthEnabled,
-    systemAppConfig?.isNeosyncCloud,
-    user?.email,
-    user?.name,
-    systemAppConfig?.unify.enabled,
-    systemAppConfig?.unify.key,
-  ]);
-
-  return <></>;
-}