42

Capture Push Metrics

Automatic push handling

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.

Beginning in customerio-reactnative version 3.4.0, the SDK automatically tracks opened and delivered events for push notifications originating from Customer.io after you configure your app to receive push notifications. No more code is required for your app to track opened push metrics or launch deep links!

Read the sections below to see how you can add (optional) custom handling to various push events.

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, add the following highlighted line of code in your MyAppPushNotificationsHandler class that you created as a part of our push notification setup instructions:

  @objc(setupCustomerIOClickHandling)
  public func setupCustomerIOClickHandling() {
    ...
    MessagingPushAPN.initialize { config in
      config.showPushAppInForeground = true // `true` will display the push when app in foreground 
    }
  }

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 record push metrics using Javascript methods

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

After you set up push notifications, update AppDelegate.mm to disable automatic push notification tracking:

  @objc(setupCustomerIOClickHandling)
  public func setupCustomerIOClickHandling() {    
    CustomerIO.initialize(siteId: siteId, apiKey: apiKey, region: Region.US) { config in
      config.autoTrackPushEvents = false 
    }
  }