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

问题

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

回答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.

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)],
...
}

回答2:

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

回答3:

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

回答4:

Okay, I can confirm that this definitely works. It is not the nicest solution because it will break as soon as you mix want to get your app onto android or iOs. Anyhow for flutter web, this definitely works! We gotta wait until it is supported by the Firebase lib.

I have another question though: I realised that GA also tracks the title of the page, at this moment I have one default title set in the index.html. I tried updating the name with

SystemChrome.setApplicationSwitcherDescription(ApplicationSwitcherDescription(
label: 'New Title',
));

which did change the title in the browser, but it did not change the title name send to GA. Any insights?

来源：https://stackoverflow.com/questions/59409441/flutter-web-is-it-firebase-analytics-support-in-flutter-web-application

标签

Flutter

flutter-web