Flutter Web : Is it Firebase Analytics support in Flutter web application?

后端未结

关注

 4  1098

走了就别回头了

Can we implement Firebase Analytics in a Flutter Web application? If not, is there any other option?

相关标签:

4条回答

不要未来只要你来

2021-01-04 20:31

Starting with firebase 7.0.0 ( https://pub.dev/packages/firebase/versions/7.0.0 ), you can use analytics in your Flutter web application.

Here are the steps:

Initialize Firebase in your host page

<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

import 'package:firebase/firebase.dart';

At this point you can access the Analytics object via 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)],
...
}

0 讨论(0)

青春惊慌失措

2021-01-04 20:36

I've used this package - https://pub.dev/packages/firebase_analytics

One important thing - edit index.html, like in this example in file web/index.html

Few scripts have to be added to <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>

0 讨论(0)

长情又很酷

2021-01-04 20:46

No. You can't. I've been searching for 1 month now and there is no way you could do it as of now.

0 讨论(0)
发布评论:

提交评论
- 加载中...

别那么骄傲

2021-01-04 20:49

First import Firebase

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

Update 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", {});

0 讨论(0)