Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

App router migration google tag manager script #1117

Merged
merged 13 commits into from
Sep 17, 2024
Merged

App router migration google tag manager script #1117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
440bcb0
Add basic Root Layout
boodland Aug 19, 2024
78f94ae
Add metadata
boodland Aug 19, 2024
e4bffac
Add reference included by next
boodland Aug 19, 2024
844f412
Add comment to explain the default meta tags
boodland Aug 19, 2024
d857356
Add public testing page to check the migration
boodland Aug 19, 2024
fbc9686
Merge branch 'next-js-migration' into app-router-migration-root-layout
boodland Aug 30, 2024
86241af
Remove non required file
boodland Aug 30, 2024
d98fc01
Add google tag manager to root layout
boodland Sep 2, 2024
ef0ce6a
Change strategy as worker is experimental and is not including the sc…
boodland Sep 2, 2024
744ae50
Move gtm to body as next is including it in head properly
boodland Sep 2, 2024
e50b3c5
Add comment to tackle in the future
boodland Sep 2, 2024
c135478
Move gtm script from _document to _app
boodland Sep 3, 2024
45cb083
Merge branch 'next-js-migration' into app-router-migration-google-tag…
boodland Sep 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion app/layout.tsx
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
Loading