After researching How to load Google Tag Manager with the next/script component (Next.js 11) and reviewing this documentation page, my issue remains unresolved.
I am looking to implement Google Tag on multiple websites developed using nextjs, so I created a basic reusable component:
import Script from 'next/script'
const GoogleTag = ({ identifier }) => {
if (!identifier || !identifier.startsWith('G-')) {
throw new Error('Google tag id is not correct;');
}
return <>
<Script
src={`https://www.googletagmanager.com/gtag/js?id=${identifier}`}
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${identifier}');
`}
</Script>
</>
}
export default GoogleTag;
In each of my sites, I utilize this component in the _app.js file as follows:
import Head from 'next/head';
import GoogleTag from '../Base/GoogleTag';
export default function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<GoogleTag identifier='G-9XLT855ZE0' />
</Head>
<div>
Application code goes here.
</div>
</>
)
}
Despite these efforts, I have noticed that the Google Tag script does not appear to be loaded in Chrome's Dev Tools under the Networks tab.