Skip to content

Commit

Permalink
App router migration google tag manager script (#1117)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
boodland authored Sep 17, 2024
1 parent 23afe00 commit 5fd9223
Show file tree
Hide file tree
Showing 4 changed files with 12 additions and 4 deletions.
10 changes: 9 additions & 1 deletion app/layout.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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>
);
}
2 changes: 1 addition & 1 deletion components/head/GoogleTagManagerScript.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const GoogleTagManagerScript = () => {
return (
<Script
id="gtag"
strategy="worker"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
Expand Down
2 changes: 2 additions & 0 deletions pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 />
Expand Down
2 changes: 0 additions & 2 deletions pages/_document.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -27,7 +26,6 @@ export default class MyDocument extends Document<NewRelicProps> {
rel="stylesheet"
/>
<OpenGraphMetadata />
<GoogleTagManagerScript />
<RollbarScript />
</Head>
<body>
Expand Down

0 comments on commit 5fd9223

Please sign in to comment.