Initial page load tracking not calling pageTrackerTemplate

[bnason]

Description

Initial page loaded is being tracked incorrectly. pageTrackerTemplate is not being called.

Expected behavior

When loading the site, I'd expect the tracking of the initial page to call pageTrackerTemplate to get my custom title value.

Actual behavior

An event is sent with the actual document title which is not what I want to send. For example, my route.meta.title is set to 'Classes'. However, I have a router.afterEach hook that prepends 'Site Name | ' to it and sets document.title.

Environment

Run this command in the project folder and fill in their results:

npm ls vue-gtag: vue-gtag@1.6.2

Then, specify:

1. Operating system: Linux Mint
2. Browser and version: Chrome Version 81.0.4044.92 (Official Build) (64-bit)

Reproducible Demo

const routes = [
    {
        name: 'home',
        path: '/',
        component: () => import('pages/Home.vue'),
        meta: {
            title: () => 'Home',
        },
    },
]

router.afterEach((to, from) => {
    if (to.meta && to.meta.title) {
        const title = to.meta.title(to)
        if (title) {
            document.title = 'My Site | ' + title
        } else {
            document.title = 'My Site'
        }
    }
})

pageTrackerTemplate(to, from) {
    const trackingData = {
        page_title: to.meta.title ? to.meta.title(to) : to.name,
        page_path: to.path,
        page_location: window.location.href,
    }
    return trackingData
},

[tkd-itsuki]

I am having the same problem. Any solution to this one?

[mstcyj]

I am having the same problem too. Any solution to this one?

[m1stermanager]

same issue over here, will try some workarounds, though I think I may resort to "detecting" the title being wrong and not sending those tracks via the onBeforeTrack hooks or something?

[MatteoGabriele]

I actually I think I found the issue. I was wrongly calling gtag once loaded but this library it's slightly different from analytics and I don't have to initialise trackers or stuff like this so I need to remove that part I thought was needed and add a trackPage on Router.onReady which will also call the custom template. the onReady method returns the current route as callback so sounds like a deal

this is the fix basically

Router.onReady(current => {
    trackPage(current);

    Router.afterEach((to, from) => {
      Vue.nextTick().then(() => {
        onBeforeTrack(to, from);
        trackPage(to, from);
        onAfterTrack(to, from);
      });
    });
  });

[MatteoGabriele]

let me know if the fix worked

see https://github.com/MatteoGabriele/vue-gtag/pull/142

[MatteoGabriele]

@bnason please a feedback would be super helpful to understand if this worked

[m1stermanager]

@MatteoGabriele I've had a week off at work and I'll be checking this out monday in the AM.... I'll let you know how it goes! thanks for the effort on this and the quick turnaround.

[m1stermanager]

alright, a co-worker has the upgrade in progress, will report back shortly!

[MatteoGabriele]

Thanks a lot

[m1stermanager]

unrelated issues kept us from making this change, i'll see if I can get it in first thing in the morning. thanks again for the project, documentation, and responsiveness