如何解决document.cookie 在模板文字中看不到嵌入的表达式
我正在使用 Next.js 和 Google Analytics 4 (gtag.js) 实现 cookie 同意的逻辑。我已经使用 this 示例作为基础。逻辑很简单:如果用户接受 cookie - 加载脚本,如果没有 - 检查 cookie 是否已经存在(例如用户改变主意) - 禁用 GA cookie 并删除当前的 cookie,如果不存在(第一次同意) - 只需禁用 GA cookie。
GA4 sets 3 个 cookie,其中之一是 -ga-(container-id)。此 ID 应存储为 env var。要删除 cookie,我将 Max-Age 参数设置为零。
代码:
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','analytics_storage': 'denied'})
}
}
},[router.events,areCookiesAccepted])
问题是 document.cookie 看不到模板文字中嵌入的 env var 并且 cookie 没有被删除,但是当我公开没有 env var 的裸 ID 时 - 一切正常。我仔细检查了 - env.local 文件中没有拼写错误。有人知道这里出了什么问题吗?
解决方法
到目前为止,我以 hack 告终。所以这不起作用:
document.cookie = `_ga_${process.env.NEXT_PUBLIC_GA_ID}=; Max-Age=0;`
但这有效:
const cookiePair = document.cookie.split('; ').find(row => row.startsWith('_ga_'))
const cookieName = cookiePair.substring(0,cookiePair.indexOf('='))
document.cookie = `${cookieName}=; Max-Age=0;`
正在成功删除 Cookie。不过,我对这种方法并不完全满意,想知道为什么会出现最初的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。