App router migration google tag manager script (#1117)

* Add basic Root Layout * Add metadata * Add reference included by next * Add comment to explain the default meta tags * Add public testing page to check the migration * Remove non required file * Add google tag manager to root layout * Change strategy as worker is experimental and is not including the script * Move gtm to body as next is including it in head properly * Add comment to tackle in the future * Move gtm script from _document to _app
chaynHQ · Oct 8, 2024 · 50dec7b · 50dec7b
1 parent 4579b2f
commit 50dec7b
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,5 @@
 import { Metadata } from 'next';
+import GoogleTagManagerScript from '../components/head/GoogleTagManagerScript';
 
 // Nextjs automatically includes for each route two default meta tags, charset and viewport
 // https://nextjs.org/docs/app/building-your-application/optimizing/metadata#default-fields
@@ -15,7 +16,14 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        {/* 
+        We should be using next third party library https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries#google-tag-manager 
+        but sending an event using sendGTMEvent requires an object rather than a list of arguments so the current gtag api function would need to be adapted
+        */}
+        <GoogleTagManagerScript />
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/components/head/GoogleTagManagerScript.tsx b/components/head/GoogleTagManagerScript.tsx
@@ -4,7 +4,7 @@ const GoogleTagManagerScript = () => {
   return (
     <Script
       id="gtag"
-      strategy="worker"
+      strategy="afterInteractive"
       dangerouslySetInnerHTML={{
         __html: `
             window.dataLayer = window.dataLayer || [];

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -13,6 +13,7 @@ import { Hotjar } from 'nextjs-hotjar';
 import { useEffect } from 'react';
 import { Provider } from 'react-redux';
 import CrispScript from '../components/crisp/CrispScript';
+import GoogleTagManagerScript from '../components/head/GoogleTagManagerScript';
 import Consent from '../components/layout/Consent';
 import ErrorBoundary from '../components/layout/ErrorBoundary';
 import Footer from '../components/layout/Footer';
@@ -76,6 +77,7 @@ function MyApp(props: MyAppProps) {
         <Head>
           <meta name="viewport" content="initial-scale=1, width=device-width" />
         </Head>
+        <GoogleTagManagerScript />
         <CrispScript />
         <ThemeProvider theme={theme}>
           <CssBaseline />

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -3,7 +3,6 @@ import newrelic from 'newrelic';
 import { AppType } from 'next/app';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 import * as React from 'react';
-import GoogleTagManagerScript from '../components/head/GoogleTagManagerScript';
 import OpenGraphMetadata from '../components/head/OpenGraphMetadata';
 import RollbarScript from '../components/head/RollbarScript';
 import createEmotionCache from '../config/emotionCache';
@@ -27,7 +26,6 @@ export default class MyDocument extends Document<NewRelicProps> {
             rel="stylesheet"
           />
           <OpenGraphMetadata />
-          <GoogleTagManagerScript />
           <RollbarScript />
         </Head>
         <body>