From 89ccf4d56ea0ffdaa65e256f8a9b5b01ac283f08 Mon Sep 17 00:00:00 2001
From: Eduard Gert <kontakt@eduardgert.de>
Date: Thu, 24 Apr 2025 20:48:35 +0200
Subject: [PATCH] Add google tag manager (#308)

---
 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 00000000..3d32abe7
--- /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 b3493318..25d8d20a 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>
