30

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 campaigns, 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 person, 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 person or the event that they performed.

You can use events to trigger campaigns, add people to segments, etc. Your event-triggered campaigns might send someone a push notification or manipulate information associated with the person 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 campaign actionsA block in a campaign workflow—like a message, delay, or attribute change. using liquidA syntax that supports variables, letting you personalize messages for your audience. For example, if you want to reference a person’s first name, you might use the variable {{customer.first_name}}. 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 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"})