Menu
Can we implement Firebase Analytics in a Flutter Web application? If not, is there any other option?
344
Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. In this lab, you will create a Firebase Meetup application. The application will demonstrate how to use Firebase Web authentication in a Flutter application.
To use Firebase Analytics in a Flutter application, first you have to integrate the project with the Firebase account. In the Firebase Console, you probably need to define some new custom dimensions or metrics if you want to set custom user properties or log custom events.
Metadata. Flutter plugin for Google Analytics for Firebase, an app measurement solution that provides insight on app usage and user engagement on Android and iOS.
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", {});
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:
<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 'package:firebase/firebase.dart';
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);
}
}
}
import 'dart:js' as js;
...
Widget build(BuildContext context) {
return MaterialApp(
navigatorObservers: [AnalyticsRouteObserver(analytics: js.context.hasProperty('firebase')?analytics():null)],
...
}
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
