Duplicate pageView on initial page load

[Damil2020]

Hi folks!
Can anyone help me avoiding a duplicate pageView being generated on the first page load? I have the pageTracking setting enabled, since I need to track pageViews in every route change. If I don't enable I don't get any pageviews so I suppose I need it.

However on the very first page load (or if I do a hard refresh) I always get two duplicate pageviews instead of one.

My site is running on Universal mode by the way.

Can anyone help me out?

Thanks in advance!

[proArtex]

@Damil2020 take a look at my comment here: #33

[LoopsGod]

@Damil2020 Disable pageview tracking in your nuxt.config.js, and add pageview tag inside Google Tag Manager with the following triggers; "All Pages", "History Change".

Read more here: https://support.google.com/tagmanager/answer/7679322?hl=en

Good luck

[proArtex]

@J0XX0 This approach has its own drawbacks. It will mess up meta info from current and previous route due to vue-meta delays, see here. I couldn't fix it though. So tracking with 250ms delay works more precise in this case.

[LoopsGod]

@proArtex I see, that's happening for us too. Since the pageview URL is correct we don't really care for the page title. Facebook Analytics doesn't even seem to collect the page title anyway, so I think it's not really an important unit of measure.

I would say tracking with 250ms delay just for the title is a big no-no, considering you'd lose data; only in order for the page title to be correct. But whatever works for your case.

[LoopsGod]

@proArtex you could potentially set custom Javascript in GTM as well to await the title and then push the pageview. Keeps all your analytics on GTM (dynamic) instead of built-in nuxt.

[nathanchase]

@J0XX0 @proArtex I'm struggling with the same issue, where the page title is not updated when gtm-module sends the pageTracking pageview event.

I'm not sure exactly where to place a manual pageview event, since it needs to happen on every page - both server-side AND client-side.

I've been trying to figure out if it's a matter of somehow hooking this module directly into vue-meta's afterNavigation property (that waits for the meta to update), or if it's a matter of listening for the changed method?

All I know is gtm-module's pageTracking is unusable because it never sends the correct pageTitle value on a client-side route navigation.

Any thoughts, @pi0 or @manniL ?

[LoopsGod]

@nathanchase You could push a custom datalayer / pageview event to GTM from the mounted() function, and set a timer / await for the onroutechange or something. I don't think there is a callback for onTitleChange, but I'm not sure.

For the server-side AND client-side, analytics is client-only. GTM & Analytics SDKs need to generate a clientId and set a cookie using the analytics.js library, so your only way is to implement it on the client side.

Edit: I misread, yeah you can hook it up to the afterNavigation callback. SSR should not be a problem because SSR will only occur on the first page load, which will render the title correctly anyway. It's a little bit more conventient to put it in the mounted() function, but I'd suggest reading up on the vue-meta docs, I haven't so idk ;)

[nathanchase]

@J0XX0 I should be specific in saying that I need the pageview tracking to occur whether someone lands on a page after a full page browser refresh (server-rendered) or if someone is navigating around the site in-browser (client-side route navigation).

So I just need to ensure the meta info is accurate in both scenarios, and get gtm-module to send along the appropriate datalayer object.

[LoopsGod]

You could create a basic pageview trigger in Google Tag Manager, and from there on push the custom GTM events from your Nuxt application on route change. The pageview trigger is called once on the first (server rendered) visit, and from thereon the onRouteChange event will be pushing pageviews from nuxt.

…

On Tue, Jun 23, 2020, 20:28 Nathan Chase ***@***.***> wrote: @J0XX0 <https://github.com/J0XX0> I should be specific in saying that I need the pageview tracking to occur whether someone lands on a page after a full page browser refresh (server-rendered) or if someone is navigating around the site in-browser (client-side route navigation). So I just need to ensure the meta info is accurate in both scenarios, and get gtm-module to send along the appropriate datalayer object. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#36 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGKIDMCS3TQ627FJZE6MBNDRYDX5XANCNFSM4NICRG3Q> .

[nathanchase]

Yeah, I already have GTM listening for the nuxtRoute event, and triggering accordingly. But gtm-module has nothing to send:

I'm pretty sure it's an issue of how this method inside gtm-module is working:

function startPageTracking(ctx) {
  ctx.app.router.afterEach((to) => {
    setTimeout(() => {
      ctx.$gtm.push(to.gtm || {
        routeName: to.name,
        pageType: 'PageView',
        pageUrl: '<%= options.routerBase %>' + to.fullPath,
        pageTitle: (typeof document !== 'undefined' && document.title) || '',
        event: '<%= options.pageViewEventName %>'
      })
    }, 250)
  })
}

[dzcpy]

Hi guys, is there any working solution now?