Google Analytics 的哪些功能可用于 Electron-Vue 应用程序答案

【问题标题】：what features of Google Analytics can be used in Electron-Vue applicationGoogle Analytics 的哪些功能可用于 Electron-Vue 应用程序
【发布时间】：2020-09-08 00:53:15
【问题描述】：

我已经使用 electron-vue js 创建了一个教育应用程序，现在我决定在这个桌面应用程序中实现 Google Analytics。我已经用谷歌搜索了一些packages，但找不到我能从谷歌分析中得到什么，即我应该使用谷歌分析的哪些功能来改进我的基于学习的桌面应用程序（electron-vue js 平台）。这里有一点关于它的描述： a) 应用程序完全离线。 b) 它包括学习资料，如音频、视频等。 c) 它还提供打印学习材料等功能。即使是一个想法也可以帮助我弄清楚如何使用谷歌分析，并且可以成为一个良好的开端。提前谢谢你！

【问题讨论】：

如果完全离线，您打算如何将数据发送到 Google Analytics？编辑：这里有一个非常可靠的指南：kilianvalkhof.com/2018/apps/… 解释如何在 Electron 应用程序中实现 GA，但它必须在线才能实现。另请注意，如果在欧洲，您需要实施 GDPR。
另外，你为什么需要它？你的目标是什么？你想达到什么目的？如果不确切知道什么您特别需要 Google Analytics（分析）的原因，那么很难为您提供正确的答案。甚至有必要吗？是否有其他用于跟踪功能的解决方案？您是否正在尝试跟踪用户操作？按钮点击？材料下载？只有您知道您想要实现什么，在您知道之前，我们不知道您想具体使用 Google Analytics 来做什么。除此之外，按字面意思回答，所有功能都可以与 Eletron 应用程序一起使用。 :-)
我在我的项目中使用 vue-analytics。对此非常有效。 github.com/MatteoGabriele/vue-analytics

标签： javascript vue.js google-analytics electron desktop-application

【解决方案1】：

Google 分析会将 Electron 视为一个网站。

我用这个插件https://github.com/MatteoGabriele/vue-analytics

然后在渲染器的 Vue 主条目中这样设置

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

然后我有这样的指令

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)
          })
        }
      })

用于像这样的按钮和链接

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

这将为您提供谷歌分析的几乎所有功能。除非他们决定再次改变并打破它。就像他们在推动“应用程序”的 Firebase 分析时所做的那样

【讨论】：