go_router & firebase analytics - how to get screen names

[anilcngz]

Hi,

I've added firebase analytics to my app but I am just only seeing 'FlutterViewController' as the page name. I tried to add an observer to GoRouter as below but route.settings.name returns null. Is there a way to see path or screen names in google analytics?

class CustomRouter {
  static GoRouter generate() {
    return GoRouter(
      debugLogDiagnostics: true,
      routes: [
        GoRoute(
          name: 'login',
          path: '/login',
          builder: (context, state) {
            final langCode = Localizations.localeOf(context).languageCode;
            return BlocProvider<ForgotPasswordCubit>(
              create: (context) => ForgotPasswordCubit(
                userRepository: context.read<UserRepository>(),
                authRepository: context.read<AuthRepository>(),
                langCode: langCode,
              ),
              child: const ForgotPasswordScreen(),
            );
          },
        ),
      ],
      observers: [GoRouterObserver(analytics: FirebaseAnalytics.instance)],
    );
  }
}

class GoRouterObserver extends NavigatorObserver {
  GoRouterObserver({required this.analytics});
  final FirebaseAnalytics analytics;

  @override
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
    analytics.setCurrentScreen(screenName: route.settings.name);
    print('SCREEN: ${route.settings.name}'); //NULL??
  }
}

[maheshj01]

@anilcngz see csells/go_router#46

[deandreamatias-worldline]

I implemented this and works (go_router 12.0.0)

main_navigator.dart

final GlobalKey<NavigatorState> rootNavigatorKey =
    GlobalKey<NavigatorState>(debugLabel: 'root');

class MainNavigator {
  final GoRouter router = GoRouter(
    navigatorKey: rootNavigatorKey,
    initialLocation: Routes.splash,
    observers: [AnalyticsRouteObserver()],
    routes: <RouteBase>[
      GoRoute(
        path: Routes.splash,
        name: Routes.splash.screenName,
        builder: (BuildContext context, GoRouterState state) =>
            const SplashScreen(),
      ),
      GoRoute(
        path: Routes.home,
        name: Routes.home.screenName,
        builder: (BuildContext context, GoRouterState state) =>
            const HomeScreen(),
      ),
    ],
  );

routes.dart

class Routes {
  static const String splash = '/';
  static const String home = '/home';
  static const String unknown = '/';
}

extension AnalyticsRouteExtensions on String {
  /// Screen name used for analytics
  String get screenName {
    switch (this) {
      case Routes.splash:
        return "Splash";
      case Routes.home:
        return "Home";
      default:
        return "Unknown";
    }
  }
}

analytics_route_observer.dart

class AnalyticsRouteObserver extends NavigatorObserver {
  @override
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) async {
    // TODO: Improve to remove direct dependency on injectable
    // MonitorPlatformRepository dependency
    final MonitorPlatformRepository monitorPlatformRepository =
        getIt.get<MonitorPlatformRepository>();
    await monitorPlatformRepository.logAnalyticsCurrentScreen(
      screenName: route.settings.name ?? Routes.unknown.screenName,
    );
  }
}

[ajith-ab]

this works for me

class AppRouter {
  static FirebaseAnalytics analytics = FirebaseAnalytics.instance;
  static FirebaseAnalyticsObserver observer =
      FirebaseAnalyticsObserver(analytics: analytics);
  static final GoRouter goRouter = GoRouter(
        observers: [observer],
        initialLocation: AppLocations.splash,
        routes: AppRoutes.getPublicRoutes()
            .map((e) => GoRoute(
                  path: e.path,
                  name: e.name,
                  builder: (context, state) {
                    if (e.builder != null) {
                      return e.builder!(context, state);
                    }
                    return e.screen ?? const SizedBox();
                  },
                ))
            .toList(),
      ); 
  static GoRouter get _router => goRouter;
}