From f6f9b8452a5b947b7c87daf99cd02896fe48c25c Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Wed, 16 Apr 2025 15:48:49 +0200
Subject: [PATCH] Add google tag manager

---
 src/components/GoogleTagManager.jsx | 31 +++++++++++++++++++++++++++++
 src/pages/_document.jsx             |  5 ++++-
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 src/components/GoogleTagManager.jsx
diff --git a/src/components/GoogleTagManager.jsx b/src/components/GoogleTagManager.jsx
new file mode 100644
index 000000000..3d32abe79
--- /dev/null
+++ b/src/components/GoogleTagManager.jsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+import Script from "next/script";
+
+// Google Tag Manager ID
+const GTM_ID = "GTM-PGWDPDN3";
+
+export const GoogleTagManagerHeadScript = () => {
+    return (
+        <Script id="gtm-script" strategy="afterInteractive">
+            {`(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','${GTM_ID}');`}
+        </Script>
+    );
+};
+
+export const GoogleTageManagerBodyScript = () => {
+    return (
+        <noscript>
+            <iframe
+                title={"Google Tag Manager"}
+                src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
+                height="0"
+                width="0"
+                style={{ display: "none", visibility: "hidden" }}
+            />
+        </noscript>
+    );
+};
diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx
index b3493318a..25d8d20a0 100644
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@@ -1,4 +1,5 @@
 import { Head, Html, Main, NextScript } from 'next/document'
+import {GoogleTageManagerBodyScript, GoogleTagManagerHeadScript} from "@/components/GoogleTagManager";
 
 const modeScript = `
   let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
@@ -39,10 +40,12 @@ export default function Document() {
   return (
     <Html lang="en">
       <Head>
-        <script dangerouslySetInnerHTML={{ __html: modeScript }} />
+          <GoogleTagManagerHeadScript />
+          <script dangerouslySetInnerHTML={{ __html: modeScript }} />
           <link rel="shortcut icon" href="/docs-static/img/favicon.ico" />
       </Head>
       <body className="bg-white antialiased dark:bg-zinc-900">
+        <GoogleTageManagerBodyScript />
         <Main />
         <NextScript />
       </body>
