如何在Flutter Web应用中接入Google Analytics？

1. 依赖引入 #

在项目根目录的pubspec.yaml文件中添加如下依赖，执行flutter pub get完成安装：

dependencies:
  flutter:
    sdk: flutter
  googleapis: ^12.0.0 # 可替换为当前最新稳定版本
  googleapis_auth: ^1.4.1 # 用于身份鉴权
  http: ^1.1.0 # 网络请求适配

2. 权限与基础配置 #

• 首先在Google Cloud控制台创建服务账号，为该账号授予Google Analytics 4的对应操作权限，下载服务账号的JSON密钥文件。
• 记录你的GA4资源ID，以及Web端对应的Measurement ID。
• 将服务账号密钥文件放置在Flutter项目的web目录下，或直接将JSON内容集成到代码鉴权逻辑中。

3. 核心服务封装 #

你可以根据需求选择是用googleapis做数据查询，还是做事件上报：

数据查询场景示例代码 #

import 'package:googleapis/analyticsdata/v1beta.dart';
import 'package:googleapis_auth/auth_io.dart';
import 'package:http/http.dart' as http;

class GADataService {
  // 替换为你自己的GA4资源ID
  static const String _gaPropertyId = '123456789';
  static late AnalyticsDataApi _dataApi;

  static Future<void> init() async {
    // 填入你服务账号的JSON内容
    final serviceAccountCred = ServiceAccountCredentials.fromJson(r'''
    {
      "type": "service_account",
      "project_id": "你的项目ID",
      "private_key_id": "你的私钥ID",
      "private_key": "-----BEGIN PRIVATE KEY-----\n你的私钥内容\n-----END PRIVATE KEY-----\n",
      "client_email": "服务账号邮箱",
      "client_id": "客户端ID",
      "auth_uri": "https://accounts.google.com/o/oauth2/auth",
      "token_uri": "https://oauth2.googleapis.com/token",
      "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
      "client_x509_cert_url": "服务账号证书地址"
    }
    ''');

    // 初始化鉴权客户端
    final http.Client authClient = await clientViaServiceAccount(
      serviceAccountCred,
      [AnalyticsDataApi.analyticsReadonlyScope],
    );
    _dataApi = AnalyticsDataApi(authClient);
  }

  // 查询近7天的访问用户数示例
  static Future<int> get7DaysActiveUser() async {
    final reportRequest = RunReportRequest(
      entity: Entity(propertyId: _gaPropertyId),
      metrics: [Metric(name: 'activeUsers')],
      dateRanges: [DateRange(startDate: '7daysAgo', endDate: 'today')],
    );
    final response = await _dataApi.properties.runReport(
      reportRequest,
      name: 'properties/$_gaPropertyId',
    );
    return int.tryParse(response.metricValues?.first.value ?? '0') ?? 0;
  }
}

事件上报场景适配 #

由于Flutter Web运行在浏览器环境，事件上报优先用gtag桥接的方案，配置步骤如下：

• 在web/index.html的<head>标签中添加如下脚本，替换为你自己的Measurement ID：

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

• 在Dart代码中封装桥接调用方法：

import 'dart:js' as js;

void logGAEvent(String eventName, Map<String, dynamic> eventParams) {
  js.context.callMethod('gtag', ['event', eventName, eventParams]);
}

4. 接入验证 #

• 在项目入口的main.dart中调用初始化方法，启动项目后触发对应操作：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await GADataService.init();
  runApp(const MyApp());
}

• 事件上报后可以直接在GA4后台的实时报表中查看上报记录，数据查询接口可以通过打印返回值验证是否调用成功。
• 如出现请求报错，优先排查服务账号权限是否正确、资源ID是否匹配、网络环境是否可以正常访问Google服务。

内容的提问来源于stack exchange，提问作者Bruno Neuman