Google Analytics module support for vue-analytics?

[tillkolter]

Telling from the source code, the GA module only sends page views from the router afterEach hook. Will there be support for tracking custom events as in the vue-analytics plugin:

this.$ua.trackEvent('Banner', 'Click', 'I won money!')

_{This feature request is available on Nuxt.js community (#c33)}

[pi0]

@tillkolter Would love to add integration. Actually last time I've used vue-analytics (~5-6 month ago) It made some serious SSR problems that i decided using ga directly.

[tillkolter]

Unfortunately I can not help you with real-world-approved suggestions from the plugin as I am at the moment more evaluating the options based on judging the source code.

What I will definitely need for my customer would be to track click events.

  trackEvent (category, action = null, label = null, value = null) {
    // TODO : FieldObject is full syntax, refactor this at one moment
    logDebug('Dispatching event', { category, action, label, value })

    ga('send', 'event', category, action, label, value)
  }

I guess implementing it directly inside the module wouldn't cost a fortune, but I have zero experience with writing/extending NodeJS not to speak of integrating with Vue/Nuxt (doing 4 months VueJS/Javascript now).

I came accross your GA module, because all other solutions (including vue-analytics itself and the plugin intergration officially suggested by the Nuxt documentation trigger a conflict with JSON+LD markup embedded in components (I stated the problem and my solution here) and you seem to have solved this problem by explicitly attaching the script to the head.

[pi0]

Well I will keep this issue open as an enhancement to analytics module. Actually i need to review vue-analytics too for changes and possibility to integrate. BTW for now i think you may use a vue mixin to refactor common use cases like event tracking to single place and using that in page components.

[MatteoGabriele]

I thought the vue-analytics was the one I've developed but then I saw the link and it isn't, but if you are interested in google analytics features for vue that doesn't break on SSR you can check this https://github.com/MatteoGabriele/vue-analytics since I have recently added a check so that won't break on a server side environment.

I'm also releasing a new version that saves all untracked event that couldn't been tracked due to SSR or GoogleAnalaytics script not loaded and then fires them after it's all ready.

If you have better ideas for a server side friendly module, please let me know :)

[pi0]

@MatteoGabriele Never heard of that. Seems a super cool library. Do you think we can have a nuxt module integration for vue-analytics? I can deprecate current implementation in favor of that if it works with nuxt.

[MatteoGabriele]

Sure, I would love to work on that :)

[pi0]

@MatteoGabriele I've created a dedicated repository nuxt-community/analytics-module with write permission.

Good luck and just ping me there if any help was needed.

[MatteoGabriele]

I will start running a Nuxt application and see what my plugin does or doesn't do in this context and then check the best way to integrate that.

@pi0 thanks again, I'll let you know for sure :)

[MatteoGabriele]

Hi @pi0 I have a question: How can I pass options to a module and also have access to the router instance?

[pi0]

For passing options to a module, when registering it we can do this:

modules: [
  ['path to module', /* module options */]
]

To access router instance modules can't do anyting, as it is a runtime thing (Via plugins). Suggest taking a quick look into current version of analytics, that may help getting good ideas.

[MatteoGabriele]

If I don't have access to the app and options, there's nothing I can do. The plugin has a lot of customizations and you need to pass options if you need to, also the most important thing is that out of the box you only need to pass the domain tracking ID and your router and it will take care of everything with few lines of code.

In Nuxt as far as I understand you can just achieve this creating a plugin yourself in the application, doing something like this

import Vue from 'vue'
import VueAnalytics from 'vue-analytics'

export default function ({ app }) {
  Vue.use(VueAnalytics, {
    id: 'UA-123456-78',
    router: app.router
  })
}

and this was what I wanted to do out of the box for the Nuxt implementation so that you only have to pass the domain tracking ID and that's it.

[pi0]

In Nuxt as far as I understand you can just achieve this creating a plugin yourself in the application

Not exactly :D This is why modules exist! They can magically add plugins to nuxt project generated files. For passing options, we can use template system which writes those options to plugin.

See this: https://nuxtjs.org/guide/modules#template-plugins https://github.com/nuxt-community/modules/blob/master/modules/google-analytics/index.js#L16 https://github.com/nuxt-community/modules/blob/master/modules/google-analytics/plugin.js#L15

[MatteoGabriele]

Yeah I saw that but I have to extend the plugin with whatever the developer adds as options: do I have to render every key/value pairs with a for loop like a template?

[pi0]

We can indeed serialize everything as options params. And just pass it down :)

Inside plugin template:

new vueAnalytics(<%= options.analyticsOptions %>)

[MatteoGabriele]

I now have it working, but I have this warning in the terminal that I don't understand, to be honest 😄 18:20-32 "export 'default' (imported as 'VueAnalytics') was not found in 'vue-analytics'

[MatteoGabriele]

Besides this warning, I've pushed some changes to the repo

this is what needs to be added in the nuxt.config.js file

...
modules: [
    ['@nuxtjs/google-analytics', {
      id: 'UA-12301-2'
    }]
  ],
...

Everything else is already written in the package guide itself, besides that here the router is auto-injected by default and it's possible to turn it off passing an option.

[pi0]

Nice & seems working :) For easier usage I suggest supporting a top level option too. So usage would be :

modules: [
     '@nuxtjs/google-analytics'
],
analytics: {
  id: 'UA-12301-2'
}

Some more notes. Currently id is ua so it would be nice if we have a backward compatibility, by checking that option exists in the module. also README should be more clear to reference original library for more usage info. Maybe bringing some common cases into module readme would be nice too.

Anyway just feel free ignoring this changes, if don't have enough time. I can help to handle them.

[pi0]

I will check that export default warn too. It seems we need some rollup changes in your library for better ES6 imports support.

[MatteoGabriele]

yeah I can make a check for the ua property, the top level options and I will add few lines in the readme so to let the developer know the differences between the vue-analytics package and this one, which is basically just the auto-injected router instance.

I will add this and let you know here.

For anything else let me know :)

[MatteoGabriele]

@pi0 I've added ua, top level options and little bit of usages.

[MatteoGabriele]

I've updated the vue-analytics version used by the module to the latest v5.