Screen tracking
UpdatedScreen 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
anduseGlobalSearchParams
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"})