Merge branch 'next-js-migration' into app-router-migration-error-boun…

…dary-component
chaynHQ · Sep 18, 2024 · 79be3a2 · 79be3a2
2 parents 08dbfbd + 5fd9223
commit 79be3a2
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 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';
 import ErrorBoundary from '../components/layout/ErrorBoundary';
 
 // Nextjs automatically includes for each route two default meta tags, charset and viewport
@@ -17,6 +18,11 @@ export default function RootLayout({
   return (
     <html lang="en">
       <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 />
         <ErrorBoundary>{children}</ErrorBoundary>
       </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';
@@ -81,6 +82,7 @@ function MyApp(props: MyAppProps) {
           <title>Bloom</title>
           <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>