Capture Push Metrics

 Upgrade to a version after 3.4.0!

If you’re on a version of our SDK before 3.4.0, you’ll need to manually handle push notifications. Beginning in 3.4.0, the SDK automatically handles push notifications from Customer.io and tracks opened and delivered metrics for you. We recommend that you upgrade to simplify your code!

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!

 Do you use multiple push services in your app?

The Customer.io SDK only handles push notifications that originate from Customer.io. Push notifications that were sent from other push services or displayed locally on device are not handled by the Customer.io SDK. You must add custom handling logic to your app to handle those push events.

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();
});

 Do you use deep links?

If you’re performing custom push click handling on push notifications originating from Customer.io, we recommend that you don’t launch a deep link URL yourself. Instead, let our SDK launch deep links to avoid unexpected behaviors.

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

🎉Updated in version 3.1.0

 Avoid duplicate push metrics

If you manually track your own metrics, you should disable automatic push tracking to avoid duplicate push metrics.

 Known issue tracking opened push metrics in app killed state

When manually tracking push metrics using Javascript methods, opened push metrics are not tracked when the app is in killed or closed state. This is a known behavior and it’s recommended to instead use the automatic push tracking feature.

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 
    }
  }
Copied to clipboard!
  Contents
Current release
 3.7.1
Is this page helpful?
Chat with AI