docs: add gtm

joshuaellis · joshuaellis · commit 949bb28a464d · 2025-09-28T20:43:17.000+01:00
diff --git a/docs/app/components/Widgets/WidgetGoogleTagManager.tsx b/docs/app/components/Widgets/WidgetGoogleTagManager.tsx
@@ -0,0 +1,40 @@
+export const WidgetGoogleTagManagerHead = () => {
+  if (typeof window !== 'undefined' && window.env.ENABLE_PLAUSIBLE !== 'true') {
+    return null
+  }
+
+  return (
+    <script
+      id="google-tag-manager--head"
+      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','GTM-W793TTP7');
+`,
+      }}
+    />
+  )
+}
+
+export const WidgetGoogleTagManagerBody = () => {
+  if (typeof window !== 'undefined' && window.env.ENABLE_PLAUSIBLE !== 'true') {
+    return null
+  }
+
+  return (
+    <div
+      id="google-tag-manager--body"
+      dangerouslySetInnerHTML={{
+        __html: `
+        <!-- Google Tag Manager (noscript) -->
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W793TTP7"
+height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+<!-- End Google Tag Manager (noscript) -->
+        `,
+      }}
+    />
+  )
+}
diff --git a/docs/app/components/Widgets/WidgetPlausible.tsx b/docs/app/components/Widgets/WidgetPlausible.tsx
diff --git a/docs/app/root.tsx b/docs/app/root.tsx
@@ -14,7 +14,10 @@ import {
   useLoaderData,
 } from '@remix-run/react'
 import { Analytics } from '@vercel/analytics/react'
-import { WidgetPlausible } from './components/Widgets/WidgetPlausible'
+import {
+  WidgetGoogleTagManagerHead,
+  WidgetGoogleTagManagerBody,
+} from './components/Widgets/WidgetGoogleTagManager'
 import { lightThemeClass } from './styles/light-theme.css'
 import global from './styles/global.css?url'
 import docusearch from '@docsearch/css/dist/style.css?url'
@@ -111,9 +114,10 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <Meta />
         <Links />
-        <WidgetPlausible />
+        <WidgetGoogleTagManagerHead />
       </head>
       <body className={theme === 'light' ? lightThemeClass : darkThemeClass}>
+        <WidgetGoogleTagManagerBody />
         {children}
         <SiteFooter />
         <script
