AutoRoute package support

In order to support automatic screen tracking when using the AutoRoute package ↗, we provide the CSQNavigatorAutoRouteObserver. This observer extends the standard CSQNavigatorObserver to add compatibility with AutoRoute’s navigation system, including support for tab navigation.

Add csq_navigator_auto_route_observer as a dev dependency.

flutter pub add -d csq_navigator_auto_route_observer

dev_dependencies:
  csq_navigator_auto_route_observer: ^1.0.0

Once the package has been added, you’ll need to add the CSQNavigatorAutoRouteObserver to the root navigator in your app.

import 'package:csq_navigator_auto_route_observer/csq_navigator_auto_route_observer.dart';

return MaterialApp.router(
  routerConfig: _appRouter.config(
    navigatorObservers: () => [
      CSQNavigatorAutoRouteObserver(),
    ],
  ),
);

The CSQNavigatorAutoRouteObserver can be configured with the following arguments:

• ExcludeRouteFromTracking
• ScreenNameProvider
• CustomVarsProvider

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

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

import 'package:contentsquare/csq.dart';

CSQNavigatorAutoRouteObserver(
  excludeRouteFromTracking: (route) {
    // Exclude a specific route name
    if (route.settings.name == '/myRoute') return true;

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

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

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

    return false;
  },
)

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';

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

An optional callback function used to provide a list of custom variables for a specific route. The function takes a Route as input and returns a List<CustomVar>.

Use this function to attach custom variables to specific routes for tracking purposes.

import 'package:contentsquare/csq.dart';

CSQNavigatorAutoRouteObserver(
customVarsProvider: _customVarsForRouteProvider,
)

List<CustomVar>? _customVarsForRouteProvider(Route<dynamic> route) {
final routeName = route.settings.name;
final productPageRegex = RegExp(r'/product/(\d)+');

if (routeName == null) {
  return [];
}

// Check for product detail routes
if (productPageRegex.hasMatch(routeName)) {
  final productId = productPageRegex.firstMatch(routeName)?.group(1);
  if (productId != null) {
    return [
      CustomVar(index: 1, name: 'productId', value: productId),
    ];
  }
}

// Check for a specific screen
if (routeName == '/profile') {
  return [
    CustomVar(index: 2, name: 'screenType', value: 'profileScreen'),
  ];
}
return null;
}

This package requires:

• AutoRoute: Version 9.0.0 or higher
• CSQ SDK: Compatible with the latest CSQ SDK for Flutter

Make sure your project meets these version requirements before integrating the csq_navigator_auto_route_observer package.

• Initial release