Reapply "Added gtm (#410)" (#411)

This reverts commit 3d05742.

src/app/layout.tsx

@@ -10,7 +10,7 @@ import "@/styles/styles.css";
 import "@/styles/tailwind.css";
 import Script from "next/script";
 import { Suspense } from "react";
-import { KOALA_URL, ZARAZ_URL } from "../lib/env";
+import { GOOGLE_TAG_MANAGER_ID, KOALA_URL } from "../lib/env";
 
 const inter = Inter({
   weight: ["300", "400", "500", "600", "700"],
@@ -52,14 +52,20 @@ export default function RootLayout({
           type="image/x-icon"
           href="https://cdn.zuplo.com/www/favicon.png"
         />
-        {ZARAZ_URL && (
-          <Script
-            id="zaraz"
-            strategy="afterInteractive"
-            async
-            src={ZARAZ_URL}
-            referrerPolicy="origin"
-          />
+        {GOOGLE_TAG_MANAGER_ID && (
+          <>
+            <Script
+              id="gtm"
+              async
+              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://ta.zuplo.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','${GOOGLE_TAG_MANAGER_ID}');`,
+              }}
+            />
+          </>
         )}
         {KOALA_URL && (
           <Script

src/lib/env.ts

@@ -2,3 +2,5 @@ export const POSTHOG_KEY = process.env.NEXT_PUBLIC_POSTHOG_KEY;
 export const POSTHOG_URL = process.env.NEXT_PUBLIC_POSTHOG_URL;
 export const ZARAZ_URL = process.env.NEXT_PUBLIC_ZARAZ_URL;
 export const KOALA_URL = process.env.NEXT_PUBLIC_KOALA_URL;
+export const GOOGLE_TAG_MANAGER_ID =
+  process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID;