fix: google tag manager setup (#3840)

apps/builder/app/layout.tsx

@@ -2,8 +2,10 @@ import { GoogleTagManager } from '@next/third-parties/google'
 import type { Metadata } from 'next'
 import { ThemeProvider } from 'next-themes'
 import { headers } from 'next/headers'
+import Script from 'next/script'
 
 import { khTeka } from '@/lib/fonts'
+import { googleTagDataLayer, googleTagManagerSource } from '@/lib/gtag'
 import { cn } from '@/lib/utils'
 import { ContextProvider } from '@/providers/appkit-context-provider'
 import { AppKitProvider } from '@/providers/appkit-provider'
@@ -77,6 +79,10 @@ export default async function RootLayout({ children }: Readonly<{ children: Reac
           </AppKitProvider>
         </ThemeProvider>
         <GoogleTagManager gtmId="G-38H3M597C1" />
+        <Script src={googleTagManagerSource} strategy="afterInteractive" />
+        <Script id="google-tag-manager" strategy="afterInteractive">
+          {googleTagDataLayer()}
+        </Script>
       </body>
     </html>
   )

apps/builder/lib/gtag.ts

@@ -0,0 +1,10 @@
+export const googleTagManagerSource = `https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID}`
+
+export function googleTagDataLayer() {
+  return `
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID}');
+  `
+}