Introduction

Personalization is key to delivering relevant content and tailored experiences to visitors on your website or app. Although there are many tools available to achieve this, ButterCMS simplifies the process of storing content and delivering it based on URL queries or cookies set on your frontend. With ButterCMS, you can easily customize those user experiences, ensuring that each visitor receives the most relevant and engaging information.

Personalization within ButterCMS can be achieved via the use of the Collections content type. Then, using a Reference field in a component, we can programmatically populate content from a collection record into a component

Step 1 — Creating a Collection Schema

If you’re a developer or admin or custom user, login into your ButterCMS account and navigate to your content types page. Then click on the “New Content Type” button and select “Collection” from the dropdown.

Although this schema may be simple, you can build upon what is shown in this article for your own personalization models.

The fields we are going to be using are:

Please note, the field names are only a suggestion

• Segment name (Short Text)

  • This field signifies which customer grouping/segment from a CRM or CDP we want to serve this content.

• Product recommendations (Reference)

  • This field is common for eCommerce use cases but can easily be adapted for other use cases and industries.

  • This field is also using product collection records that we created internally. Therefore, you can change this to a different field, like a WYSIWYG field, and render that content.

• Cookie target (Short Text)

  • This field is going to be used in conjunction with our frontend as we decide when the content should appear. The content should be displayed when the cookie on the frontend is set to the same value as the one in this field.

Other fields that you may want to use depending on your own use case and how visitor interact with your website or app, could be:

• Promo banner text (Short Text)

  • This can be a simple banner that is displayed globally across your website as you might see across a variety of industries.

• Top product recommendation (Reference)

  • This can be a product spotlight that you want to have appear towards the footer of your website or possibly a recommendation when users log into their account.

Step 2 — Populating our content

This next step is shorter as the content we populate is subjective and is only being used or an example case.

In the screenshot below, we created two personas, Roadrunner and Coyote, for our Personalization collection record.

Using the Roadrunner persona as an example, this is what your personalization content may look like:

One field to call out here is the “Cookie target” field where we define the cookie name that will be used on our frontend to display the personalized content. In a later step, we’ll go over some code.

Step 3 — Creating a component in ButterCMS

In Butter, we’re going to create a component that will use the “Product recommendations” field and populate those products on our homepage.

We are also going to define a simple component that uses a Reference field to populate some of the content data that we defined in the last step.

The “Persona” field is using a Reference field type and we selected the “Personalization” Collection as the data table we want to refer to when using this component. In practice, our component will look like this on our homepage:

Now, when we map over our JSON content data via the Read API, we can pull in the product data that was referenced in the Roadrunner personalization record.

Step 4 — Linking our code to ButterCMS

The code below is using JavaScript in a Next.js/React environment. You will also need to use the js-cookie package to work with browser cookies.

You can find the full code file here on a public GitHub gist. However, the parts of the code to call out for relevancy are below:

The first code snippet to call out is our useEffect. We’re using the cookie_target field that was defined in our collection schema earlier to fetch the data that we defined for our Roadrunner record.

   useEffect(() => {
       if (cookie_target) {
           const fetchPersonalizedProducts = async () => {
               try {
                   const response = await getPersonalizedProducts(cookie_target);
                   setMappedProducts(response);
               } catch (error) {
                   console.error('Error fetching personalized products:', error);
               } finally {
                   setLoading(false);
               }
           };
           fetchPersonalizedProducts();
       }
   }, [cookie_target]);

The getPersonalizedProducts function is simply a function abstracted away that uses the Butter JavaScript SDK and follows a similar pattern, as shown in our documentation, to retrieve our personalization collection record for the Roadrunner persona.1

Next, we have some code in our component’s return statement to conditionally render the content of the carousel and products. The code simply checks if the cookie that we’re looking for is present and if its value is set to true in the browser. Therefore, if the conditional is met, the content will be displayed; otherwise, it will not be displayed.

       {(Cookies.get(cookie_target) === 'true') && (
           <>
           ...
           </>
       )}

Applying this to a real-world scenario, you can set up a way to check for URL query parameters if they enter via an ad or email and then attach a browser cookie when the website loads. Alternatively, you can attach a browser cookie when the user logs into their account.

Conclusion

ButterCMS is a powerful tool as a content repository that you fetch and use across any website, app, or platform; fitting perfectly in any use case.

By leveraging the Collection content type, you can follow the steps in this guide to create and manage personalized content to provide tailored content to segments of your customers and users.