From 5fd9223beeaa92adb00f7d0ece08b686a8634344 Mon Sep 17 00:00:00 2001 From: Alberto Arias Date: Tue, 17 Sep 2024 17:59:11 +0200 Subject: [PATCH] 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 --- app/layout.tsx | 10 +++++++++- components/head/GoogleTagManagerScript.tsx | 2 +- pages/_app.tsx | 2 ++ pages/_document.tsx | 2 -- 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 6d9feae3..68b6d6c0 100644 --- 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 ( - {children} + + {/* + 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 + */} + + {children} + ); } diff --git a/components/head/GoogleTagManagerScript.tsx b/components/head/GoogleTagManagerScript.tsx index 317d4937..47736c0c 100644 --- a/components/head/GoogleTagManagerScript.tsx +++ b/components/head/GoogleTagManagerScript.tsx @@ -4,7 +4,7 @@ const GoogleTagManagerScript = () => { return (