Screen tracking

Updated

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 name 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 audience uses. Screen view events also update your audience’s “Last Visited” attribute, which can help you track how recently people used your app.

Enable automatic screen tracking

The example below shows one way to implement automatic screen tracking using Expo Router. Use this as inspiration—every app can have its own navigation patterns and screen tracking requirements.

Not using Expo Router? If your Expo project renders its own NavigationContainer with React Navigation, checkout our React Native screen-tracking example for ideas you can adapt to your own implementation.

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.

Requirements and limitations

This approach requires:

  • Expo Router: This example only works with apps using Expo Router (not React Navigation or other navigation libraries). Learn more in the Expo Router documentation.
  • Expo SDK 49+: The usePathname and useGlobalSearchParams hooks require recent Expo versions. Check the Expo SDK upgrade guide for migration details.
  • File-based routing: Your app must use Expo Router’s file-based routing structure. See the file-based routing guide for setup instructions.

 This example works well with standard Expo Router setups. Since every app has unique navigation patterns and configurations, we recommend testing this implementation in your development environment first. You may need to adjust the code based on your specific Expo workflow (managed vs. bare) or custom routing needs. For navigation-specific questions or customizations, the Expo Router documentation and community forums are great resources.

With Expo Router, screen tracking is straightforward because it always has access to a URL. Create a higher-order component that observes the currently selected URL and tracks it in your analytics provider.

import { useEffect } from 'react';
import { usePathname, useGlobalSearchParams, Slot } from 'expo-router';
import { CustomerIO } from 'customerio-reactnative';

export default function Layout() {
  const pathname = usePathname();
  const params = useGlobalSearchParams();

  // Track the location in your analytics provider
  useEffect(() => {
    CustomerIO.screen(pathname, params);
  }, [pathname, params]);

  // Export all the children routes
  return <Slot />;
}

Place this code in your app/_layout.tsx file to track screen changes throughout your app. Test thoroughly in your development environment before deploying.

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!

import {
  CioLogLevel, CioRegion, CustomerIO, CioConfig
} from 'customerio-reactnative';

const App = () => {

useEffect(() => {
   const config: CioConfig = {
      cdpApiKey: 'CDP API Key', // Mandatory
      region: CioRegion.US,
      screenViewUse: ScreenView.All
      trackApplicationLifecycleEvents: true,
      inApp: {
         siteId: 'site_id',
      }
   };
   CustomerIO.initialize(config)
   }, [])
}

Send your own screen events

Screen events use the .screen method. Like other event types, you can add a data object containing additional information about the event or the currently-identified person.

CustomerIO.screen("screen-name", {"property": "value"})
Copied to clipboard!
  Contents
Version
Is this page helpful?