Flutter Web：Flutter Web 应用程序是否支持 Firebase Analytics？

Question

Can we implement Firebase Analytics in a Flutter Web application?我们可以在 Flutter Web 应用程序中实现 Firebase Analytics 吗？ If not, is there any other option?如果没有，还有其他选择吗？

Answer 1

Starting with firebase 7.0.0 ( https://pub.dev/packages/firebase/versions/7.0.0 ), you can use analytics in your Flutter web application.从 firebase 7.0.0 ( https://pub.dev/packages/firebase/versions/7.0.0 ) 开始，您可以在 Flutter Web 应用程序中使用分析。

Here are the steps:以下是步骤：

Initialize Firebase in your host page在您的主机页面中初始化 Firebase

<body>
  <!-- Initialize Firebase -->
  <script src="/__/firebase/7.6.1/firebase-app.js"></script>
  <script src="/__/firebase/7.6.1/firebase-analytics.js"></script>
  <script src="/__/firebase/init.js"></script>

  <!-- Initialize app -->
  <script src="main.dart.js" type="application/javascript"></script>
</body>

Import the firebase package导入 firebase 包

import 'package:firebase/firebase.dart';

At this point you can access the Analytics object via analytics().此时，您可以通过 analytics() 访问 Analytics 对象。 If you'd like to send page views automatically you can introduce a route observer如果你想自动发送页面视图，你可以引入一个路由观察者

class AnalyticsRouteObserver extends RouteObserver<PageRoute<dynamic>> {

  final Analytics analytics;

  AnalyticsRouteObserver({@required this.analytics});

  void _sendPageView(PageRoute<dynamic> route) {
    var pageName = route.settings.name;
    if (null != analytics) {
      analytics.setCurrentScreen(pageName);
    } else {
      print('pageName: $pageName');
    }
  }

  @override
  void didPush(Route<dynamic> route, Route<dynamic> previousRoute) {
    super.didPush(route, previousRoute);
    if (route is PageRoute) {
      _sendPageView(route);
    }
  }

  @override
  void didReplace({Route<dynamic> newRoute, Route<dynamic> oldRoute}) {
    super.didReplace(newRoute: newRoute, oldRoute: oldRoute);
    if (newRoute is PageRoute) {
      _sendPageView(newRoute);
    }
  }

  @override
  void didPop(Route<dynamic> route, Route<dynamic> previousRoute) {
    super.didPop(route, previousRoute);
    if (previousRoute is PageRoute && route is PageRoute) {
      _sendPageView(previousRoute);
    }
  }
}

Finally register the route observer in your app最后在你的应用中注册路由观察者

import 'dart:js' as js;
...
Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [AnalyticsRouteObserver(analytics: js.context.hasProperty('firebase')?analytics():null)],
...
}

Answer 2

First import Firebase首先导入 Firebase

import 'package:firebase/firebase.dart' as Firebase;

Update index.html更新 index.html

<body>
  <script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-analytics.js"></script>

  <script>
    var firebaseConfig = {
      apiKey: "AIzaxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      authDomain: "xxxxxxxxx.firebaseapp.com",
      databaseURL: "https://xxxxxxxx.firebaseio.com",
      projectId: "xxxxxx",
      storageBucket: "xxxxxxx.appspot.com",
      messagingSenderId: "xxxxxxxxxxxxx",
      appId: "x:xxxxxxxxxxxx:web:xxxxxxxxxxxxxxxx",
      measurementId: "G-xxxxxxxxx"
    };
    firebase.initializeApp(firebaseConfig);
  </script>

  <script src="main.dart.js" type="application/javascript"></script>
</body>

And log events并记录事件

final analytics = Firebase.analytics();
analytics.logEvent("event_name", {});

Answer 3

I've used this package - https://pub.dev/packages/firebase_analytics我用过这个包 - https://pub.dev/packages/firebase_analytics

One important thing - edit index.html , like in this example in file web/index.html一件重要的事情 - 编辑index.html ，就像这个例子中的文件web/index.html

Few scripts have to be added to <head>很少有脚本必须添加到<head>

 <!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-app.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries --> <script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-analytics.js"></script> <script> // Your web app's Firebase configuration var firebaseConfig = { apiKey: "AIzaSyAgUhHU8wSJgO5MVNy95tMT07NEjzMOfz0", authDomain: "react-native-firebase-testing.firebaseapp.com", databaseURL: "https://react-native-firebase-testing.firebaseio.com", projectId: "react-native-firebase-testing", storageBucket: "react-native-firebase-testing.appspot.com", messagingSenderId: "448618578101", appId: "1:448618578101:web:772d484dc9eb15e9ac3efc", measurementId: "G-0N1G9FLDZE" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); firebase.analytics(); </script>

Answer 4

No. You can't.不，你不能。 I've been searching for 1 month now and there is no way you could do it as of now.我一直在寻找 1 个月了，到目前为止，您无法做到。

Flutter Web：Flutter Web 应用程序是否支持 Firebase Analytics？

问题描述

4 个解决方案

解决方案1
16 2020-01-14 18:08:06

解决方案2
12 2020-02-27 07:04:37

解决方案3
2 2020-12-22 14:07:57

解决方案4
-3 2020-01-03 10:14:47

Flutter Web：Flutter Web 应用程序是否支持 Firebase Analytics？

问题描述

4 个解决方案

解决方案1 16 2020-01-14 18:08:06

解决方案2 12 2020-02-27 07:04:37

解决方案3 2 2020-12-22 14:07:57

解决方案4 -3 2020-01-03 10:14:47

解决方案1
16 2020-01-14 18:08:06

解决方案2
12 2020-02-27 07:04:37

解决方案3
2 2020-12-22 14:07:57

解决方案4
-3 2020-01-03 10:14:47