[Bug]: `subscribeToContentCardsUpdates` not working on NextJS

[hali241997]

Braze Web SDK Version

4.1.0

Integration Method

NPM

Browser

Chrome

Steps To Reproduce

const {
  initialize,
  changeUser,
  automaticallyShowInAppMessages,
  requestContentCardsRefresh,
  subscribeToContentCardsUpdates,
  ClassicCard,
  CaptionedImage,
  openSession,
} = await import(
  /* webpackExports: ["initialize", "changeUser", "automaticallyShowInAppMessages", "subscribeToContentCardsUpdates", "requestContentCardsRefresh", "ClassicCard", "CaptionedImage", "openSession"] */
  "@braze/web-sdk"
);

const isInit = initialize(process.env.NEXT_PUBLIC_BRAZE_API_KEY, {
  baseUrl: process.env.NEXT_PUBLIC_BRAZE_SDK_ENDPOINT,
  manageServiceWorkerExternally: true,
  serviceWorkerLocation: "/sw.js",
  enableLogging: true,
});

if (isInit) {
  changeUser(userInfo.data.data.userInfo.id);
  automaticallyShowInAppMessages();

  subscribeToContentCardsUpdates((newCards) => {
    console.log({ newCards });
  });

  requestContentCardsRefresh();
  openSession();
}

Expected Behavior

Whenever I make a content card campaign from Braze dashboard that sends cards immediately after launching, I expect the content card to show up under the subscribeToContentCardsUpdates section

Actual Incorrect Behavior

The console.log({ newCards }); only shows up on the first load and never appears again. I suspect that the subscription is not working in NextJS

Verbose Logs

Braze: Initialization Options: {
  "baseUrl": "baseUrl",
  "manageServiceWorkerExternally": true,
  "serviceWorkerLocation": "/sw.js",
  "enableLogging": true
}
instrument.js:110 Braze: Initialized for the Braze backend at "baseUrl" with API key "api-key".
instrument.js:110 Braze: Generating session start event with time 1661328743367. Will expire 1661330543367
instrument.js:110 Braze: Invoking new session subscriptions
instrument.js:110 Braze: Changed user to "some-user-id".
instrument.js:110 Braze: Trigger event open did not match any trigger conditions.

Additional Information

No response

[wesleyorbin]

Hi @hali241997. If you are not using the built-in UI, cards only refresh when requestContentCardsRefresh() is called. When you send a card immediately through the Braze dashboard, you will need to refresh cards again in order to see that card come in through the subscription.

If the above does not help, can you confirm whether this code is called inside of a useEffect() hook? If not, can you provide more context as to where this code is called so that we can try to reproduce?

[hali241997]

Hi @wesleyorbin. I am not using built-in UI. If I need to call requestContentCardRefresh() when I send a card immediately through Braze dashboard, what about those cards that are scheduled to be sent the next day or the next week?

Please check sandbox here: https://codesandbox.io/s/braze-notification-issue-g5r9wc It is my exact implementation but it does not contain the env file. I hope that this will give you more context. Thanks

[wesleyorbin]

@hali241997 Those cards will be received by the user on the first refresh after they have been sent out. Refreshes occur automatically on a new session if you call subscribeToContentCardUpdates() before opening a session. Since you are using a custom UI, you can request a refresh periodically.

If you have further questions, I would recommend reaching out to our support team and they will be happy to help you come up with a solution for your use case.

[hali241997]

Hi @wesleyorbin What about those cards that are scheduled to be sent late? In that case, shouldn't the subscription be responsible for handling those cards in the code example I gave you here?

[davidbielik]

Hi @hali241997 yes, the subscription will notify you of any new cards the SDK is aware of. The SDK only becomes aware of new cards when you call the refresh method.

For cards that are scheduled later, you'll need to periodically refresh cards during a user's session. The SDK only automatically refreshes cards our provided UI is displayed (which you are not using).

For action-based triggered cards, there might be a few second delay from the time the action occurs, to when the backend makes the card available to refresh.

Since the SDK is behaving as expected, I suggest emailing our support team (support@braze.com) to help talk through your campaign setup and expected message sending behavior.

[hali241997]

Hi @davidbielik @wesleyorbin I have a question about the periodic refresh of content cards. I have decided to call requestContentCardRefresh function after every 5 minutes. Is that okay with the Braze backend service or do you have some sort of rate limit set?

[davidbielik]

Hi @hali241997 there's no rate limit, but best to ask support@braze.com in case there are any accounts-specific considerations outside of the SDK-code.