Does anyone have a working solution for integrating Google AdSense with Next.js 14 and 15 App router? I’ve been trying to implement it but keep encountering various errors, such as:
Error 1:
A preload for ‘https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-967420172673476’ is found, but is not used because the request credentials mode does not match. Consider taking a look at thecrossorigin
attribute.
Error 2:
hook.js:608 AdSense head tag doesn't support data-nscript attribute.
I’m using the <Script>
component to add the AdSense script in the <head>
.
ROOT LAYOUT
<Script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-967420172673476"
crossOrigin="anonymous"
strategy="lazyOnload"
></Script>
COMPONENT
useEffect(() => {
const loadAd = () => {
if (typeof window !== "undefined" && window.adsbygoogle) {
window.adsbygoogle = window.adsbygoogle || [];
window.adsbygoogle.push({});
adsLoaded.current = true;
}
};
if (!adsLoaded.current) {
setTimeout(loadAd, 0);
}
}, []);
return (
<>
<div className={container}>
<div className={styles.top}>
<div className={styles.container}>
<ins
className="adsbygoogle"
style={{ display: "block", width: "100%", height: "100%" }}
data-ad-client="ca-pub-967420172673476"
data-ad-slot="354160287"
data-ad-format="auto"
data-full-width-responsive="true"
></ins>
</div>
</div>
Has anyone successfully resolved these issues? Any guidance or examples would be greatly appreciated!