了解您的用户并衡量用户行为是应用开发中的重要一步。不幸的是，在使用 Capacitor 包装移动应用后，要使 Google Analytics 正常工作需要一些非标准的工作。在纯 Web 应用中设置 Google Analytics 非常容易，但 Capacitor 似乎阻止了页面浏览量和事件发送到 Google Analytics。

请按照本指南将 Google Analytics 实现到您的 Capacitor 驱动的 Quasar 应用中。

先决条件

• 确保所有路由都指定了名称和路径参数。否则，无法将其发布到 ga.logPage 函数。有关路由的更多信息，请参阅 路由。
• 具备 Google Analytics 的基本知识

准备工作

在开始将 Google Analytics 实施到您的应用程序之前，您需要一个 Google Analytics 和 Google Tagmanager 帐户。所以让我们先来做这件事。拥有这些帐户后，就可以配置标签管理器了。按照此 Multiminds 文章 中的步骤操作。

在应用程序中实施

在本指南中，我们假设您有一个固定的 sessionId 并将其发送到 Google Analytics。Google Analytics 使用 sessionId 来区分不同的用户。如果要创建匿名 sessionId，请参阅 Analytics 文档中的用户 ID。

将标签管理器代码段放置到 index.html 文件的头部（如果您已按照 Multiminds 文章 操作，您已拥有此代码）。在您的代码库中创建一个名为 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' })
  }
}

为了确保应用程序中的所有页面都自动发布到 Google Analytics，我们创建了一个应用程序启动文件

$ 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 文件中注册应用程序启动文件。如果需要，我们只能对 Capacitor 封装的应用程序执行此操作

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

有关事件的更多信息，请参阅 Analytics 文档中的事件。

运行应用程序后，您将看到传入的事件和页面浏览量。页面浏览量通常需要大约 5 到 10 秒才能在实时视图中注册。