了解用户并衡量用户行为是应用开发中的重要一步。遗憾的是，在使用 Cordova 封装移动应用后，需要进行一些非标准的工作才能让 Google Analytics 正常工作。在纯 Web 应用中设置 Google Analytics（分析）非常简单，但 Cordova 会以某种方式阻止将网页浏览量和事件发送到 Google Analytics（分析）。

¥Getting to know your users and measuring user behavior is an important step in App Development. Unfortunately, it takes a bit of non-standard work to get Google Analytics to work after wrapping your mobile app with Cordova. Setting up Google Analytics in a pure web application is quite easy, but Cordova somehow prevents pageviews and events from being sent to Google Analytics.

请按照本指南将 Google Analytics（分析）集成到你的 Cordova 驱动的 Quasar 应用中。

¥Follow this guide to implement Google Analytics into your Cordova powered Quasar App.

你可能还想阅读本教程：Cordova 应用的 Google Analytics（分析）设置。

¥You may also want to read this tutorial: Google Analytics Setup for a Cordova App.

先决条件(Prerequisites)

¥Prerequisites

• 确保所有路由都指定了名称和路径参数。否则，它们将无法发布到 ga.logPage 函数。有关路由的更多信息，请参阅 路由。

  ¥Make sure all your routes have a name and path parameter specified. Otherwise, they cannot be posted to the ga.logPage function. Please refer to Routing for more info on routing.

• 具备 Google Analytics 的基础知识

  ¥Have Basic knowledge of Google Analytics

准备(Preparation)

¥Preparation

在我们开始将 Google Analytics 集成到你的应用中之前应用，你需要一个 Google Analytics（分析） 和 Google Tagmanager 的账户。让我们先这样做。拥有这些账户后，就可以配置标签管理器了。请按照本 Multiminds 文章 中的步骤操作。

¥Before we can start implementing Google Analytics into your application, you’ll need an account for Google Analytics and Google Tagmanager. So let’s do that first. When you have these accounts, it’s time to configure Tag manager. Follow the steps in this Multiminds article to do so.

在应用中实现(Implementing this into application)

¥Implementing this into application

在本指南中，我们假设你有一个固定的 sessionId 并发送给 Google Analytics（分析）。Google Analytics（分析）使用 sessionId 来区分不同的用户。如果你想创建匿名 sessionId，请参阅 用户 ID 分析文档。

¥For this guide, we’ll assume you have a fixed sessionId that you send to Google Analytics. Google Analytics uses a sessionId to distinguish different users from each other. If you want to create an anonymous sessionId, see Analytics Documentation on user id.

将标签管理器代码片段放入 index.html 文件的头部（如果你已遵循 Multiminds 文章 的操作，则你已经拥有此代码片段。）在你的代码库中创建一个名为 analytics.js 的新文件，其中包含以下内容：

¥Place the Tag Manager snippet into head of your index.html file (if you’ve followed the Multiminds article, you already have this.) Create a new file in your codebase called analytics.js with the following contents:

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（分析），我们创建了一个应用启动文件：

¥To make sure all the pages in your application are automatically posted to Google Analytics, we create an app boot file:

$ quasar new boot google-analytics [--format ts]

然后我们编辑新创建的文件：/src/boot/google-analytics.js：

¥Then we edit the newly created file: /src/boot/google-analytics.js:

import { defineRouter } from '#q-app/wrappers'
import ga from 'analytics.js'

export default defineRouter(({ router }) => {
  router.afterEach((to, from) => {
    ga.logPage(to.path, to.name, sessionId)
  })
})

最后，我们将应用启动文件注册到 /quasar.config 文件中。如果需要，我们只能对 Cordova 封装的应用执行此操作：

¥Finally we register the app boot file in the /quasar.config file. We can do so only for Cordova wrapped apps if we want:

boot: [
  ctx.mode.cordova ? 'google-analytics' : ''
]

更多有关事件的信息可以在 事件分析文档 中找到。

¥More information about events can be found in the Analytics documentation on events.

运行应用时，你将看到事件和页面浏览量。在实时视图中注册一个页面浏览量通常需要大约 5 到 10 秒。

¥You’ll see the events and pageviews coming in when you run your app. It usually takes around 5 to 10 seconds for a pageview to be registered in the realtime view.