认识用户并衡量用户行为是App开发中的重要步骤。 不幸的是,用Capacitor包装移动应用程序后,需要一些非标准工作才能使Google Analytics工作。在纯Web应用程序中设置Google Analytics非常容易,但Capacitor会以某种方式阻止将浏览量和事件发送到Google Analytics。
遵循本指南将Google Analytics应用到Capacitor包装的Quasar应用程序中。
您可能还想阅读这些精彩的教程:Google Tag Manager and Analytics Setup for an SPA Website
WARNING
您需要在/index.html
中包含Google提供的<script>
标记,这会使您的应用程序依赖于Internet连接!
先决条件
- 确保所有路由都有指定的名称和路径参数。否则,它们不能被发布到
ga.logPage
函数。有关路由的更多信息,请参阅路由。 - 具有Google Analytics的基本知识
准备
在我们开始将Google Analytics应用于您的应用程序之前,您需要有Google Analytics和Google Tagmanager的帐户 。所以我们首先注册帐户。当您拥有这些帐户时,是时候配置标签管理器了。按照Multiminds文章中的步骤操作。
将其实施到应用程序中
对于本指南,我们假设您拥有发送给Google Analytics的固定sessionId。 Google Analytics使用sessionId来区分不同的用户。如果要创建匿名sessionId,请参阅用户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.js
中注册app启动文件。 我们只能在Capacitor包装的应用程序里这样做:
boot: [
ctx.mode.capacitor ? 'google-analytics' : ''
]
关于事件的更多信息可以在事件分析文档中找到。
运行应用时,您会看到事件和浏览量。 在实时视图中注册浏览量通常需要大约5到10秒的时间。