UniAPP如何使用Google Analytics（谷歌统计）？

UniAPP 集成 Google Analytics (谷歌统计) 详细指南

想要了解用户在你的 UniAPP 应用中的行为？Google Analytics (谷歌统计) 是一个强大且免费的工具，可以帮助你做到这一点。本文将带你一步步地将 Google Analytics 集成到你的 UniAPP 项目中，让你能够追踪页面浏览、事件、用户来源等关键信息。

第一步：创建 Google Analytics 媒体资源 (Property)

如果你还没有 Google Analytics 账户，请先前往 [Google Analytics 官网](https://analytics.google.com/) 注册并创建一个账户。

1. 登录 Google Analytics：使用你的 Google 账号登录。
2. 创建媒体资源：
在左下角点击 “管理员” (齿轮图标)。
在 “媒体资源” 列下，点击 “+ 创建媒体资源”。
媒体资源名称：输入你的 UniAPP 应用名称，例如“我的 UniAPP 应用”。
报告时区：选择你应用的主要用户所在的时区。
货币：选择你的主要货币。
点击 “显示高级选项”（如果需要）。
重要： UniAPP 是一个跨平台框架，通常不直接对应“网站”或“应用”的单一平台。在这一步，你可以暂时选择 “创建通用媒体资源 (UA)”。虽然 Google 正在逐步转向 GA4，但对于 UniAPP 这种混合应用场景，UA 的集成方式相对更直接。如果你是新项目，并且希望更面向未来，可以考虑 GA4，但集成方式会略有不同，本文主要以 UA 为例进行讲解，后面会提及 GA4 的简要集成思路。
对于 UA： 你可能会看到一个选项让你输入“网站 URL”和“网站名称”。这里你可以填写你的应用名称，URL 可以填写一个占位符，例如 `http://yourappname.com`，因为我们主要是获取 衡量 ID (Tracking ID)。
对于 GA4（如果选择）： GA4 会让你选择数据流，通常是选择“Web”。同样，你需要填写网站名称和网址，然后创建数据流。GA4 的衡量 ID 会以 `GXXXXXXXXXX` 的形式出现。
3. 获取衡量 ID (Tracking ID)：
对于 UA： 创建完成后，在 “媒体资源设置” 中，你会看到一个 “衡量 ID”，格式通常是 `UAXXXXXXXXXY`。请务必复制并妥善保存这个 ID。
对于 GA4： 在数据流设置中，你会找到 “衡量 ID”，格式是 `GXXXXXXXXXX`。

第二步：在 UniAPP 项目中引入 Google Analytics

UniAPP 项目通常使用 JavaScript 来实现功能。我们将通过在项目中引入一个 Google Analytics 的 JavaScript 库来实现追踪。

方法一：使用 `vueanalytics` (推荐，方便易用)

`vueanalytics` 是一个非常流行的 Vue.js 插件，它提供了简洁的 API 来与 Google Analytics 交互，非常适合 UniAPP 项目。

1. 安装 `vueanalytics`：
在你的 UniAPP 项目的根目录下打开终端，运行以下命令：

```bash
npm install vueanalytics save
或者
yarn add vueanalytics
```

2. 在 `main.js` (或 `app.js`) 中配置：
打开你的项目入口文件，通常是 `main.js` (或 `src/main.js`，取决于你的项目结构)。
在 Vue 实例创建之前，引入并配置 `vueanalytics`。

```javascript
// main.js (或 src/main.js)

import Vue from 'vue'
import App from './App'
import VueAnalytics from 'vueanalytics' // 引入插件

// 引入 unirequest (如果需要使用 unirequest 发送请求，例如自定义事件)
// import Request from './request.js' // 假设你的request.js路径

// 谷歌统计的衡量 ID (UAXXXXXXXXXY)
const GA_TRACKING_ID = 'UAXXXXXXXXXY'; // 请替换成你自己的衡量 ID

// 配置 Vue Analytics
Vue.use(VueAnalytics, {
id: GA_TRACKING_ID,
// 可以选择是否启用调试模式
debug: process.env.NODE_ENV !== 'production', // 生产环境不启用，开发环境启用
// 跟踪页面浏览
router: false, // UniAPP 的路由管理方式与 VueRouter 不同，这里设置为 false
autoTracking: {
page: process.env.NODE_ENV !== 'production', // 开发环境自动跟踪页面浏览
// 可以在这里配置其他自动跟踪，例如按钮点击等，但 UniAPP 中需要特殊处理
},
// 可以配置自定义事件
customDirective: true, // 启用自定义指令，方便在模板中触发事件
});

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
...App
})
app.$mount()
```

3. 如何追踪页面浏览：
在 UniAPP 中，我们通常不直接使用 `vuerouter`。页面切换是由 UniAPP 自带的路由机制管理的。`vueanalytics` 的 `autoTracking.page` 选项在开发环境下会尝试自动追踪，但对于 UniAPP 的生命周期，更可靠的方式是手动调用页面视图追踪。

你可以在每个页面的 `onShow()` 生命周期钩子中调用 `this.$ga.page()` 方法。

示例：在 `pages/index/index.vue` 中

```vue





```

注意：
`this.$ga.page()` 方法的参数应该是页面的路径。UniAPP 的页面路径通常是 `pages/yourpagepath/yourpagefile`。
你可以在 `onLoad` 或 `onShow` 中调用，`onShow` 更频繁，可以捕捉到用户多次回到某个页面的情况。

4. 如何追踪自定义事件：
自定义事件是追踪用户在应用中的具体操作，例如按钮点击、表单提交、视频播放等。

使用 `vueanalytics` 的 `this.$ga.event()` 方法。

```javascript
// 在你的 Vue 组件的方法中
methods: {
handleButtonClick() {
this.$ga.event('button', 'click', 'submit_button', 1); // category, action, label, value
// ... 执行你的业务逻辑
},
// 示例：追踪分享操作
handleShare() {
this.$ga.event('share', 'click', 'article_share_button');
}
}
```

`category` (类别): 事件的类别，例如“button”、“navigation”、“video”。
`action` (行为): 用户执行的操作，例如“click”、“swipe”、“play”。
`label` (标签): 对事件的补充说明，例如按钮的文本、页面的标题。
`value` (数值): 一个数字值，表示事件发生的数量或重要性，可以是 0。

使用自定义指令追踪事件：
如果你在 `main.js` 中设置了 `customDirective: true`，可以直接在模板中使用 `vanalyticsevent` 指令。

```vue

```
这种方式更加简洁，但需要注意 UniAPP 中 `vanalyticsevent` 指令与 UniAPP 本身的事件绑定 (`@click`) 的结合使用。

方法二：手动发送请求 (不推荐，但了解原理)

如果你不想引入第三方插件，也可以直接使用 Google Analytics 的 Measurement Protocol 来发送数据。这需要你直接构建 HTTP 请求。

1. 获取 Google Analytics 的 Endpoint：
Universal Analytics (UA): `https://www.googleanalytics.com/collect`
Google Analytics 4 (GA4): `https://www.googleanalytics.com/mp/collect`

2. 构建请求参数：
你需要构建一个符合 Google Analytics 要求的 POST 或 GET 请求。关键参数包括：
`v`: Protocol version (通常是 '1' for UA, '2' for GA4).
`tid`: Tracking ID (UAXXXXXXXXXY).
`cid`: Client ID (一个设备的唯一标识符). 你需要在应用本地生成并存储一个。
`t`: Hit type (e.g., 'pageview', 'event', 'screenview').
`dp`: Document path (页面路径, for pageview/screenview).
`ec`: Event Category (for event).
`ea`: Event Action (for event).
`el`: Event Label (for event).
`ev`: Event Value (for event).

生成 Client ID：
你需要一种方法来在用户设备上生成一个唯一的 Client ID，并在后续请求中复用。可以使用 `uni.getStorageSync` 来存储。

```javascript
// 示例：生成 Client ID
function getClientId() {
let clientId = uni.getStorageSync('ga_client_id');
if (!clientId) {
// 生成一个简单的 UUID
clientId = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
uni.setStorageSync('ga_client_id', clientId);
}
return clientId;
}
```

3. 发送请求：
可以使用 `uni.request` 来发送请求。

```javascript
// 示例：发送页面视图追踪 (UA)
function trackPageView(path) {
const GA_TRACKING_ID = 'UAXXXXXXXXXY'; // 替换为你的 UA ID
const clientId = getClientId();

uni.request({
url: 'https://www.googleanalytics.com/collect',
method: 'POST',
data: {
v: '1',
tid: GA_TRACKING_ID,
cid: clientId,
t: 'pageview',
dp: path, // 例如 '/pages/index/index'
// 更多参数可以根据需要添加
},
success: (res) => {
console.log('GA Pageview tracked:', res);
},
fail: (err) => {
console.error('GA Pageview tracking failed:', err);
}
});
}

// 示例：发送自定义事件 (UA)
function trackEvent(category, action, label, value) {
const GA_TRACKING_ID = 'UAXXXXXXXXXY'; // 替换为你的 UA ID
const clientId = getClientId();

uni.request({
url: 'https://www.googleanalytics.com/collect',
method: 'POST',
data: {
v: '1',
tid: GA_TRACKING_ID,
cid: clientId,
t: 'event',
ec: category,
ea: action,
el: label,
ev: value,
},
success: (res) => {
console.log('GA Event tracked:', res);
},
fail: (err) => {
console.error('GA Event tracking failed:', err);
}
});
}
```

将这些函数集成到你的页面生命周期和方法中即可。

方法三：集成 Google Analytics 4 (GA4)

GA4 的集成方式有所不同，它主要通过 `gtag.js` 或者 Google Tag Manager (GTM) 来实现。对于 UniAPP，直接集成 `gtag.js` 会比 UA 稍微复杂一些，但也是可行的。

1. 在 `main.js` 中引入 `gtag.js`：
你需要在应用的全局引入 `gtag.js` 的脚本。

```javascript
// main.js

// ... 其他导入
import Vue from 'vue'
import App from './App'

// GA4 衡量 ID (GXXXXXXXXXX)
const GA4_MEASUREMENT_ID = 'GXXXXXXXXXX'; // 请替换成你自己的 GA4 衡量 ID

// 引入 gtag.js 脚本
function loadGA() {
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
window.gtag = gtag;

gtag('js', new Date());
gtag('config', GA4_MEASUREMENT_ID, {
// 可以配置一些默认参数，例如屏幕名称
// 'screen_name': 'initial_screen'
});
}

// 在 Vue 实例创建前调用
Vue.prototype.$loadGA = loadGA; // 将加载函数挂载到 Vue 实例上，方便调用

Vue.config.productionTip = false;
App.mpType = 'app';

const app = new Vue({
...App
});

// 在 app 挂载后调用加载函数
app.$mount();
app.$loadGA(); // 调用加载 GA
```

2. 如何追踪页面浏览 (GA4)：
GA4 推荐使用 `page_view` 事件来追踪页面。

```javascript
// pages/index/index.vue

export default {
// ...
onShow() {
if (window.gtag) {
window.gtag('event', 'page_view', {
page_location: window.location.href, // UniAPP 中没有 window.location，需要手动构建
page_path: '/pages/index/index',
page_title: '首页' // 可以自定义页面标题
});
}
}
// ...
}
```
注意： UniAPP 的运行环境与浏览器环境不同，`window.location.href` 可能无法直接使用。你需要根据 UniAPP 的页面路由信息来构建 `page_location` 和 `page_path`。`page_path` 通常是你页面的相对路径。

3. 如何追踪自定义事件 (GA4)：
使用 `gtag('event', ...)` 方法。

```javascript
methods: {
handleButtonClick() {
if (window.gtag) {
window.gtag('event', 'click', {
event_category: 'button',
event_label: 'submit_button',
value: 1
});
}
}
}
```

GA4 的集成方式更倾向于使用更通用的事件模型，并且需要你更关注如何正确地传递 `page_path` 和其他事件参数。

第三步：在 Google Analytics 中查看数据

1. 登录 Google Analytics：使用你创建的账户登录。
2. 选择正确的媒体资源：确保你选择了你 UniAPP 应用对应的媒体资源。
3. 实时报告：在 “实时” (Realtime) 报告中，你可以看到当前有多少用户在线，他们在做什么，包括页面浏览和事件。当你测试时，这是一个非常有用的功能。
4. 其他报告：
“用户” (Audience)：查看用户的人口统计信息、地理位置、设备等。
“用户获取” (Acquisition)：了解用户是如何找到你的应用的（例如，来自哪个应用市场、哪个推广活动）。
“行为” (Behavior)：查看页面浏览量、用户在应用中的停留时间、热门页面等。
“转化” (Conversions)：如果你设置了目标（例如，注册、购买），可以在这里查看转化情况。

重要的考虑事项和最佳实践

隐私合规：在收集用户数据之前，务必了解并遵守你目标用户所在地区的数据隐私法规（如 GDPR、CCPA）。在你的应用中提供清晰的隐私政策，并询问用户是否同意数据收集。
Client ID 的管理：对于手动发送请求的方式，正确管理 `cid` 至关重要，确保同一个用户在同一个设备上的行为能够被关联起来。
环境区分：在开发阶段，你可能希望开启调试模式，但在生产环境中，应关闭它以减少不必要的日志输出。
UniAPP 生命周期：UniAPP 的生命周期（`onLaunch`, `onShow`, `onHide`, `onLoad`, `onShow` 等）与 Web 应用的生命周期有所不同。选择在合适的生命周期钩子中调用追踪函数。`onShow` 通常是追踪页面可见性的最佳选择。
自定义参数：Google Analytics 提供了自定义维度和自定义指标的功能，允许你发送更丰富的数据。例如，你可以追踪用户的登录状态、应用版本号等。
测试：在发布应用之前，务必在不同的设备和平台上进行充分的测试，确保数据能够被正确地发送和记录。使用 Google Tag Assistant (Chrome 扩展) 或 Network tab 来检查请求是否发送成功。
GA4 的未来：虽然本文主要以 UA 为例，但 Google Analytics 正在全面转向 GA4。对于新项目，建议直接研究 GA4 的集成方式，它提供了更灵活的数据模型和更强大的分析能力。GA4 的核心在于事件驱动模型。

总结

集成 Google Analytics 是提升 UniAPP 应用用户体验和优化推广策略的重要一步。通过本文的详细介绍，你应该能够成功地将 Google Analytics 添加到你的 UniAPP 项目中，并开始收集宝贵的用户数据。记住，持续地分析数据并根据洞察调整你的应用是关键。

祝你成功！

首先在npm内引入，也可以在dcloud插件市场里面下载，

       npm install @ouduidui/ga-tracker     

然后再在main.js或者app.js内引入这些（请根据自身情况修改）

       import {GoogleAnalytics , HitBuilders} from "@ouduidui/ga-tracker";//Google 统计  Vue.prototype.ga = function(){  const analytic = this.$gaTracker.getInstance()  var pages = getCurrentPages() // 获取栈实例  let currentPage = pages[pages.length - 1]['$page']['fullPath'] //当前页面路径(带参数)  analytic.setScreenName("/pwa#" + currentPage);  analytic.send(new HitBuilders.ScreenViewBuilder().build()); //上报 }//google统计  const gaTracker = {     instance: null,     getInstance() {         if (!this.instance) {    // 初始化GoogleAnalytics Tracker    // #ifdef APP-PLUS     this.instance = GoogleAnalytics.getInstance()                  .setAppName('uni-app')   // 设置名称                 .setAppVersion(plus.runtime.version)   // 设置版本号                 .newTracker('UA-XXXXXXX-1');  // 设置跟踪ID    // #endif    // #ifdef H5             this.instance = GoogleAnalytics.getInstance()                  .setAppName('uni-app')   // 设置名称                 .setAppVersion('PWA')   // 设置版本号                 .newTracker('UA-XXXXXXXX-1');  // 设置跟踪ID    // #endif         }         return this.instance;     } } Vue.prototype.$gaTracker = gaTracker;     

最后，在你需要统计的页面中的onload函数写入如下代码

       this.ga()     

如果你是开发小程序的话，我们需要将上报域名设置为白名单。但是www.google-analytics.com域名没有国内备案，无法添加到微信小程序的request合法域名中。

因此你需要自己有一个已备案域名，然后用起或者二级域名去重定向到www.google-analytics.com。

具体在初始化GA中的那一坨中加入如下内容

       // #ifdef MP-WEIXIN // 使用自己的合法域名做跟踪数据转发 this.instance.setTrackerServer("https://ga-proxy.example.com"); // #endif     

顺带一提，老版GA已经不能直接创建移动应用类型的媒体资源了，他会提示你链接Firebase，你可以先创建一个网页类型的媒体资源，然后再创建移动应用类型的媒体资源子项，当然你也可以套用以前的媒体资源，具体怎么做取决于你，当然在进行网页+移动应用混合统计的时候，别忘了对移动应用媒体资源子项进行筛选器设置。

此文章允许规范转载，请把我的名字江程训署名上