move gtm script out of Head

cloudcraftsoftwareinc · Feb 10, 2024 · 7a05256 · 7a05256
1 parent 8f2eb9a
commit 7a05256
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 18 deletions.
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -2,11 +2,14 @@ import '../styles/global.css';
 
 import { MDXProvider } from '@mdx-js/react';
 import type { AppProps } from 'next/app';
+import Script from 'next/script';
 
 import { GetStartedBlurb } from '../components/get-started-blurb';
 import * as mdxComponents from '../components/mdx';
 import { ServicesBlurb } from '../components/services-blurb';
 
+const gtmId = 'G-NV5LK0T9C1';
+
 const components = {
   ...mdxComponents,
   GetStartedBlurb,
@@ -15,6 +18,16 @@ const components = {
 
 const MyApp = ({ Component, pageProps }: AppProps) => (
   <MDXProvider components={components}>
+    <Script src={`https://www.googletagmanager.com/gtag/js?id=${gtmId}`} />
+    <Script id="google-analytics" strategy="afterInteractive">
+      {`
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){window.dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', '${gtmId}');
+      `}
+    </Script>
     <Component {...pageProps} />
   </MDXProvider>
 );

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,30 +1,13 @@
-import Document, { Head, Html, Main, NextScript } from 'next/document';
-import Script from 'next/script';
+import Document, { Html, Main, NextScript } from 'next/document';
 
 import { AppConfig } from '../utils/AppConfig';
 
-const gtmId = 'G-NV5LK0T9C1';
-
 // Need to create a custom _document because i18n support is not compatible with `next export`.
 class MyDocument extends Document {
   // eslint-disable-next-line class-methods-use-this
   render() {
     return (
       <Html lang={AppConfig.locale}>
-        <Head>
-          <Script
-            src={`https://www.googletagmanager.com/gtag/js?id=${gtmId}`}
-          />
-          <Script id="google-analytics" strategy="afterInteractive">
-            {`
-              window.dataLayer = window.dataLayer || [];
-              function gtag(){window.dataLayer.push(arguments);}
-              gtag('js', new Date());
-
-              gtag('config', '${gtmId}');
-            `}
-          </Script>
-        </Head>
         <body className="testing">
           <Main />
           <NextScript />