Skip to page content
Quasar CLI with Vite - @quasar/app-vite

管理 Google Analytics

之前的 Analytics.js 集成已不再适用于新应用。Google Analytics 4 取代了旧版 Cordova 示例所使用的 Universal Analytics API,而且 Google 没有维护官方的 Cordova 分析插件。

请选择一个支持您目标平台版本的、维护良好的 Cordova 插件或分析服务提供商。按照该提供商的原生 Android 和 iOS 设置指南,从 /src-cordova 安装插件,并将其平台配置文件保存在 /src-cordova/www 之外。

WARNING
  • 分析功能可能需要用户同意、隐私声明、数据安全声明和平台特定的配置。在收集数据之前,请查阅当前 Google Play、App Store、分析服务提供商和适用法律的要求。
  • 远程脚本会在应用的 WebView 中执行,并获得该渲染器可用的访问权限。仅从您信任的来源加载脚本,通过 Content Security Policy 限制它们,尽可能选择维护良好的原生分析集成方案。仅收集您需要的数据,避免发送密钥或直接标识符,获取适用法律和应用商店政策所要求的用户同意,并在应用的隐私声明中记录数据收集行为。

前提条件

  • 确保所有路由都有指定的 name 和 path 参数。否则它们无法传递给 ga.logPage 函数。更多关于路由的信息请参考使用 Vue Router 进行页面路由
  • 具备 Google Analytics 的基础知识

准备工作

在开始将 Google Analytics 集成到应用之前,你需要一个 Google AnalyticsGoogle Tagmanager 的账户。让我们先完成这一步。当你有了这些账户,就可以开始配置 Tag Manager 了。按照这篇 Multiminds 文章中的步骤操作。

应用集成

本指南假设你有一个固定的 sessionId 发送给 Google Analytics。Google Analytics 使用 sessionId 来区分不同的用户。如果你想创建匿名 sessionId,请参见 Analytics 文档中关于 user id 的说明

将所选插件封装在一个小型应用服务后面,而不是在整个 UI 中直接调用插件全局变量。这样应用就有一个统一的位置来:

  • 等待 Cordova 的 deviceready 事件
  • 在获得用户同意之前禁用数据收集
  • 规范化屏幕名称和事件参数
  • 处理不支持的浏览器或开发环境
  • 后续替换分析服务提供商

要上报路由变化,使用 defineBoot 创建一个 Quasar boot 文件,然后在 router.afterEach 中调用该服务:

/src/boot/analytics.js

import { defineBoot } from '#q-app'
import analytics from 'src/services/analytics'

export default defineBoot(({ router }) => {
  router.afterEach(to => {
    analytics.setCurrentScreen(String(to.name ?? to.path))
  })
})

仅在 Cordova 模式下注册:

/quasar.config file

export default defineConfig(ctx => ({
  boot: [...(ctx.mode.cordova ? ['analytics'] : [])]
}))

具体的服务实现取决于你选择的插件。验证该插件是否处于积极维护状态,如果需要 Google Analytics 则需支持 GA4,并且文档中说明了必要的用户同意和原生配置步骤。