uniapp GoogleAnalytics

### 如何在 UniApp 中集成 Google Analytics

#### 配置环境准备
为了使 UniApp 应用能够利用 Google Analytics 的强大功能，开发者需先完成必要的准备工作。这包括创建一个项目于 Google 开发者控制台并获取相应的测量 ID (Measurement ID)，这是连接应用到 GA4（Google Analytics 4）所必需的凭证[^1]。

#### 安装依赖库
对于希望在其基于 Vue.js 构建的应用程序内实现此目的的人来说，在 HBuilderX 或其他 IDE 中打开命令行界面，并执行如下 npm 命令安装官方提供的 JavaScript SDK：

npm install @google-analytics/browser

#### 初始化配置文件
接着，在项目的 `main.js` 文件里引入该模块，并调用初始化函数传入之前获得的 Measurement ID:

import { initialize } from '@google-analytics/browser';

initialize('YOUR_MEASUREMENT_ID');

此处 `'YOUR_MEASUREMENT_ID'` 是指代从 Google Developers Console 获取的具体字符串形式的身份标识符。

#### 发送页面浏览事件
为了让每次页面加载都能被记录下来作为一次访问行为，可以在路由钩子中加入发送 page_view 类型的数据收集指令：

router.beforeEach((to, from, next) => {
  gtag('config', 'YOUR_MEASUREMENT_ID', {
    page_path: to.fullPath,
  });
  next();
});

这段代码确保每当用户导航至新的视图时都会触发向服务器汇报当前路径的信息，从而帮助构建完整的用户旅程地图。

#### 自定义事件跟踪
除了自动化的页面级交互外，还可以针对特定的操作设计自定义事件来捕捉更细致的行为模式。比如当某个按钮点击发生时，则可以通过下面的方式手动推送数据给分析平台：

methods: {
  trackEvent() {
    gtag('event', 'click', {
      event_category: 'Button',
      event_label: this.buttonText,
    });
  }
}

这种方法允许更加灵活地监控各种类型的用户体验细节，进而为优化产品提供依据。

#### 微信小程序适配方案
考虑到部分场景下开发人员可能会遇到需要兼容微信生态的需求，这里特别提及由社区贡献的一个开源项目——wxapp-google-analytics。该项目旨在让微信小程序也能享受到来自 Google Analytics 的服务优势，具体接入方式可参照其 GitHub 页面上的说明文档[^2]。