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 Analytics 和 Google 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,并且文档中说明了必要的用户同意和原生配置步骤。