如何基于同意cookie控制Nuxt中的Google Analytics跟踪

Question

我使用@nuxtjs/Google Analytics 实现了谷歌分析跟踪

我现在想控制是否根据用户的同意来跟踪用户。我发现了nuxt cookie控件，它似乎允许收集同意。

根据@nuxtjs/google analytics//vue analytics的文档，如果用户不同意，似乎只需要调用this.$ga.disable()。

然而，我在早期的一些篡改工作中注意到，每当我调用this.$ga.disable()时，它似乎都不会在下一次刷新后生效。

该文献还指出；需要在初始化跟踪器或队列之前进行选择退出">

我有点不知道在应用程序中需要如何/在哪里调用this.$ga.disable()。有人能给我指点迷津吗？

Answer 1

这是我的解决方案：

首先，我通过defaut禁用了谷歌分析，这样在用户同意之前不会进行跟踪。我通过在nuxt.config.js中设置选项disabled=true来做到这一点。例如：

googleAnalytics: {
id: 'UA-xxxxxxxx-x',
disabled: true,
},

然后我在nuxt.config.js的cookie配置中配置了accepted()回调，以启用谷歌分析，如果同意：

optional: [
{
name: 'Google Analytics',
identifier: 'ga',
description: '...',
initialState: false,
cookies: ['_ga', '_gat', '_gid'],
accepted: () => {
window.$nuxt.$ga.enable() // Activate module
window.$nuxt.$ga.page(window.$nuxt.$route.path) // Track current route
},
declined: () => {
window.$nuxt.$cookies.remove('ga') // Remove any existing Google Analytics cookies
},
},
],

最后，我们仍然需要在每次页面刷新时启用谷歌分析。我在默认布局/layouts/default.vue:的mount函数中执行了此操作

import { onAnalyticsReady } from 'vue-analytics'
export default {
mounted() {
onAnalyticsReady().then(() => {
const hasConsent = this.$cookies.isEnabled('ga')
if (hasConsent) {
this.$ga.enable() // Activate module
this.$ga.page(this.$route.path) // Track current route
}
})
},
}
</script>