i tried to link my website ( My Website ) to google tag manager using next js third parties library.
layout page code :
<code>export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ar" dir="rtl">
<GoogleTagManager gtmId="GTM-K7Z75CQN"/>
<body className={`${tajawal.className} bg-slate-50`}>
<DataProvider>
<NextTopLoader />
<Header />
<Navbar />
<main>{children}</main>
<Footer />
<Toaster />
</DataProvider>
<SpeedInsights />
</body>
</html>
);
}
</code>
<code>export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ar" dir="rtl">
<GoogleTagManager gtmId="GTM-K7Z75CQN"/>
<body className={`${tajawal.className} bg-slate-50`}>
<DataProvider>
<NextTopLoader />
<Header />
<Navbar />
<main>{children}</main>
<Footer />
<Toaster />
</DataProvider>
<SpeedInsights />
</body>
</html>
);
}
</code>
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ar" dir="rtl">
<GoogleTagManager gtmId="GTM-K7Z75CQN"/>
<body className={`${tajawal.className} bg-slate-50`}>
<DataProvider>
<NextTopLoader />
<Header />
<Navbar />
<main>{children}</main>
<Footer />
<Toaster />
</DataProvider>
<SpeedInsights />
</body>
</html>
);
}
and when i try to verify my website on google search console i get this message : We could not find a Google Tag Manager container ID on the home page of your site.
i also tried using this method for linking :
<code>export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ar" dir="rtl">
<Head>
<script
dangerouslySetInnerHTML={{
__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-K7Z75CQN');`,
}}
/>
</Head>
<body className={`${tajawal.className} bg-slate-50`}>
<DataProvider>
<NextTopLoader />
<Header />
<Navbar />
<main>{children}</main>
<Footer />
<Toaster />
</DataProvider>
<SpeedInsights />
<noscript dangerouslySetInnerHTML={{
__html: `
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K7Z75CQN"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
`,
}}></noscript>
</body>
</html>
);
}
</code>
<code>export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ar" dir="rtl">
<Head>
<script
dangerouslySetInnerHTML={{
__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-K7Z75CQN');`,
}}
/>
</Head>
<body className={`${tajawal.className} bg-slate-50`}>
<DataProvider>
<NextTopLoader />
<Header />
<Navbar />
<main>{children}</main>
<Footer />
<Toaster />
</DataProvider>
<SpeedInsights />
<noscript dangerouslySetInnerHTML={{
__html: `
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K7Z75CQN"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
`,
}}></noscript>
</body>
</html>
);
}
</code>
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ar" dir="rtl">
<Head>
<script
dangerouslySetInnerHTML={{
__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-K7Z75CQN');`,
}}
/>
</Head>
<body className={`${tajawal.className} bg-slate-50`}>
<DataProvider>
<NextTopLoader />
<Header />
<Navbar />
<main>{children}</main>
<Footer />
<Toaster />
</DataProvider>
<SpeedInsights />
<noscript dangerouslySetInnerHTML={{
__html: `
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K7Z75CQN"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
`,
}}></noscript>
</body>
</html>
);
}
but i get this message : The Google Tag Manager snippet on your site is in the wrong location on the page