document.cookie doesn't see embedded expression in template literal - cookies

Question

I'm implementing logic for cookie consent with Next.js and Google Analytics 4 (gtag.js). I've used this example as basis. The logic is simple: if user accepted cookies - load script, if not - check if cookies were already present (e.g. user changed their mind) - disable GA cookies and delete current ones, if weren't present (first time consent) - just disable GA cookies.
GA4 sets 3 cookies, one of which is -ga-(container-id). This ID should be stored as env var. To delete cookie I set Max-Age param to zero.
Code:
const router = useRouter()
useEffect(() => {
if (areCookiesAccepted) {
console.log(1)
const handleRouteChange = url => {
gtag.pageview(url)
}
router.events.on('routeChangeComplete', handleRouteChange)
return () => {
router.events.off('routeChangeComplete', handleRouteChange)
}
} else {
if (
document.cookie.split(';').some(item => item.trim().startsWith('_ga=')) ||
document.cookie.split(';').some(item => item.trim().startsWith(`_ga_${process.env.NEXT_PUBLIC_GA_ID}=`)) ||
document.cookie.split(';').some(item => item.trim().startsWith('_gid='))
) {
console.log(2.1)
window.gtag('consent', 'update', {'ad_storage': 'denied', 'analytics_storage': 'denied'})
document.cookie = '_ga=; Max-Age=0;'
document.cookie = `_ga_${process.env.NEXT_PUBLIC_GA_ID}=; Max-Age=0;`
document.cookie = '_gid=; Max-Age=0;'
} else {
console.log(2.2)
window.gtag('consent', 'default', {'ad_storage': 'denied', 'analytics_storage': 'denied'})
}
}
}, [router.events, areCookiesAccepted])
The problem is that document.cookie can't see embedded env var in template literal and cookie is not being deleted, but when I expose bare ID without env var - everything works okay. I double checked - no typos in env.local file. Does anybody knows what's wrong here?

Answer 1

So far I ended up with hack. So this doesn't work:
document.cookie = `_ga_${process.env.NEXT_PUBLIC_GA_ID}=; Max-Age=0;`
But this works:
const cookiePair = document.cookie.split('; ').find(row => row.startsWith('_ga_'))
const cookieName = cookiePair.substring(0, cookiePair.indexOf('='))
document.cookie = `${cookieName}=; Max-Age=0;`
Cookie is being deleted successfully. Still, I'm not fully satisfied with this approach and would like to know why initial problem happens.