30

Screen tracking

Screen views are events that record the pages that your audience visits in your app. They have a type property set to screen, and a title representing the title of the screen or page that a person visited in your app.

Screen view events let you trigger campaignsCampaigns are automated workflows you set up to send people messages and perform other actions when they meet your criteria. or add people to segmentsA group of people who match a series of conditions. People enter and exit the segment automatically when they match or stop matching conditions. based on the parts of your app your they use. Screen events also update your audience’s “Last Visited” attribute, which can help you track how recently people used your app.

Enable automatic screen tracking

We’ve provided some example code below using Route observer for automatic screen tracking.

If you want to send more data with screen events, or you don’t want to send events for every individual screen that people view in your app, you send screen events manually.

class MyRouteObserver extends RouteObserver<PageRoute<dynamic>> {
  void _sendScreenView(PageRoute<dynamic> route) {
    var screenName = route.settings.name;

    // track screen manually
    CustomerIO.screen(name: screenName ?? "N/A");
  }

  @override
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPush(route, previousRoute);
    if (route is PageRoute) {
      _sendScreenView(route);
    }
  }

  @override
  void didReplace({Route<dynamic>? newRoute, Route<dynamic>? oldRoute}) {
    super.didReplace(newRoute: newRoute, oldRoute: oldRoute);
    if (newRoute is PageRoute) {
      _sendScreenView(newRoute);
    }
  }

  @override
  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPop(route, previousRoute);
    if (previousRoute is PageRoute && route is PageRoute) {
      _sendScreenView(previousRoute);
    }
  }
}

// Usage
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      navigatorObservers: [MyRouteObserver()],
      home: Screen1(),
      routes: {
        'screen2': (context) => Screen2(),
        'screen3': (context) => Screen3(),
      },
    );
  }
}

Screenview settings for in-app messages

Customer.io uses screen events to determine where users are in your app so you can target them with in-app messages on specific screens. By default, the SDK sends screen events to Customer.io’s backend servers. But, if you don’t use screen events to track user activity, segment your audience, or to trigger campaigns, these events might constitute unnecessary traffic and event history.

If you don’t use screen events for anything other than in-app notifications, you can set the ScreenViewUse parameter to ScreenView.inApp. This setting stops the SDK from sending screen events back to Customer.io but still allows the SDK to use screen events for in-app messages, so you can target in-app messages to the right screen(s) without sending event traffic into Customer.io!

CustomerIO.initialize(
  config: CustomerIOConfig(
    cdpApiKey: "YOUR_CDP_API_KEY", // Required
    screenViewUse: ScreenView.inApp,
  ),
);

Send your own screen events

Screen events use the .screen method. Like other event types, you can add a properties object containing additional information about the screen or the user.

CustomerIO.instance.screen(title: "screen-name", properties: {"property": "value"});