GA4 event firing twice on Vue async method

Question

I've been trying to track a product selection on my website using vue-gtag. The event is sent using an abstraction I created called 'notification'. I've been capturing all events successfully except this one which is being fire twice for some reason.

Here's the piece of code:

    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 });

                            
                            
                        },
                    },
                },
            });
        },
    },

In addition, when using GA debug extension that's what happens

I'm new to JavaScript and vue coding. That being said I tried to simply use a console.log in the exact same spot as the tag code and it is just being printed once and that's what's bugging me.

Is there something I could do to eliminate the double sending?

Answer 1

1. Don't use the ga debug extension. It's outdated. Use Adswerve datalayer inspector. Pay attention to the last update date when installing extensions.

2. Double check the number of your events in the network tab to make sure they're really duplicating.

3. Show the screenshot of your dataLayer, check it for duplicates.

4. Don't implement analytics through gtag.js. Use GTM. Reasons? Maintainability, scalability, manageability, abstraction of completely unneeded complexity and awkward architecture of the gtag's api.