feat: gtm push signup event (#14031)

* feat: gtm push signup event

* chore: fire only if gtm id is defined

---------

Co-authored-by: Peer Richelsen <[email protected]>

apps/web/components/PageWrapper.tsx

@@ -76,6 +76,26 @@ function PageWrapper(props: AppProps) {
         id="page-status"
         dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
       />
+      {process.env.NEXT_PUBLIC_GTM_ID ? (
+        <>
+          <Script
+            id="gtm-init-script"
+            dangerouslySetInnerHTML={{
+              __html: `(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 = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+                    })(window, document, 'script', 'dataLayer', '${process.env.NEXT_PUBLIC_GTM_ID}');`,
+            }}
+          />
+          <noscript
+            dangerouslySetInnerHTML={{
+              __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GTM_ID}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
+            }}
+          />
+        </>
+      ) : null}
+
       <style jsx global>{`
         :root {
           --font-inter: ${interFont.style.fontFamily};

apps/web/pages/signup.tsx

@@ -20,6 +20,7 @@ import { useFlagMap } from "@calcom/features/flags/context/provider";
 import { classNames } from "@calcom/lib";
 import { APP_NAME, URL_PROTOCOL_REGEX, IS_CALCOM, WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
 import { fetchUsername } from "@calcom/lib/fetchUsername";
+import { pushGTMEvent } from "@calcom/lib/gtm";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useDebounce } from "@calcom/lib/hooks/useDebounce";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -164,7 +165,6 @@ export default function Signup({
   const [premiumUsername, setPremiumUsername] = useState(false);
   const [usernameTaken, setUsernameTaken] = useState(false);
   const [isGoogleLoading, setIsGoogleLoading] = useState(false);
-
   const searchParams = useCompatSearchParams();
   const telemetry = useTelemetry();
   const { t, i18n } = useLocale();
@@ -223,6 +223,9 @@ export default function Signup({
     })
       .then(handleErrorsAndStripe)
       .then(async () => {
+        if (process.env.NEXT_PUBLIC_GTM_ID)
+          pushGTMEvent("create_account", { email: data.email, user: data.username, lang: data.language });
+
         telemetry.event(telemetryEventTypes.signup, collectPageParameters());
         const verifyOrGettingStarted = flags["email-verification"] ? "auth/verify-email" : "getting-started";
         const callBackUrl = `${

packages/lib/gtm.ts

@@ -0,0 +1,8 @@
+declare const window: Window & { dataLayer: Record<string, unknown>[] };
+
+export const pushGTMEvent = (event: string, data?: Record<string, unknown>) => {
+  window.dataLayer?.push({
+    event,
+    ...data,
+  });
+};

turbo.json

@@ -301,6 +301,7 @@
     "NEXT_PUBLIC_SWAGGER_DOCS_URL",
     "NEXT_PUBLIC_TEAM_IMPERSONATION",
     "NEXT_PUBLIC_VERCEL_URL",
+    "NEXT_PUBLIC_GTM_ID",
     "NEXTAUTH_COOKIE_DOMAIN",
     "NEXTAUTH_SECRET",
     "NEXTAUTH_URL",