在Firebase Analytics文档的Track Screenviews章节中有一个精确的用例。
如果您的应用程序没有为要跟踪的每个屏幕使用单独的UIViewController或Activity(例如在游戏中),则手动跟踪屏幕非常有用。
这正是Flutter所面临的情况,因为Flutter负责屏幕更新:大多数简单的Flutter应用程序运行一个单独的FlutterActivity
/FlutterAppDelegate
并自行处理不同屏幕的呈现,因此让Firebase Analytics自动跟踪屏幕将无法产生所需的效果。
据我过去的经验,FirebaseAnalyticsObserver
并没有太大帮助,但我建议您再次检查他们的文档,因为他们暗示事情应该“只需要工作”。我最好的猜测是对我来说它没起作用,因为我没有在任何路由上使用RouteSettings
*
。
如果FirebaseAnalyticsObserver
不能工作或不适用于您的应用程序,则在开发的过去几个月中,下一种方法对我而言效果非常好。
如果您使用屏幕名调用setCurrentScreen
方法,则可以在任何时候使用FirebaseAnalytics
设置当前屏幕:
import 'package:firebase_analytics/firebase_analytics.dart';
FirebaseAnalytics().setCurrentScreen(screenName: 'Example1');
作为第一次尝试,我在小部件构造函数中完成了这个操作,但这样做不太好,会误计事件:如果您弹出或推入路由,则堆栈中的所有小部件构造函数都将被调用,即使只有顶部路由真正符合“当前屏幕”的条件。
为解决此问题,我们需要使用
RouteAware
类,并仅在它是顶部路由的情况下设置当前屏幕:无论是将我们的路由添加到堆栈还是弹出先前的顶部路由并到达路由。
RouteAware
附带样板代码,我们不想为所有屏幕重复该样板。即使对于小型应用程序,您也有数十个不同的屏幕,因此我创建了
RouteAwareAnalytics
mixin:
import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:flutter/widgets.dart';
final routeObserver = RouteObserver<PageRoute>();
mixin RouteAwareAnalytics<T extends StatefulWidget> on State<T>
implements RouteAware {
AnalyticsRoute get route;
@override
void didChangeDependencies() {
routeObserver.subscribe(this, ModalRoute.of(context));
super.didChangeDependencies();
}
@override
void dispose() {
routeObserver.unsubscribe(this);
super.dispose();
}
@override
void didPop() {}
@override
void didPopNext() {
_setCurrentScreen(route);
}
@override
void didPush() {
_setCurrentScreen(route);
}
@override
void didPushNext() {}
Future<void> _setCurrentScreen(AnalyticsRoute analyticsRoute) {
print('Setting current screen to $analyticsRoute');
return FirebaseAnalytics().setCurrentScreen(
screenName: screenName(analyticsRoute),
screenClassOverride: screenClass(analyticsRoute),
);
}
}
我创建了一个
枚举
来跟踪屏幕(并创建了将枚举转换为屏幕名称的函数)。我使用枚举来轻松跟踪所有路由、重构路由名称。使用这些枚举和函数,我可以对所有可能的值进行单元测试,并强制实施一致的命名:没有意外的空格或特殊字符,没有不一致的大写字母。可能有其他更好的方法来确定屏幕类值,但我选择了这种方法。
enum AnalyticsRoute { example }
String screenClass(AnalyticsRoute route) {
switch (route) {
case AnalyticsRoute.example:
return 'ExampleRoute';
}
throw ArgumentError.notNull('route');
}
String screenName(AnalyticsRoute route) {
switch (route) {
case AnalyticsRoute.example:
return '/example';
}
throw ArgumentError.notNull('route');
}
在初始设置的下一步是将routeObserver
注册为您的MaterialApp
的navigatorObserver
:
MaterialApp(
// ...
navigatorObservers: [
routeObserver,
// FirebaseAnalyticsObserver(analytics: FirebaseAnalytics()),
],
);
最后,我们可以添加第一个被跟踪的示例路由。将with RouteAwareAnalytics
添加到您的状态并重写get route
。
class ExampleRoute extends StatefulWidget {
@override
_ExampleRouteState createState() => _ExampleRouteState();
}
class _ExampleRouteState extends State<ExampleRoute> with RouteAwareAnalytics{
@override
Widget build(BuildContext context) => Text('Example');
@override
AnalyticsRoute get route => AnalyticsRoute.example;
}
每次添加新路由时,您可以轻松完成:首先添加一个新的枚举值,然后Dart编译器会指导您接下来要添加什么:在各自的switch-case中添加屏幕名称和类重写值。然后,在构建路由的状态中找到
with RouteAwareAnalytics
,并添加
route
getter。
*
我没有使用
RouteSettings
的原因是,我更喜欢
Simon Lightfoot的方法,该方法使用类型化参数而不是设置提供的
Object
参数:
class ExampleRoute extends StatefulWidget {
const ExampleRoute._({@required this.integer, Key key}) : super(key: key);
final int integer;
static Route<void> route({@required int integer}) =>
MaterialPageRoute(
builder: (_) => ExampleRoute._(integer: integer),
);
}