Nuxt Analytics & PWA (service worker)

[kaboume]

What problem does this feature solve?

After installed the nuxt PWA module in my nuxt application, my application stopped to send the data to Google Analytics (whit the Nuxt Analytics module).
After many hours, I found a solution to let the module work again.
I had to add in the nuxt.config.js the sendHitTask like that

googleAnalytics: {
id: process.env.GOOGLE_ANALYTICS_ID,
debug: {
enabled: false,
sendHitTask: true
}
},

If you know why....

_{This feature request is available on Nuxt community (#c41)}

[monotykamary]

I've just noticed this issue today where no events were being fired after a certain point. I assume that it was after I configured the site to be completely PWA with the @nuxtjs/pwa package.

The website previously had a running service worker and was firing GA events without a problem, so it could be an issue after enabling HTTP2 push or somewhere during change to PWA.

[snake575]

I've got the same problem. When @nuxtjs/pwa module is installed, the analytics module doesn't work unless I set:

debug: {
   sendHitTask: true,
}

[Darkside73]

Same issue

[manastalukdar]

This problem seems to exist even with the core Vue-Analytics plugin, i.e., irrespective of whether this nuxt analytics-module is used, or vue-analytics is used as a plugin. It started happening around 3 weeks back. I have been unable to get it working even with sendHitTask: true.

Update: After some playing around, I have been able to get it working by including the core Vue-Analytics plugin directly.

[Aanhane]

Update: After some playing around, I have been able to get it working by including the core Vue-Analytics plugin directly.

Could you elaborate on that, I'm curious as I'm also running into this problem now. Did you use the analytics module or did you completely remove it and used the vue-analytics plugin?

[manastalukdar]

@Aanhane I completely removed the analytics-module and used the vue-analytics plugin.

[Aanhane]

Is there any source code / guide available on how to do this? I will do the same as well.

[manastalukdar]

1. Remove analytics-module from package.json.

2. Add vue-analytics to package.json.

3. Create plugin file vueAnalytics.js:

   import Vue from 'vue'
   import VueAnalytics from 'vue-analytics'
   
   export default (ctx, inject) => {
     Vue.use(VueAnalytics, {
       id: 'xx-xxxxxxx-x',
       checkDuplicatedScript: true,
       debug: {
         enabled: false,
         trace: false,
         sendHitTask: process.env.NODE_ENV === 'production'
       },
       router: ctx.app.router
     })
   
     ctx.$ga = Vue.$ga
     inject('ga', Vue.$ga)
   }

4. include it as a plugin in the nuxt.config.js file:

   plugins: [
       '~/plugins/vueAnalytics.js'
     ]

[markperez1904]

Nuxt.js v2.10.0 broke the analytics-module for me.

I reverted back to v2.9.2, and everything seems to be working again.

[bigsee]

Rather than reverting Nuxt to v2.9.2, I upgraded the analytics-module to v2.2.1. That fixed the problem for me. See the issue here and the fix here.

[MatteoGabriele]

Tbh I don't understand why there's so much boilerplate around the plug-in. When it started it was a simple wrapper of vue-analytics with router automatically attached to it, now they are not in sync anymore with all these default options on top of other default options

[ricardogobbosouza]

This has been fixed as @bigsee said