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

请遵循本指南将 Google Analytics 集成到您的 Cordova 支持的 Quasar 应用程序中。

您可能还想阅读本教程：Cordova 应用程序的 Google Analytics 设置.

先决条件

• 确保您的所有路由都指定了名称和路径参数。否则，它们将无法发布到 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 文件中注册应用程序启动文件。如果需要，我们可以在 Cordova 封装的应用程序中这样做

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

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

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