之前的 Analytics.js 集成已不再适用于新应用。Google Analytics 4 取代了旧版 Cordova 示例所使用的 Universal Analytics API,而且 Google 没有维护官方的 Cordova 分析插件。
请选择一个支持您目标平台版本的、维护良好的 Cordova 插件或分析服务提供商。按照该提供商的原生 Android 和 iOS 设置指南,从 /src-cordova 安装插件,并将其平台配置文件保存在 /src-cordova/www 之外。
- 分析功能可能需要用户同意、隐私声明、数据安全声明和平台特定的配置。在收集数据之前,请查阅当前 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 中调用该服务:
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 模式下注册:
export default defineConfig(ctx => ({
boot: [...(ctx.mode.cordova ? ['analytics'] : [])]
}))具体的服务实现取决于你选择的插件。验证该插件是否处于积极维护状态,如果需要 Google Analytics 则需支持 GA4,并且文档中说明了必要的用户同意和原生配置步骤。