Track events

Events represent things people do in your app so that you can track your audience's activity and metrics. Use events to segment your audience, trigger automations, and capture usage metrics in your app.

This page is part of a setup flow for the SDK. Before you continue, make sure you've implemented previous features—i.e. you can't send events before you identify people!

Track a custom event

After you identify a profile, you can use the track method to send events representing their activities to Customer.io. When you send events, you can include event data—information about the profile or the event that they performed.

You can use events to trigger automations, add profiles to segments, etc. Your event-triggered automations might send someone a push notification or manipulate information associated with the profile in your workspace.

Events include the following:

• name: the name of the event. Most event-based searches in Customer.io hinge on the name, so make sure that you provide an event name that will make sense to other members of your team.
• A data object (Optional): Additional information that you might want to reference in messages or use to segment your audience, etc. You can reference data attributes in messages and other workflow actions using liquid in the format {{event.<attribute>}}.

CustomerIO.track("add-to-cart", {"product": "shoes", "price": "29.99"})

Screen view events

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 profile visited in your app.

Screen view events let you trigger automations or add profiles to segments 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 profiles 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 profile.

CustomerIO.screen("screen-name", {"property": "value"})