15

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

tomrozb
  • 25,773
  • 31
  • 101
  • 122
Sanjayrajsinh
  • 15,014
  • 7
  • 73
  • 78
  • yes it is supported, here is a sample ```index.html``` from flutter web examples https://github.com/FirebaseExtended/flutterfire/blob/master/packages/firebase_auth/firebase_auth/example/web/index.html#L9-L23 – Mahesh Jamdade Jul 07 '21 at 02:55

4 Answers4

18

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:

  1. 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>
  1. Import the firebase package 
import 'package:firebase/firebase.dart';
  1. 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);
    }
  }
}
  1. 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)],
...
}
hblancot
  • 181
  • 5
14

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", {});
tomrozb
  • 25,773
  • 31
  • 101
  • 122
  • BTW can you help me (or provide an example please) using [setUserProperties](https://pub.dev/documentation/firebase/latest/firebase/Analytics/setUserProperties.html) I can not make it work – josue.0 Mar 26 '20 at 01:09
  • I just posted a question about it [here](https://stackoverflow.com/questions/60964143/how-to-set-user-properties-in-firebase-analytics-for-flutter-web) – josue.0 Apr 01 '20 at 05:22
2

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>
Andrii Turkovskyi
  • 27,554
  • 16
  • 95
  • 105
-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.

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Warmaxine
  • 1
  • 1