Vue异步方法中GA4事件重复触发问题求助

我在项目中使用vue-gtag追踪产品选择行为，通过自定义封装的notification工具发送事件。目前其他事件均可正常捕获，但product_selection事件出现重复触发的情况。

相关代码如下：

methods: {
    ...mapActions('menu', {
        updateCurrentProduct: 'updateCurrentProduct',
        getOriginators: 'getOriginators',
    }),

    async selectProduct(product, parent) {
        await this.$dialog.confirm({
            text: 'Deseja realmente alterar? Você será reiniciado para a tela inicial.',
            title: 'Alterar produto',
            actions: {
                false: {
                    text: 'Cancelar',
                    color: 'primary',
                },
                true: {
                    text: 'Sim',
                    color: 'secondary',
                    handle: () => {
                        this.updateCurrentProduct({
                            ...product,
                            parent,
                        });
                        let selectedProduct = product.register.name;
                        notification('ANALYTICS_EVENT', {
                            event: 'product_selection',
                            payload: {
                                selectedProduct,
                            },
                        });
                        this.$emit('onClose', { ...product });
                    },
                },
            },
        });
    },
},

通过GA调试工具可观察到事件重复触发的现象，但在notification调用位置添加console.log仅打印一次，对此我十分困惑，不知该如何解决。

1. 检查自定义notification工具的实现 #

既然console.log只执行一次，但事件重复上报，问题大概率出在notification工具内部：

• 排查notification是否对ANALYTICS_EVENT类型设置了重复监听或重复发送逻辑，比如是否在多个地方注册了相同的事件处理器，导致一次调用触发多次GA上报。
• 查看notification是否带有自动重试机制，比如网络波动时的重试逻辑，如果未添加防抖或去重处理，可能会导致事件重复发送。

2. 排查vue-gtag的配置与实例 #

• 确认项目中是否多次初始化vue-gtag，比如在main.js或多个组件中重复调用Vue.use(VueGtag)，导致多个实例同时上报事件。
• 检查vue-gtag的配置，是否开启了自动追踪某些行为（如trackPage），这些自动事件是否与你手动发送的product_selection事件重叠，造成重复触发。

3. 检查组件的重复挂载情况 #

• 包含selectProduct方法的组件，是否存在多次渲染的情况（比如在v-for循环中重复渲染，或路由切换时未正确销毁），导致多个组件实例共存，触发事件时多个实例同时执行上报。可以在组件的created钩子中添加console.log，查看组件是否被多次创建。

4. 给事件添加去重标记（临时方案） #

可以给每次发送的事件添加唯一标识，在notification内部实现去重逻辑：

// 调用notification时添加唯一ID
notification('ANALYTICS_EVENT', {
    event: 'product_selection',
    payload: {
        selectedProduct,
        eventId: Date.now() + Math.random() // 生成唯一标识
    },
});

// 在notification工具内部处理去重
function notification(type, data) {
    if (type === 'ANALYTICS_EVENT') {
        // 用全局对象存储已发送的eventId
        window.sentEvents = window.sentEvents || {};
        if (window.sentEvents[data.payload.eventId]) return;
        window.sentEvents[data.payload.eventId] = true;
        // 再调用vue-gtag上报事件
        this.$gtag.event(data.event, data.payload);
    }
}

5. 绕过notification直接调用vue-gtag测试 #

暂时跳过notification工具，直接在handle函数中调用vue-gtag的事件上报方法：

this.$gtag.event('product_selection', { selectedProduct });

如果此时事件不再重复，即可确定问题出在notification工具上，针对性修复即可。

内容的提问来源于stack exchange，提问作者Lucas Fonseca