diff --git a/apps/frontend/src/components/layout/gtm.component.tsx b/apps/frontend/src/components/layout/gtm.component.tsx index 900228e9..1a880cbb 100644 --- a/apps/frontend/src/components/layout/gtm.component.tsx +++ b/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 ( - + <> + + ); }; diff --git a/apps/frontend/src/components/new-layout/layout.component.tsx b/apps/frontend/src/components/new-layout/layout.component.tsx index 7dc8e9fc..71e66ed4 100644 --- a/apps/frontend/src/components/new-layout/layout.component.tsx +++ b/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 }) => { + diff --git a/apps/frontend/src/components/onboarding/onboarding.tsx b/apps/frontend/src/components/onboarding/onboarding.tsx index 3e7da8f7..fe6d39c3 100644 --- a/apps/frontend/src/components/onboarding/onboarding.tsx +++ b/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; }