After successfully integrating Google Tag Manager into my Next.js website, here is the implemented code:
import '../styles/global.css';
import type { AppProps } from 'next/app';
import Script from 'next/script';
import NextNProgress from 'nextjs-progressbar';
import { PageLayout } from '@/layouts';
const MyApp = ({ Component, pageProps }: AppProps) => (
<>
<Script
strategy="lazyOnload"
src={`https://www.googletagmanager.com/gtag/js?id=GTM-XXXXXXX`}
/>
<Script id="gtm-analytics" strategy="lazyOnload">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GTM-XXXXXXX', {
page_path: window.location.pathname,
});
`}
</Script>
<PageLayout>
<NextNProgress color="#E80371" />
<Component {...pageProps} />
</PageLayout>
</>
);
export default MyApp;
However, upon checking my Google Tag Manager Dashboard, I noticed this discrepancy: https://i.sstatic.net/rwktY.png
Despite this, it seems to be correctly loading the dataLayer (or so I believe) as shown here: https://i.sstatic.net/8Rc6S.png
Where could the source of the error possibly be?