How to get page title for analytics?

[Kinzi]

I'm mainly using this for analytics stuff. Usually Analytics tracks the page title along with the url.

Anyway the page title can be pushed to the nuxtRoute data layer object on route change? This way I could simply set up a variable for it in GTM

[pi0]

Hi @Kinzi and thanks for idea :) Do you mind creating a PR to add support?

[Kinzi]

Sure: #8

Seems to work for me but I'm not an expert with this stuff and I'm sure there is a better solution. ;)

Had to set a timeout because otherwise it would fetch the last page title not the new one unfortunately...

[pi0]

Released by 2.2.0: https://github.com/nuxt-community/gtm-module/releases/tag/v2.2.0

[voltane]

Sure: #8

Seems to work for me but I'm not an expert with this stuff and I'm sure there is a better solution. ;)

Had to set a timeout because otherwise it would fetch the last page title not the new one unfortunately...

I'm facing a problem with that timeout. 250ms is not enough for pages, where head() method is defined. In my case that timeout is around 500ms (otherwise still previous page title is send) and it seems that this value is use-case dependant. Anyway i think that simply increasing the timeout here is not the way to go.
The problem is that head() method is called in the same time or soon after vue-router afterChange event.
For now i dont have any workaround for that but maybe we can mess around with beforeRouteEnter -> next() callback which is called after DOM is updated ? Registering a global mixin with that callback defined and inside pushing the PageView event seems promising.

Edit:

I added this code and it works fine. If You guys want i can push it as a pull request.

[jakubm95]

Hello @pi0
Unfortunately it doesn't work properly, pageTtitle is being sent from the previous page

[djave-co]

Also facing @jakubm95 issue. The head() function using async data.

  async asyncData({ $axios, route, app }) {
    const page = await app.$api.$get(route.fullPath);
    return { page };
  },
  head() {
    let meta = this.page.meta;
    let titleMeta = meta.find((m) => m.property == "title");
    let title = titleMeta ? titleMeta.content : "Default title";
    return { title, meta };
  },

The first page load tracks the default title, then every subsequent page load tracks the previous page title.