Flutter项目中FirebaseAnalyticsWeb插件的使用方法是什么？

开发者阿泽

2026-7-10

FirebaseAnalyticsWeb Flutter插件使用示例

官方目前还没出FirebaseAnalyticsWeb Flutter插件的使用文档，我折腾出了一个能正常运行的示例，比预想的简单，分享给大家，希望能帮到同行。

实现步骤

配置Web端Firebase脚本
在项目的web/index.html的body末尾添加Firebase初始化脚本和Analytics依赖：

<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-analytics.js"></script>
<script>
  // 替换成你的Firebase项目配置
  const firebaseConfig = {
    apiKey: "你的API_KEY",
    authDomain: "你的AUTH_DOMAIN",
    projectId: "你的PROJECT_ID",
    storageBucket: "你的STORAGE_BUCKET",
    messagingSenderId: "你的MESSAGING_SENDER_ID",
    appId: "你的APP_ID",
    measurementId: "你的MEASUREMENT_ID"
  };

  firebase.initializeApp(firebaseConfig);
  window.analytics = firebase.analytics();
</script>

Dart层封装调用
通过dart:js直接调用web端的Analytics方法，封装成工具类方便使用：

import 'dart:js' as js;

class WebAnalytics {
  // 记录自定义事件
  static void logEvent(String eventName, [Map<String, dynamic>? params]) {
    js.context['analytics'].callMethod('logEvent', [eventName, params]);
  }

  // 设置用户ID
  static void setUserId(String userId) {
    js.context['analytics'].callMethod('setUserId', [userId]);
  }

  // 设置用户属性
  static void setUserProperties(Map<String, dynamic> properties) {
    js.context['analytics'].callMethod('setUserProperties', [properties]);
  }
}

// 使用示例
void main() {
  // 记录页面访问事件
  WebAnalytics.logEvent('page_view', {'page': 'home_page'});
  // 设置当前用户ID
  WebAnalytics.setUserId('user_001');
}