如何根据同意 cookie 控制 Nuxt 中的 Google Analytics 跟踪？

Question

我使用@nuxtjs/google-analytics实现了 Google Analytics 跟踪

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

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

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

该文档还指出“选择退出需要在跟踪器或队列初始化之前进行”。

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

Answer 1

这是我的解决方案：

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

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

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

        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
                },
            },
        ],

最后，我们仍然需要在每个后续页面刷新时启用谷歌分析。我在mount默认布局的功能中做到了这一点/layouts/default.vue：

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>