Nuxt.js: Google analytics tracks the default title set in nuxt.config.js.

[uto-usui]

Hi.
I track the site with Google analytics.

plugin/gtag.js

export default ({app}) => {
  if (process.env.NODE_ENV !== 'production') return;
  (function (win, doc, script, url) {
    let a = doc.createElement(script);
    let m = doc.getElementsByTagName(script)[0];
    a.async = 1;
    a.src = url;
    m.parentNode.insertBefore(a, m);
  })(window, document, 'script', 'https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-1');

  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-xxxxxxxx-1');

  app.router.afterEach((to, from) => {
    gtag('config', 'UA-xxxxxxxx-1', to.fullPath);
  });
}

In most cases, this code works fine, but sometimes the title set in nuxt.config.js is tracked instead of the original page title, when the page is initially displayed.

I want to track Google analytics at the time when vue-meta resolves the correct page title, what is the solution?

Could anyone help me?
Thanks.

_{This question is available on Nuxt.js community (#c2721)}

[manniL]

Have you tried using the analytics-module?

[uto-usui]

@manniL

thanks message,

I examined it.
But I did not find anything that would match gtag.js.
Do you think it can be applied to gtag.js?

[manniL]

@uto-usui Oh, sorry. Yeah, there is a tag manager module as well.

[uto-usui]

@manniL

gtag.js is neither analytics.js nor Google Tag Manager.

gtagjs

I tried trying the tag manager module, but that was impossible.

[manniL]

@uto-usui Oh. I didn't know about it! Don't think there is a plugin for it yet, but it shouldn't be hard to create one if needed.

[manniL]

Any reason you don't use analytics.js/the analytics-module?

[uto-usui]

@manniL

I thought official source code was easy to customize.

https://ja.nuxtjs.org/faq/google-analytics

But it did not work well.
For now, I will try to make a plug-in with reference to analytics-module.

The reason for analytics.js is the client's request.
It will be easy if I solve it with analytics.js 😢

[maximivanov]

I don't think switching to analytics-module will change anything - it's still possible that GA will grab page title before it's updated by vue-meta.
Relevant discussion: https://github.com/MatteoGabriele/vue-analytics/issues/32
There's a suggestion to track page views manually in mounted but that doesn't look scalable/nice.

Considering example at https://nuxtjs.org/faq/google-analytics, I wonder if it's possible to fetch page title from to argument (which is destination route)? More specifically, from to.matched["0"].components.default.options.head(). And use that to override page title in GA call.

[dohomi]

I wired up a nuxtjs plugin as you can follow here for gtag.js:
https://github.com/nuxt-community/google-gtag

I have an issue to parse the options into a variable inside of plugin.js. Sometimes the parse of the <%= serialize(options) %> is not working as expected in line https://github.com/nuxt-community/google-gtag/blob/master/lib/templates/plugin.js#L3

@Atinux @pi0 could you have a look to see what I'm doing wrong? Thanks!

[failpunk]

It's unfortunate that head() is being executed so late in the lifecycle. If it was executed earlier a bunch of issues would be resolved as plugins would have access to correct information. As it stands it's executed after router.afterEach which is WAY too late to be correct for most SEO.

I don't think we have access to the route info to add extra data either so...yeah.

[galvez]

@dohomi added that module to our post-2.0 checklist. Thanks!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.