管理Google Analytics

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

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

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

WARNING

您需要在/src/index.template.html中包含Google提供的<script>标记,这会使您的应用程序依赖于Internet连接!

先决条件

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

准备

在我们开始将Google Analytics应用于您的应用程序之前,您需要有Google AnalyticsGoogle 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秒的时间。