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

请遵循本指南将 Google Analytics 实施到您由 Capacitor 驱动的 Quasar 应用中。

您可能还想阅读这篇优秀的教程：适用于 SPA 网站的 Google 标记管理器和分析设置

先决条件

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

准备工作

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

在应用中实施

在本指南中，我们假设您有一个固定会话 ID，并将其发送到 Google Analytics。Google Analytics 使用会话 ID 来区分不同的用户。如果您想创建匿名会话 ID，请参阅 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 秒才能在实时视图中注册。