feat: google tag

apps/frontend/src/components/layout/gtm.component.tsx

@@ -1,7 +1,28 @@
 'use client';
 
 import Script from 'next/script';
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
+import { useUser } from '@gitroom/frontend/components/layout/user.context';
+
+export const TrialTracker: FC = () => {
+  const user = useUser();
+  useEffect(() => {
+    // @ts-ignore
+    if (typeof window === 'undefined' || !user?.id || !window.dataLayer) return;
+    const params = new URLSearchParams(window.location.search);
+    if (params.get('onboarding') !== 'true') return;
+    const check = params.get('check') || 'unknown';
+    const key = `gtm_start_trial_${user?.id}`;
+    if (sessionStorage.getItem(key)) return;
+    console.log(window.dataLayer);
+    sessionStorage.setItem(key, '1');
+    // @ts-ignore
+    window.dataLayer = window.dataLayer || [];
+    // @ts-ignore
+    window.dataLayer.push({ event: 'start_trial', check });
+  }, [user]);
+  return null;
+};
 
 export const GoogleTagManagerComponent: FC<{ gtmId?: string }> = ({
   gtmId,
@@ -10,12 +31,17 @@ export const GoogleTagManagerComponent: FC<{ gtmId?: string }> = ({
     return null;
   }
   return (
-    <Script strategy="afterInteractive" id="gtm">
-      {`(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!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-'/g.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-})(window,document,'script','dataLayer','${gtmId}');`}
-    </Script>
+    <>
+      <Script src="/g.js" strategy="afterInteractive" />
+
+      <Script id="google-ads-gtag" strategy="afterInteractive">
+        {`
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', '${gtmId}');
+  `}
+      </Script>
+    </>
   );
 };

apps/frontend/src/components/new-layout/layout.component.tsx

@@ -41,6 +41,7 @@ import { StreakComponent } from '@gitroom/frontend/components/layout/streak.comp
 import { PreConditionComponent } from '@gitroom/frontend/components/layout/pre-condition.component';
 import { AttachToFeedbackIcon } from '@gitroom/frontend/components/new-layout/sentry.feedback.component';
 import { FirstBillingComponent } from '@gitroom/frontend/components/billing/first.billing.component';
+import { TrialTracker } from '@gitroom/frontend/components/layout/gtm.component';
 
 const jakartaSans = Plus_Jakarta_Sans({
   weight: ['600', '500', '700'],
@@ -78,6 +79,7 @@ export const LayoutComponent = ({ children }: { children: ReactNode }) => {
         <MantineWrapper>
           <ToolTip />
           <Toaster />
+          <TrialTracker />
           <CheckPayment check={searchParams.get('check') || ''} mutate={mutate}>
             <ShowMediaBoxModal />
             <ShowLinkedinCompany />

apps/frontend/src/components/onboarding/onboarding.tsx

@@ -27,17 +27,6 @@ export const Onboarding: FC = () => {
       }
       return;
     }
-    if (typeof window !== 'undefined') {
-      const check = query.get('check') || 'unknown';
-      const key = `gtm_start_trial_${check}`;
-      if (!sessionStorage.getItem(key)) {
-        sessionStorage.setItem(key, '1');
-        // @ts-ignore
-        window.dataLayer = window.dataLayer || [];
-        // @ts-ignore
-        window.dataLayer.push({ event: 'start_trial', check });
-      }
-    }
     if (modalOpen.current) {
       return;
     }