Customize autocaptured screen names

Automatic screen view tracking can be done using the CSQNavigatorObserver. This will observe the navigation stack of the application and log screen events accordingly.

This observer can be attached to any WidgetApp (like MaterialApp, CupertinoApp) or to a RouterConfig

import 'package:contentsquare/csq.dart';

MaterialApp(
  navigatorObservers: [
    CSQNavigatorObserver(),
  ],
);

import 'package:contentsquare/csq.dart';

Navigator(
  observers: [
    CSQNavigatorObserver(),
  ],
);

import 'package:contentsquare/csq.dart';

final _goRouter = GoRouter(
  observers: [
    CSQNavigatorObserver(),
  ],
  routes: [...],
);

MaterialApp.router(
  routerConfig: _goRouter,
);

The CSQNavigatorObserver can be configured with the following arguments:

An optional callback function that determines whether a specific route should be tracked. The function takes a Route as input and returns a bool.

Use this function to selectively exclude certain routes from automatic tracking by returning false for those routes.

import 'package:contentsquare/csq.dart';

CSQNavigatorObserver(
  shouldTrack: (route) {
    // Exclude a specific route name
    if (route.settings.name == '/myRoute') return false;

    // Exclude popup routes (menus, popups, dialogs)
    if (route is PopupRoute) return false;

    // Exclude dialog routes (AlertDialog, showDialog)
    // Many dialogs inherit from PopupRoute, but this is extra safety:
    if (route.runtimeType.toString().contains('DialogRoute')) return false;

    // Exclude full-screen dialogs
    if (route is PageRoute && route.fullscreenDialog == true) return false;

    return true;
  },
)

By default, all routes are tracked.

An optional callback function used to customize the screen name for a given route. The function takes a Route as input and returns a String representing the desired screen name.

Use this function to define custom screen names for specific routes.

import 'package:contentsquare/csq.dart';

CSQNavigatorObserver(
  screenNameProvider: (route) {
    final screenName = _formatScreenName(route.settings.name);
    return screenName;
  },
)