Encountering an error on page load with the message:
window.gtag is not a function
Using Next.js version 14.0.4.
All existing solutions seem to hinder data collection, preventing the website from setting cookie consent correctly. I am uncertain about the next steps to take. The code shows that multiple data types need to be collected. Initially, it worked with just one type but after upgrading to Next.js 14, errors started to occur. The packages used were @types/gtag.js and client-only.
The layout.tsx file appears as follows:
<html lang='en'>
<head>
<GoogleAnalytics />
</head>
<body className='overflow-x-hidden mx-auto w-[100vw] flex flex-col items-center justify-center box-border'>
<Toaster />
<Navbar />
<div className="right-10 md:right-0 -top-10 md:top-10 absolute w-[100vw] h-[230px] gradient-02 -z-50 hidden sm:block" />
<main className='w-[100vw] overflow-x-hidden mx-auto'>
{children}
</main>
<Footer />
<CookieBanner />
</body>
</html>
This is the CookieBanner Component:
'use client';
/**
* Type Definition
*/
type ConsentState = {
adStorage: boolean
analyticsStorage: boolean
}
export default function CookieBanner() {
// Define useState
const [cookieConsent, setCookieConsent] = useState<ConsentState>();
// useEffect checks if cookie_consent is already set
useEffect(() => {
const storedCookieConsent = getLocalStorage("cookie_consent", null);
setCookieConsent(storedCookieConsent);
}, [setCookieConsent]);
// useEffect updates once cookieConsent is updated to update the consent values
useEffect(() => {
const adStorage = cookieConsent?.adStorage ? 'granted' : 'denied'
const analyticsStorage = cookieConsent?.analyticsStorage ? 'granted' : 'denied'
// Check if window.gtag is there
if (typeof window !== 'undefined' && typeof window.gtag !== 'undefined') {
window.gtag("consent", 'update', {
'analytics_storage': analyticsStorage,
'ad_storage': adStorage,
});
console.log("Cookies set")
} else {
console.warn("gtag is not defined, cannot update consent.");
}
setLocalStorage("cookie_consent", cookieConsent);
}, [cookieConsent]);
return (
<div
className={`my-10 mx-auto max-w-[90%] md:max-w-screen-sm
fixed bottom-1 left-0 right-0
${cookieConsent != null ? "hidden" : "flex"} px-3 md:px-4 py-3 justify-between items-center flex-col gap-4 text-[17px]
bg-[#2E3A59] rounded-lg shadow-white shadow z-50`}
>
<div className='flex flex-col sm:flex-row items-center justify-between gap-y-3 w-full'>
<div className='text-center sm:text-left text-stone-200 w-fit min-w-[50%]'>
<Link href="/datapolicy" aria-label='Link to Data Policy'><p>This site uses <span className='font-bold text-primary hover:underline duration-1000'>Cookies.</span></p></Link>
</div>
<div className='flex gap-4 items-center justify-center w-full'>
<Button onClick={() => setCookieConsent({ adStorage: false, analyticsStorage: true })} size="md" variant="ghost" className='max-w-[33%] flex flex-col items-center justify-center' aria-label='Accept required Cookies'>
<span>Accept</span>
<span className='text-[11px]'>(required only)</span>
</Button>
<Button onClick={() => setCookieConsent({ adStorage: true, analyticsStorage: true })} size="md" variant="secondary" className='max-w-[60%]' aria-label='Accept all Cookies'>
Accept All
</Button>
</div>
</div>
</div>
)
};
I have tried various approaches like moving GoogleAnalytics to different locations in the layout and making changes to the cookie banner with no success. Despite conditionally checking for window.gtag, the error persists, hindering data collection.
Thank you in advance!