Google Tag Manager

Forum Discussion

matt_schilter's avatar
matt_schilter
Supporter
10 months ago

Content Cards for Website Personalization

I’m curious if anyone has experience using traditional Braze content cards to support on-page personalization elements, such as content carousels or homepage sliders.

We’ve started testing this approach in a few smaller use cases and have encountered some challenges—especially around loading behavior for anonymous vs. known users.

Specifically:

  • Anonymous users: We’ve implemented workarounds to display default cards, but once a user becomes known, there’s a noticeable delay (a couple seconds) before personalized cards load. This can create an awkward experience where part of the page is blank or flickers.
  • First page view: Because traditional content cards created at "first impression" only load after the initial page view, we’ve struggled to show personalized cards fast enough during that session. This is particularly problematic as we explore integrating cards into more prominent elements like our homepage hero or product sliders.

In a perfect world, we’d show generic cards first and then smoothly swap in personalized ones when they’re ready—but we haven’t cracked how to do that just yet.

Questions for the group:

  1. Has anyone found ways to improve card load performance—especially on first time on site and during the transition from anonymous to known?
  2. Are there specific implementation strategies or API-based solutions you’ve used to pre-load or cache cards?
  3. Any creative approaches to manage flickering or gaps in high-visibility site elements?

Would love to hear how others are approaching this, especially at scale. 

Content Cards

3 Replies

  • Manoj__'s avatar
    Manoj__
    Visionary
    10 months ago

    Hello matt_schilter​ 

    You can try this to see if this improves the loading time and the user experience.

    1. Implement a loading screen similar to Facebook’s, which displays placeholder content cards during the initial load.

    Reference

    2. Once the content cards are loaded, store them in the browser cache to enable faster retrieval on subsequent visits.
    3. Continuously refresh the content cards in the background and update the cache accordingly.

    This approach improves user experience by showing immediate visual feedback and moving the loading and syncing logic to the background.

    • matt_schilter's avatar
      matt_schilter
      Supporter
      10 months ago

      We're looking to use traditional cards on our main homepage carousel. How do you handle refreshing content cards without reloading the page? If I remember correctly, you can only call the requestContentCardsRefresh() function a certain amount of times over a time period before throttling or delayed reponses.

      • Manoj__'s avatar
        Manoj__
        Visionary
        9 months ago

        Hello matt_schilter​ You can use the setTimeout JavaScript function to call the requestContentCardsRefresh() after some time.