Trigger Content Card Default Feed only when we send a Content Card from Braze

[msaaddevkyte]

Which Platforms?

Both

Which React Native Version?

0.71.11

Which @braze/react-native-sdk SDK version?

^6.0.1

Repro Rate

100% of the time

Steps To Reproduce

Example:

1. import Braze from "@braze/react-native-sdk".
2. Put Braze.changeUser("id") in useEffect
3. Put Braze.launchContentCards(); in the same useEffect after step 2.

Expected Behavior

I don't want to open the Content Card feed when the user clicks on something. It should automatically open up when we send a Content card. That's why, I added it to the useEffect.

Actual Incorrect Behavior

The empty feed is opening up every other second.

Verbose Logs

No response

Additional Information

https://github.com/braze-inc/braze-react-native-sdk/assets/139242622/e70cda0a-fd10-4f92-a166-b6c509a3a0b8

[msaaddevkyte]

I read the docs again and added the following code:

useEffect(() => {
    const contentCardsSubscription = Braze.addListener(
      Braze.Events.CONTENT_CARDS_UPDATED,
      async (update) => {
        if (update.cards.length) {
          Braze.launchContentCards();
        }
      },
    );

    Braze.requestContentCardsRefresh();

    return () => {
      contentCardsSubscription.remove();
    };
}, []);

Right now, I am not seeing any empty feed but I am not sure if it works. I tested it but when I sent the content card from Braze, the array was still empty. It could be due to other reasons but I have the following questions:

1. Does the Braze.addEventListener(Braze.Events.CONTENT_CARDS_UPDATED, () => {}) work for default content feed as well?
2. If I send a Content card from Braze, the length of the card array will be 1 and the content card will show up. After it is displayed, will the cards array be empty again? Asking this because if there is a content card and the array doesn't get empty, I don't want the feed pop up every other second but with the content card this time.

UPDATE: About the second question, the cards doesn't get empty. So now when there is a Content card, the feed is popping up continuously.

So back to the initial question, how to only show the Default Content Card feed once when there is a content card?

[jerielng]

Hi @msaaddevkyte:

1. Does the Braze.addEventListener(Braze.Events.CONTENT_CARDS_UPDATED, () => {}) work for default content feed as well?

Sorry, I'm not sure I fully understand your question. Are you asking if this listener works with the default Braze Content Card UI? If so, yes. For more context, the default UI that Braze provides to view your Content Cards is a separate layer from your user's actual Content Cards. It's simply a convenience that Braze provides to easily view the list of cards your user has, if you don't want to build out your own UI. So that listener is attached to your user's cards and will work in either case: your own custom UI or Braze's default UI.

So back to the initial question, how to only show the Default Content Card feed once when there is a content card?

This will be up to your own implementation of your app. The cards array will not be cleared out, so that count will maintain as long as the user still has access to those cards, so checking against the length of the array each time may not work here. Showing the feed every time a new card appears might get disruptive, as you've observed, since that listener can get triggered in different circumstances. You may need to assess what kind of behavior are you trying to accomplish here?

It sounds to me like you would like the feed to appear anytime a new CC is received, which sounds like in-app messages might be more appropriate for this. Have you considered using that channel instead?

[msaaddevkyte]

Hi @jerielng!

Thanks for the explanation. Yes, we have already implemented the In-App Messages. About the Content Cards, the following worked for me inside useEffect:

const contentCardsSubscription = Braze.addListener(
  Braze.Events.CONTENT_CARDS_UPDATED,
  async (update) => {
    if (update.cards.length) {
      Braze.launchContentCards();
    }
  },
);

return () => {
  if (contentCardsSubscription) {
    contentCardsSubscription.remove();
  }
};

Now the CC feed opens up whenever there is a Content Card. I was using Braze.requestContentCardsRefresh(); earlier which led to the feed opening every other second if a Content Card exists. What do you think about the above implementation? Do you see any downside to it?

One thing I noticed was in the feed, there were previous CCs as well as the new one I am sending from Braze. Is this normal? Do we delete the previously sent cards from Braze?

[jerielng]

What do you think about the above implementation? Do you see any downside to it?

It should work as intended if that is the desired behavior. However, that listener will trigger any time there is an update to the user's CCs, so depending on how often that happens, it might get disruptive to the user's experience. I would recommend to test it heavily to see if that is ideal for your use case.

One thing I noticed was in the feed, there were previous CCs as well as the new one I am sending from Braze. Is this normal? Do we delete the previously sent cards from Braze?

Yes, that's expected. CCs are supposed to persist for the user until they're either removed by the user or the user is no longer eligible to receive that campaign for whatever reason. Think something similar to your notifications feed in a given app. For more details on the use cases, you can also look at our code-agnostic docs here.

[msaaddevkyte]

@jerielng can you please explain when you say "there is an update to the user's CCs"? Does Braze has a list somewhere where the cards are listed that can be updated?

[jerielng]

there is an update to the user's CCs

This simply means whenever you refresh your list of CCs. These are the cards that persist for the user until they expire and are the same cards that appear on that feed UI. For example, you can access the list of CCs for a given user with these methods.

[jerielng]

Hi @msaaddevkyte, we'll be closing out this issue due to inactivity, but feel free to re-open it if you have any further questions or are still facing issues with implementing Content Cards. Thanks!