Personalizing content based on user behavior

General
1

Hi,

I’m exploring a use case where a user interacts with the website (for example, clicks on a specific button or link), and we store that information so that when they refresh the page or return later, the content displayed is personalized based on their previous actions.

For example:

  • If a user clicks on a “Sports” category, the homepage later shows more sports-related banners.

  • If a user engages with a certain promotion, similar offers appear on their next visit.

Has anyone implemented this type of behavior-based personalization with Builder.io?

  • Would the best approach be storing the action in localStorage/cookies and passing it as a custom targeting attribute to Builder.io?

  • Is there a way to make this work seamlessly across sessions?

Any tips, examples, or best practices would be very helpful.

Thanks!

1 Like
2

More Use Cases:

If it’s the first time a user visits the website (number of pageviews = 1), they might see a welcome message or a special onboarding offer.

If the number of pageviews exceeds a certain threshold, different banners or CTAs could be shown (e.g., promoting newsletter signup after 3+ pageviews).

3

Hello @mateuszad

Implementing behavior-based personalization with Builder.io can be achieved using variant containers which are designed for personalization and scheduling features for content . These allow you to serve different content variants to specific audiences based on custom criteria without requiring duplication of the entire page or section.

For instance, if a user clicks on a “Sports” category, you could store this interaction in localStorage or cookies, and then pass it as a custom targeting attribute to Builder.io. This would help in displaying more sports-related banners on the homepage during the user’s next visit. The interaction with cookies or localStorage can help retain such personalized settings across user sessions .

Here are some steps and tips for implementing such personalization:

  1. Create Custom Targeting Attributes: You can define custom targeting attributes such as ‘audience’ for storing user preferences or actions. These attributes can then be used to tailor content delivery based on user interactions .

  2. Set Attributes Prior to Rendering: Use the builder.setUserAttributes() method to define and use these attributes before React or other frameworks initialize, which helps in reducing layout shifts and ensures that the correct personalization container loads efficiently. These attributes persist in cookies across page refreshes and are independent of server-side API calls .

  3. Handling First-Time and Returning Users: For a first-time user, you can show a welcome message or an onboarding offer by setting a targeting attribute based on the number of page views. Similar logic applies for showing different CTAs or banners after users surpass a certain number of interactions with the website .

  4. Using Variant Containers in Builder.io: Variants can be created to handle specific scenarios. By setting up targeting for these variants, you can ensure users see personalized content based on their recorded preferences. Furthermore, the platform allows integration with Customer Data Platforms (CDPs) to further enhance personalization by utilizing more complex user segmentation data .

This combination of storing user actions as attributes and setting up custom targeting in Builder.io provides robust behavior-based personalization, ensuring users receive a unique, tailored experience on your site. Consider also leveraging CDPs to enrich personalization data and make it more comprehensive .

For reference, you can refer to below articles