Open traubisoda opened 3 years ago
It is weird since it does send in router.afterEach + a setTimeout: https://github.com/nuxt-community/gtm-module/blob/master/lib/plugin.js
Do you have a small reproduction or your current website using GTM module?
Sorry, sadly I cannot link my current code.
But I dug into the module code last night, and saw that the timeout is set to 250ms. In my case, a navigation takes longer than that on some pages. I copied the startPageTracking
function to a separate plugin, and raised the timeout to 2 seconds, after that the page title was sent correctly.
My current workaround is:
gtag('config')
event in mounted()
of every page with a mixin, to track page views
This way the page view event always has the correct values.I think a reliable way to make page tracking work automatically would be if we could somehow react to a page mount from the router, or if on navigation, the push state would happen only after the meta/head updates. The latter would be super nice, because then the GA4 enhanced events could pick up those history changes as page views (currently this has the same problem, it picks up the wrong title).
Are you using the fetch() hook to fetch data if your pages or asyncData?
Mostly in asyncData, but I'm experiencing the title issue on pages without asyncData or fetch too.
Normally with asyncData
it should be fine since it is blocking vue-router so afterEach
will have the correct data.
I can happen if you are using fetch
(non blocking on client-side) or any other Vue hooks (beforeMount
, mounted
).
For this, I suggest to call manually gtag
once your data has been fetched if your head
depends on the data.
My page titles mostly don't depend on asyncData
or fetch
, they are typed in the head()
of the page components. Is this maybe a bad practice?
What I observed, is that in universal mode, when I click on an n-link
to navigate to a page, these steps are happening in this order:
n-link
afterEach
, page title hasn't changed yetDo you have an example of the page using head
?
Sure! Here are the two pages, which I used as an example in the opening comment: https://gist.github.com/traubisoda/d5a83eeb7a02e77bcad5def857d27927
Do you mind sharing also the ~/mixins/pageview.js
file please?
I added it to the gist: https://gist.github.com/traubisoda/d5a83eeb7a02e77bcad5def857d27927
Actually $metaInfo
is undefined
.
Can you try to read the title with this.$meta().refresh().metaInfo.title
in your mixin?
export default {
// mounted is called only on client-side
mounted() {
this.$nextTick(() => {
this.$gtag('config', process.env.googleAnalyticsId, {
page_title: this.$meta().refresh().metaInfo.title,
page_path: this.$route.fullPath,
})
})
},
}
Hmm, that's strange, it's not undefined for me. Did you maybe use head: {...}
and not head() {...}
in your page?
Your code works for both cases though :)
Does this solves your issue?
Well I kinda already worked my way around the issue with the pageview.js
, the issue that I opened was regarding the original auto tracking feature of the gtm-module.
It seems when afterEach
called, sometimes the page is not mounted yet and 250ms is not always enough for a page to mount. Thus this issue happens
It seems when
afterEach
called, sometimes the page is not mounted yet and 250ms is not always enough for a page to mount. Thus this issue happens
Exactly, the same thing happens here. Occasionally, the title of the previous page is keped.
I believe that the timeout should be customized, so for these cases we could increase the 250ms to something more suitable.
Hi,
Any page view event which is triggered by clicking on n-links, are sending the title of the page where the user just navigated away as the
pageTitle
value (thepageUrl
is correct). This also happens if thepageTracking
option is set to false innuxt.config.js
, in GA DebugView thepage_view
events always have thepage_title
parameter as the title of the referer page. I think this is critical for people who use Google Analytics, as GA displays a majority of things by page title.Example: I was navigating to the home page from the "About us" page, this showed up in Tag Assistant:
Does anyone have a workaround for this situation? I am also happy to help if someone points me in the right direction to fix this.