为什么捐赠
API 资源管理器
升级指南
新增!
quasar.config 文件
转换为使用 Webpack 的 CLI
浏览器兼容性
支持 TypeScript
目录结构
命令列表
CSS 预处理器
路由
延迟加载 - 代码分割
处理资源
启动文件
预取功能
API 代理
处理 Webpack
处理 process.env
使用 Pinia 进行状态管理
使用 Vuex 进行状态管理
代码检查器
测试和审计
开发移动应用
Ajax 请求
将开发服务器开放给公众
Quasar CLI 与 Webpack - @quasar/app-webpack
管理 Google Analytics

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

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

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

警告

您需要在 /index.html 或 /src/index.template.html 中包含 Google 提供的 <script> 标签,这将使您的应用依赖于互联网连接!

先决条件

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

准备

在开始将 Google Analytics 实施到您的应用之前,您需要一个 Google AnalyticsGoogle 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 秒才能在实时视图中注册。