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 campaignsA series of actions that you perform for each person who matches criteria. Campaigns typically send people a series of messages, but you can also use campaigns to send webhooks, update attributes, etc. 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
We’ve provided some example code below using React Navigation for automatic screen tracking. This example requires @react-navigation/native and @react-navigation/native-stack to create a navigation container in App.js
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.
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { useRef } from 'react';
const Stack = createNativeStackNavigator();
export default function App() {
const navigationRef = useNavigationContainerRef();
const routeNameRef = useRef();
return (
<NavigationContainer
ref={navigationRef}
onReady={() => {
routeNameRef.current = navigationRef.getCurrentRoute().name;
}}
onStateChange={async () => {
const previousRouteName = routeNameRef.current;
const currentRouteName = navigationRef.getCurrentRoute().name;
if (previousRouteName !== currentRouteName) {
CustomerIO.screen(currentRouteName)
}
routeNameRef.current = currentRouteName;
}}
>
<Stack.Navigator initialRouteName="FirstScreen">
<Stack.Screen name="FirstScreen"
component={FirstScreen}/>
<Stack.Screen name="SecondScreen" component={SecondScreen}
options={{
title : "My App",
headerStyle: {
backgroundColor: '#F6F7F9',
},
}}/>
</Stack.Navigator>
</NavigationContainer>
);
};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"})
