Page titles not always showing in GA dashboard

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
    )
  } 
}

[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',
        }
    })
})

[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)
}