title resolving after router's "afterEach" hook, making analytics.js / gtag.js pageviews incorrect

[darkylmnx]

I'm trying to track page vues using gtag.js, and as a simple case, I just added the pageview in an afterEach hook of the router, but the title seems to be resolved later (I guess because of the batch update performed).

This delay messes up pageview titles.

Is there a way to know when the meta title is resolved?

[Nabellaleen]

Same problem for me :/ Any tips ?

I didn't found any available hooks in vue-meta

[hecktarzuli]

Same here. But I think it's larger than this, if you look at window.location.href, it's even the old url too.. ie, it may not have anything to do with vue-meta and everything to do with listening to the right event (vs afterEach).. I'll post here if I find the answer.

Related: vuejs/vue-router#1197

I ended up saying 'screw it' and just put in a setTimeout of 500ms :(

[pimlie]

In the next branch I have added an afterNavigation hook which will at least solve the document.title issue

@hecktarzuli Shouldnt the window.location.href be updated once the DOM is updated?

[hecktarzuli]

@pimlie in theory yes. I was talking more about the first comment. If @darkylmnx is using afterEach for GA, he may want to verify the urls being sent are correct. In my project, they weren't :( A simple console.log(window.location.href) just before your GA hit should give you a clue.

[darkylmnx]

In mine they are randomly correct depending on many things. We need to find a hook that actually knows if the component is rendered, afterEach doesn't seem to do that so the question is where yo globally send GA pageviews ? For now I'm manually sending it in all my page components but it's cumbersome and repetitive Le mer. 6 mars 2019 à 18:21, Josh Deltener <notifications@github.com> a écrit :

…

@pimlie <https://github.com/pimlie> in theory yes. I was talking more about the first comment. If @darkylmnx <https://github.com/darkylmnx> is using afterEach for GA, he may want to verify the urls being sent are correct. In my project, they weren't :( A simple console.log(window.location.href) just before your GA hit should give you a clue. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#259 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABXDteFv0u6w5VZxMjFY4o8REV9ZW8XWks5vT_kogaJpZM4WWbSY> .

[hecktarzuli]

@darkylmnx GA doesn't have to be instant. There is an outstanding bug in vue-router that posa will work on once he gets time to make sure afterEach is called after the url is resolved. In the meantime, I'd just use a timeout of ~ 500ms and call it a day :)

[pimlie]

Did you look at vue-analytics?

Anyway, the afterNavigation hook I added is the only one that will work probably because vue-meta will always asynchronuously update the headers which means that no vue-router hook will ever be sufficient.

If you need it fixed now, add a beforeEach hook and trigger the GA in the first vue-meta changed callback after that beforeEach hook has run. I used that scheme in my nuxt-matamo plugin to track pages and havent seen any issues with that

[darkylmnx]

Well that's what I did at some point but there are issues with lazy loading components it's seems so I just did it in each page and it's okay. Le mer. 6 mars 2019 à 18:34, Josh Deltener <notifications@github.com> a écrit :

…

@darkylmnx <https://github.com/darkylmnx> GA doesn't have to be instant. There is an outstanding bug in vue-router that posa will work on once he gets time. In the meantime, I'd just use a timeout of ~ 500ms and call it a day :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#259 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABXDtSOOzg_92bJq0UufGGxKg-zC3GgQks5vT_wsgaJpZM4WWbSY> .

[darkylmnx]

Vue+analytics has the same issue and randomly send the title of the previous page from time to time. It seems to be complicated to find a way to fix this as this is related to the vue-meta update timing. Le mer. 6 mars 2019 à 18:36, Pim <notifications@github.com> a écrit :

…

Did you look at vue-analytics? Anyway, the afterNavigation hook I added is the only one that will work probably because vue-meta will always asynchronuously update the headers which means that no vue-router hook will ever be sufficient. If you need it fixed now, add a beforeEach hook and trigger the GA in the first vue-meta changed callback after that beforeEach hook has run. I used that scheme in my nuxt-matamo plugin to track pages and havent seen any issues with that — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#259 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABXDtXmD8tl0HCghpqkYL2tY62UbhsoMks5vT_y2gaJpZM4WWbSY> .

[hecktarzuli]

Are you hitting GA directly, or are you going through Google Tag Manager? If GTM, you could just use a custom event vs the internal 'history changed' trigger. That's what solved our problems. It also doesn't help that route changes trigger on load when they really don't, thus you get double first page hits quasi-randomly.

[darkylmnx]

No I'm using gtag.js directly which is like hitting GA directly. I'm not using GTM. Le mer. 6 mars 2019 à 18:42, Josh Deltener <notifications@github.com> a écrit :

…

Are you hitting GA directly, or are you going through Google Tag Manager? If GTM, you could just use a custom event vs the internal 'history changed' trigger. That's what solved our problems. It also doesn't help that route changes trigger on load when they really don't, thus you get double first page hits quasi-randomly. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#259 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABXDtVwzGp4dlH28-v9ZW3azv46sZCajks5vT_4BgaJpZM4WWbSY> .