42

Capture Push Metrics

How it works

Customer.io supports device-side metrics that help you determine the efficacy of your push notifications: delivered when a push notification is received by the app and opened when a push notification is clicked.

By default, our SDK automatically tracks opened and delivered events for push notifications originating from Customer.io, but you can add (optional) custom handling to various push events. You might need a custom handler for push notifications that originate outside of Customer.io or if you want to do something outside our SDK’s scope.

Choose whether to show push while your app is in the foreground

If your app is in the foreground and the device receives a Customer.io push notification, your app gets to choose whether or not to display the push.

To configure this behavior, set the following option in your Expo config file:

{
   ...
   "plugins": [
      ...
      [
        "customerio-expo-plugin",
        {            
            "ios": {
                "showPushAppInForeground": true,
            }
         }
      ]
   ]
}

If the push did not come from Customer.io, you’ll need to perform custom handling to determine whether to display the push or not.

Custom handling when users click a push

You might need to perform custom handling when a user clicks a push notification—like you want to process custom fields in your push notification payload.

For now, the React Native SDK does not provide callbacks when your audience clicks a push notification. But you can use one of the many popular React Native push notification SDKs to receive a callback.

For example, the code below receives callbacks when users click a push using react-native-push-notification. Be sure to follow the documentation for the push notification SDK you choose to use to receive callbacks with.

import { Notifications } from 'react-native-notifications';

Notifications.events().registerNotificationOpened((notification: Notification, completion) => {
  // Process custom data attached to payload, if you need: 
  let pushPayload = notification.payload; 

  // Important: When you're done processing the push notification, you're required to call completion(). 
  // Even if you do not process a push, this is still a requirement. 
  completion();
});

Custom handling when getting a push while the app is foregrounded

If your app is in the foreground and you get a push notification, your app gets to choose whether or not to display the push. For push notifications originating from Customer.io, your SDK configuration determines if you show the notification. But you can add custom logic to your app when this kind of thing happens.

For now, the React Native SDK does not provide callbacks when a push notification is received and your app is in the foreground. But you can use one of the many popular React Native push notification SDKs to receive a callback.

For example, the code below receives a callback using react-native-push-notification. Be sure to follow the documentation for the push notification SDK you choose to use to receive callbacks with.

import { Notifications } from 'react-native-notifications';

Notifications.events().registerNotificationReceivedForeground(
    (notification: Notification, completion) => {

  // Important: When you're done processing the push notification, you must call completion(). 
  // Even if you do not process a push, you must still call completion().  
  completion({ alert: true, sound: true, badge: true });

  // If the push notification originated from Customer.io, the value returned in the `completion` is ignored by the SDK. 
  // Use the SDK's push configuration options instead. 
});

Manually track push metrics

To monitor the delivered push metrics of a received push notification, use the CustomerIO.pushMessaging().trackNotificationReceived(<CUSTOMER.IO_PAYLOAD>) method.

CustomerIO.pushMessaging().trackNotificationReceived(<CUSTOMER.IO_PAYLOAD>)

To track opened push metrics, use the CustomerIO.pushMessaging().trackNotificationResponseReceived(<CUSTOMER.IO_PAYLOAD>) method.

CustomerIO.pushMessaging().trackNotificationResponseReceived(<CUSTOMER.IO_PAYLOAD>)

The method that you use to retrieve the <CUSTOMER.IO_PAYLOAD> value depends on API of the SDK that you are using to receive push notifications from. Here is a code snippet as an example from expo-notifications:

   // Listener called when a push notification is received
   Notifications.addNotificationReceivedListener(notification => {
      ...
      // Fetch Customer.io payload from the push notification
      const payload = notification.request.trigger.payload
      CustomerIO.pushMessaging().trackNotificationReceived(payload)
      ...
    });

   // Receives response when user interacts with the push notification
   Notifications.addNotificationResponseReceivedListener(response => {
      ...
      // Fetch Customer.io payload from the push notification response
      const payload = response.notification.request.trigger.payload
      CustomerIO.pushMessaging().trackNotificationResponseReceived(payload)
      ...
   });

Disabling automatic push tracking

If you have a more advanced use case and want to manually track push metrics, you can disable automatic push tracking with the autoTrackPushEvents option in your Expo config.

{
   ...
   "plugins": [
      ...
      [
        "customerio-expo-plugin",
        {            
            "ios": {
                "autoTrackPushEvents": false,
            }
         }
      ]
   ]
}