Triggering an event causing Pageview to be sent on child component

[enkota]

Bit of a unique case here.

I have set the send_page_view value to false on the config parameters so I can manually send a custom page_path parameter under this.$gtag.pageview (need to modify the path to reference the ID instead of slug on GA).

This all works fine, however when I try to send an event, it will appear on the GA real time view as the original url of the page.

Disabling the this.$gtag.pageview trigger altogether appears to still send the original page view with only the event trigger.

I'm also using Vue-router but not using the integration as want to manually edit the path. Everything works fine until I trigger an event during the same @click instance.

Child component event trigger (Triggered when post link is clicked)

//Send event
this.$gtag.event(val.type, {
    'event_category': val.post.id,
    'event_label': val.post.title,
})

Parent component to track the page view (Where all the post lists reside) Called on created()

//Send view
this.$gtag.pageview({
     page_path: '/profile-' + this.profile.id,
 })

I've also tried to emit the click back to the parent and call the event there but still seems to send the original path URL.

After lots of testing I believe it's down to something on the $gtag.event calling the original path as the Pageview.

Any help would be great!

[enkota]

Update:

I am guessing the pageview needs to fire to Google before the event sends? Is it possible to add a promise or wait until the Pageview is sent before sending the event? Not really sure why it's happening.

[wparad]

You need to make sure that the page_path is configured in gtag before sending an events. What is sent in previous pageviews is largely irrelevant. You can set that by populating the pageTrackerTemplate: https://matteo-gabriele.gitbook.io/vue-gtag/auto-tracking#page-tracker-template

[enkota]

Yep thank you! I discovered the reason was that I was setting a custom dimension up before firing the page view which sends an event regardless.

In the end, I decided not to change the slug and send the ID by dimension instead. I used .set() to create the dimension then fire the view. Been tracking perfectly ever since :)

trackView() {
            bootstrap().then(gtag => {

                this.$gtag.set({
                    'custom_map': {
                      'dimension1': 'id',
                      'dimension2': 'type'
                    }
                })

                this.$gtag.pageview({
                    id: '' + this.page.id + '',
                    type: 'page',
                    page_path: this.$router.currentRoute.path,
                })
            })
        }