From 30e4d769e3e40298e7716bdcf8ecb3e6ef6ef6bb Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Fri, 8 Mar 2024 15:13:29 +0000
Subject: [PATCH] feat: gtm push signup event (#14031)

* feat: gtm push signup event

* chore: fire only if gtm id is defined

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 apps/web/components/PageWrapper.tsx | 20 ++++++++++++++++++++
 apps/web/pages/signup.tsx           |  5 ++++-
 packages/lib/gtm.ts                 |  8 ++++++++
 turbo.json                          |  1 +
 4 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 packages/lib/gtm.ts

diff --git a/apps/web/components/PageWrapper.tsx b/apps/web/components/PageWrapper.tsx
index 9838f57ebb..6692b9ae5c 100644
--- a/apps/web/components/PageWrapper.tsx
+++ b/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};
diff --git a/apps/web/pages/signup.tsx b/apps/web/pages/signup.tsx
index 67f9de99b6..8152d8ba96 100644
--- a/apps/web/pages/signup.tsx
+++ b/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 = `${
diff --git a/packages/lib/gtm.ts b/packages/lib/gtm.ts
new file mode 100644
index 0000000000..19cb7d8c78
--- /dev/null
+++ b/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,
+  });
+};
diff --git a/turbo.json b/turbo.json
index 5f34fb0043..8794e424b1 100644
--- a/turbo.json
+++ b/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",