管理谷歌分析

了解用户和衡量用户行为是应用开发的重要步骤。不幸的是，在用 Capacitor 包装移动应用程序后，要让谷歌分析发挥作用，需要做一些非标准的工作。在纯网络应用程序中设置谷歌分析是相当容易的，但 Capacitor 却以某种方式阻止页面浏览和事件被发送到谷歌分析。

请按照本指南在 Capacitor 模式的 Quasar 应用中实现谷歌分析。

可能还想阅读这个教程：SPA 网站的谷歌标签管理器和分析设置

前提条件

• 确保所有路由都有一个指定的名称和路径参数。否则，它们不能被发布到 ga.logPage 函数。请参考 路由 了解更多关于路由的信息。
• 具备谷歌分析的基本知识

准备工作

在开始实施谷歌分析之前，需要一个 谷歌分析 和 谷歌标签管理 账号。按照这篇 Multiminds article 中的步骤来做。

在应用中实现

在本指南中，假设有一个固定的 sessionId，并将其发送给谷歌分析。谷歌分析使用 sessionId 来区分不同的用户。如果想创建一个匿名的 sessionId，见 Cookie 和用户识别。

将标签管理片段放到 index.html 文件的头部（如果已经做了这里面的步骤：Multiminds article），新建文件 analytics.js，内容如下：

export default {
  logEvent(category, action, label, sessionId = null) {
    window.dataLayer.push({
      appEventCategory: category,
      appEventAction: action,
      appEventLabel: label,
      sessionId: sessionId
    })
    window.dataLayer.push({ 'event': 'appEvent' })
  },

  logPage(path, name, sessionId = null) {
    window.dataLayer.push({
      screenPath: path,
      screenName: name,
      sessionId: sessionId
    })
    window.dataLayer.push({ 'event': 'appScreenView' })
  }
}

为了确保应用程序中的所有页面都自动发布到谷歌分析，创建一个应用程序启动文件：

$ quasar new boot google-analytics [--format ts]

然后编辑新建的文件 /src/boot/google-analytics.js：

import ga from 'analytics.js'

export default ({ router }) => {
  router.afterEach((to, from) => {
    ga.logPage(to.path, to.name, sessionId)
  })
}

最后在启动文件 /quasar.config.js 中注册。如果需要的话，可以只对 Capacitor 包装的应用程序这样做：

boot: [
  ctx.mode.capacitor ? 'google-analytics' : ''
]

关于活动的更多信息可在 事件衡量 中找到。

当运行应用程序时，会看到事件和页面浏览的到来。在实时视图中，通常需要大约 5 到 10 秒的时间来注册一个页面浏览。