CODEWITHSUNDEEP
javascriptvue.jsgoogle-analyticselectrondesktop-application
Aryesh
Aryesh

Reputation: 453

what features of Google Analytics can be used in Electron-Vue application

I have created an education application with electron-vue js and now I have decided to implement Google Analytics in this desktop application. I have googled for some packages but could not find what exactly I can get from Google Analytics i.e., what features of google analytics I should use to improve my study-based desktop application( electron-vue js platform). Here is a little bit description about it: a) the application is totally offline. b) it includes study stuff like audios,videos,etc.,. c) it also provides features like printing study material. Even a single idea can help me figuring out what to do with Google analytics and can be a good head start. Thanking you in advance!

Upvotes: 1

Views: 607

Answers (1)

Trevor
Trevor

Reputation: 2922

Google analytics will consider Electron a website.

I use this plugin https://github.com/MatteoGabriele/vue-analytics

And set it up like this in your main entry for Vue in your renderer

import VueAnalytics, { set } from 'vue-analytics'
Vue.use(VueAnalytics, {
    id: 'UA-idnumber',
    router,
    // debug: {
    //   enabled: true,
    //   trace: true // help you find problems
    // },
    fields: {
      cookieDomain: 'none' // no domain
    },
    autoTracking: {
      pageviewTemplate (route) {
        // allow custom page titles in the router meta
        let title = route.meta.title
        if (!title) {
          title = route.name
        }
        return {
          page: route.name,
          title: title,
          location: route.path
        }
      }
    }
  })
  set('allowAdFeatures', false) // no ads
  set('checkProtocolTask', null) // ignore electron protocols
  set('checkStorageTask', null) // ignore electrons cache solution, assume it works

Then I have directives like this

import { event } from 'vue-analytics'
Vue.directive('gaClick',
      {
        inserted: (el, binding, vnode) => {
          let routeName = vnode.context.$route.meta.title
          if (!routeName) {
            routeName = vnode.context.$route.name
          }
          el.addEventListener('click', async e => {
            const category = binding.value && binding.value.category ? binding.value.category : 'button Click'
            const action = binding.value && binding.value.action ? binding.value.action : 'Click'
            const label = binding.value && binding.value.label ? binding.value.label : `${e.target.innerText} (${routeName})`
            const value = binding.value && binding.value.value ? binding.value.value : 0
            event(category, action, label, value)
          })
        }
      })

To be used on buttons and links like this

<router-link
        :to="{name:'status-page'}}"
        v-ga-click="{label:'Status Page'}"
      >
      Status Page
</router-link>

This will give you nearly all the features google analytics has. Unless they decide to change things again and break it. Like they did in their push to firebase analytics for "apps"

Upvotes: 1

Related Questions