了解您的用户并衡量用户行为是应用开发中的重要一步。不幸的是,在使用 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 Analytics 和 Google 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 秒才能在实时视图中注册。