认识用户并衡量用户行为是App开发中的重要步骤。 不幸的是，用Capacitor包装移动应用程序后，需要一些非标准工作才能使Google Analytics工作。在纯Web应用程序中设置Google Analytics非常容易，但Capacitor会以某种方式阻止将浏览量和事件发送到Google Analytics。

遵循本指南将Google Analytics应用到Capacitor包装的Quasar应用程序中。

您可能还想阅读这些精彩的教程：Google Tag Manager and Analytics Setup for an SPA Website

先决条件

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

准备

在我们开始将Google Analytics应用于您的应用程序之前，您需要有Google Analytics和Google Tagmanager的帐户 。所以我们首先注册帐户。当您拥有这些帐户时，是时候配置标签管理器了。按照Multiminds文章中的步骤操作。

将其实施到应用程序中

对于本指南，我们假设您拥有发送给Google Analytics的固定sessionId。 Google Analytics使用sessionId来区分不同的用户。如果要创建匿名sessionId，请参阅用户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.conf.js中注册app启动文件。 我们只能在Capacitor包装的应用程序里这样做：

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

关于事件的更多信息可以在事件分析文档中找到。

运行应用时，您会看到事件和浏览量。 在实时视图中注册浏览量通常需要大约5到10秒的时间。