Page titles not always showing in GA dashboard

[simondib]

Description

Page titles not always reporting correctly.

Expected behavior

Page <title> tag should be reflected as the page name in the GA dashboard. E.g. <title>My page title</title> should show as "My page title".

Actual behaviour

The page title isn't always logged and instead sometimes falls back to the page's path '/page-title'. This essentially displays the same page as two separate entries in GA's dashboard under "Page title and screen name" leading to confusion.

Environment

Nuxt v2.15.6 using vue-gtag as a plugin:

import VueGtag from 'vue-gtag'

export default ({ app, $config: { googleAnalytics, env } }) => {
    Vue.use(
      VueGtag,
      {
        config: { id: googleAnalytics }
      },
      app.router
    )
  } 
}

[kareiki]

Yes I had the same problem, to workaround I am manually sending pageview and that doesn't solve the problem either.

So I added a timeout 1000ms, not perfect but working

setTimeout(() => {
  const info = { page_path: location.pathname, page_title: document.title, page_location: location.href }
  this.$gtag.pageview(info)
}, 1000)

[broox]

i just started manually tracking the fullPath in a plugin and analytics seems to pick everything up properly...

/plugins/analytics.js

import Vue from 'vue'
import VueGtag from 'vue-gtag'
import { pageview } from 'vue-gtag'

export default function(context, inject) {
  Vue.use(VueGtag, {
    config: {
      id: 'G-XXXXXXXXXX',
    },
    enable: process.env.NODE_ENV === 'production'
  })

  const router = context.app.router

  router.afterEach(to => {
    Vue.nextTick(() => {
      if (process.env.NODE_ENV === 'production') {
        pageview(to.fullPath)
      } else {
        console.log('track pageview', to.fullPath)
      }
    })
  })
}

nuxt.config.js

  plugins: [
    { src: '~/plugins/analytics', mode: 'client' },
  ],

[MatteoGabriele]

I always had issues with Nuxt: I already wait that the router is ready and an extra tick as well, but it's not enough for the framework to deal with it. I can't do much. I opened a ticket a long time ago on their repository that led to no answers.

[oripka]

I ran into the same issue; couldn't find the ticket you mentioned in the https://github.com/nuxt/framework repository, do you have a link for it?

[vedmant]

There is another way:

/plugins/analytics.js

import Vue from 'vue'
import VueGtag from 'vue-gtag'

export default ({ app, $config }) => {
  Vue.use(VueGtag, {
    config: { id: $config.gtagId },
    appName: $config.name,
    pageTrackerTemplate: (to, from) => to.fullPath,
  }, app.router)
}

[tux2nicolae]

Bumping this up, I encounter the same problem

[oripka]

I ended up not using the vue router integration but tracking the page views manually:

pages/example.vue

<script setup>
...
import { pageview } from 'vue-gtag'

pageview(
  {
    page_path: "/item/1",
    page_location: "https://example.com",
    page_title: "Example"
  }
);
</script>

plugins/vue-gtag.client.js

import VueGtag from 'vue-gtag'

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VueGtag, {
        config: {
            id: 'G-XXXXXXXX',
        }
    })
})

[zyxkad]

Hi I'm using pure Vue, but I also have this problem as well. The page view collect request seems not immediately post (I checked it in the chrome), but it didn't use the document.title that I changed in both onBeforeMount hook and onMount hook.

[zyxkad]

It sometimes use document.title, but other times just use router.name, is that on purpose?