JSON Rich Push vs Custom Payload

Hello!

SDK version:

Latest: 3.3.2

Describe the issue

I'm using react-native-notifications to catch received notifications from CustomerIO, and from what I understood, it should be the same for react-native-push-notifications, react-native-firebase/messaging or expo-notifications. On iOS, both Rich Push and Custom Payload are received in the "foreground" or "background" & "opened" listeners. The issue is that on Android things start to behave differently, we don't get the callbacks called when a Rich Push notification is received (but image appears correctly, and the deeplink also work)

Here is a Rich Push payload from the "Preview Payload" feature on the Dashboard, for android.

{
  "message": {
    "data": {
      "body": "Rich Push Content",
      "image": "", // Works as expected
      "link": "", // Works as expected
      "myCustomData": "Not received in the callbacks",
      "title": "Rich Push Title"
    }
  }
}

Now here is the Custom Payload that we send and is being received through the callbacks:

{
  "message":{
    "notification":{
      "title": "Custom Payload Title",
      "body": "Custom Payload Content",
      "image": "", // Works as expected
      "link": "", // Works as expected
    },
    "data": {
        "name": "Received in the callbacks"
    }
  }
}

I'm really lost about why the Rich Push editor does not provide a "notification" object just like the required format from FCM ?
Why are my callback not being called for notifications with only a "data" object and no "notification" object ?

I came to the conclusion that:

Rich Push are not made for passing around custom data, only for redirecting and showing image, and in the future other features (even though it's still weird that title and body are not in the "notification object" as usual), so your SDK is not passing down the data to our code
Custom Payload is meant for custom behaviour so your SDK is passing down the data to our code, but we can still add an "image" and "link" but that's not called a Rich push
We should be using the "link" property with a proper deeplink, and let the deeplink callbacks receive the information instead of trying to catch the data in the react-native-notifications listeners

Am I correct?

EDIT: I tested with react-native-firebase messaging and I receive the background and foreground listeners even with Rich Push notif, but the onNotificationOpenedApp event to catch taps on the notification is not called unfortunately.

Additionally, the tracking is not behaving the same:

with Rich Push we don't get "opened" events but that's because we do it manually in the callbacks, and the callbacks are not being called
with Custom Payload, where everything works for us, the iOS "delivered" metrics are not correctly tracked on the Dashboard, but that may be another issue

Thanks for your time!

Hey there, @TwistedMinda. I understand that this topic can be confusing. Let me try and help.

Thank you for all of these great details! Based on the information you provided, let me try and get into the main questions that you're asking.

I'm really lost about why the Rich Push editor does not provide a "notification" object just like the required format from FCM ?

The Rich Push editor purposely does not provide a notification object, correct. This is because a FCM behavior with how push notifications are handled on a device. As you can see from the table on this webpage, only JSON payloads that include a data object and do not include notification object will be processed on the device when app is in foreground and in the background.

CleanShot 2024-01-22 at 11 29 41@2x

The Rich Push editor wants to make sure that the Customer.io mobile SDK is able to process every push notification received on the device, no matter if app is in foreground or background. Therefore, it composes a push that has the highest chance of that happening.

Why are my callback not being called for notifications with only a "data" object and no "notification" object ?

I reached out to my team to help on this question. I'll follow-up when we have an answer for you.

Rich Push are not made for passing around custom data, only for redirecting and showing image

Actually, we have designed our rich push feature with passing around custom data in mind. You should be able to send custom data inside of a Customer.io sent push notification and process it on a device, if you need to.

In the Rich Push editor, you can pass in custom JSON:

CleanShot 2024-01-22 at 11 38 54@2x

You can preview the payload that will be sent to the device:

CleanShot 2024-01-22 at 11 40 04@2x

Then, in the push callback functions in your app, you can parse the push notification payload to get the custom data out of the push. How you do this step depends on your app and the callback functions that you have setup. In your scenario, you have been experiencing issues with callback functions not being called. Hopefully after those issues are resolved, this step is much easier for you to complete.

Other questions regarding recommendations for handling a push using custom payload editor

In general, we recommend the Rich Push editor when it works for you and your use case. The Rich Push editor is an easier to use experience for editing as well as displaying a push in your app. With the custom data feature of the Rich Push editor, it should be able to handle some advanced use cases your app needs.

The custom payload editor is a great option for more advanced use cases the Rich Push editor cannot handle. When you use the custom payload editor, it may be required that you write more custom code in your app to handle push notifications being displayed in your app.

Our documentation website does offer payload examples that are meant to be compatible with our mobile SDKs. This is meant to allow you to still be able to use the custom payload editor to handle your more advanced use case, but also use the Customer.io mobile SDKs to do some of the work for you such as displaying an image in a push.

I hope that this response helps you with resolving your issue. I understand that you may have more questions. Please, feel free to follow-up with more questions if you have them.

Have an awesome day!

Thanks for your fast & clear answer! This enlightens me so much :)

It explains a lot on why I had so much troubles setting up the notifications & tracking on Android. So, the ultimate goal to be "up-to-date" is to use the Rich Push, with only a "data" object to maximize reachability.

Now I only need my callbacks to work and I'll be good to go. What is the library you advice using alongside CustomerIO to handle these callbacks ?

With firebase messaging I'm able to receive the foreground and background listeners to work, so now I only need the onNotificationOpenedApp to work to receive the taps on the notification. It seems it's actually not that trivial, as it depends a lot on the specific setup you have. For example, here is a discussion about this specific problem : https://github.com/invertase/react-native-firebase/issues/3469#issuecomment-614990736

As mentioned in the thread, I use react-native-splash-screen which may require more steps to get all my callbacks to work, but that's not CustomerIO related. I might need some more help later on if the tracking is not working as expected but I might open a different issue, so feel free to close this one if needed

Thanks again!

Glad that you found this response helpful!

Now I only need my callbacks to work and I'll be good to go. What is the library you advice using alongside CustomerIO to handle these callbacks ?

Could you share a use case for what you're trying to accomplish in your app? Why you say you need callbacks?

What I think you're trying to do is:

Send a push from Customer.io. Compose the push using the Rich Push editor. Display the push on device with the Customer.io mobile SDK.
Attach custom data to the push using the feature in the Rich Push editor:

CleanShot 2024-01-22 at 11 38 54@2x

When the push is received on the device, you want to be able to get this custom data from the push and process it.

Is this use case correct?

Yes exactly, the use case is correct.

On the notification tap, we want to retrieve the push notification data and act accordingly
We're also incrementing a local counter to let the user know he has notifications to read
And finally we're tracking events manually because it wasn't working automatically for us, but it might now that we're using Rich Push

I'll keep you in touch to let you know if the manual tracking is required when I'm done testing all the combos (react-native-notifications, react-native-firebase, react-native-push-notifications, expo-notifications) :p Any of these libraries is advised by the CustomerIO team? From my point of view, CustomerIO is basically agnostic to them?

Here is a quick overview of the code I'm trying to accomplish (using react-native-notifications).

Sharing those use cases is very helpful, thank you!

There is a known limitation with the React Native SDK at this time in regards to it's support for processing custom data you add in the Rich Push editor. We are tracking this limitation internally and I have added a +1 to that ticket based on this conversation. Unfortunately, we do not have a release date in mind for this feature.

On the notification tap, we want to retrieve the push notification data and act accordingly

For this use case, I suggest using a deep link instead of the custom data Rich Push editor feature. The React Native SDK has deep link support and you can use the Rich Push editor to add a deep link to a push notification:

CleanShot 2024-01-24 at 11 42 59@2x

The idea is, when a push is clicked > the Customer.io SDK processes that push click event > the deep link gets executed > your app opens and you're able to process the push data via the deep link URL sent to your app.

Deep links are a neat feature that could be used beyond a Customer.io push notification. If you haven't looked into this feature yet, I do suggest it.

We're also incrementing a local counter to let the user know he has notifications to read

Callback functions for when a push is received should work for this use case.

You mentioned previously that you have successfully gotten callbacks triggered for when a push is received on the device, correct?

And finally we're tracking events manually because it wasn't working automatically for us, but it might now that we're using Rich Push

Good idea on continuing to test this as you continue to modify your project and try new things out. Getting push metrics to work is, unfortunately, trial and error at the moment.

If you do decide to use the Customer.io mobile SDK alongside another SDK, we do have documentation that gives an overview on how to manually do tracking.

Any of these libraries is advised by the CustomerIO team? From my point of view, CustomerIO is basically agnostic to them?

We suggest only using another SDK, if you need it. Setting up Customer.io push is easier and less complex if you only use the Customer.io SDK.

There isn't 1 particular SDK that we suggest using at this time. Whatever SDK that you're comfortable with is a good choice. We hear rnfirebase being used a lot alongside our SDK, if that helps.

Oh, okay it is good to know that the Rich Push custom payload support is not that trivial and it's not just me :p

Using a deeplink instead of the payload data is indeed something I came up with in my initial post :

We should be using the "link" property with a proper deeplink, and let the deeplink callbacks receive the information instead of trying to catch the data in the react-native-notifications listeners

Unfortunately that is going to be a lot of work. We also need to keep the old versions of our app being used in mind. But I understand now that this would have been way easier to use this solution from the get-go.

For now, our setup with Custom Payload is triggering all required callbacks so we have the time to make this right. So here's what I'm gonna do from now:

Keep trying to receive the Rich push custom data from callbacks using those libraries : react-native-notifications, react-native-firebase, react-native-push-notifications, expo-notifications
Fallback to using deeplink if I can't get to it

Thank you for your time and your detailed responses!

You're doing awesome. You're on the right track!

I wish I had an easier solution for you at this time. Again, this is on our radar. We don't like to hear when something is difficult to do for customers. Greatly appreciate your time and detailed responses.

I'm going to close this since you have a plan that will work for you.

customerio / customerio-reactnative