Personalize with Cookies

In this tutorial you’ll learn how to use server-side cookies for personalization. For example, you can show different content depending on whether a shopper is new or returning such as a welcome offer banner to new shoppers and a promotional offer banner to returning shoppers.

We recommend testing the steps in a non-production environment before deploying your changes to production.

Before running the commands in this tutorial, replace any placeholders with actual values. Placeholders are formatted like this: $PLACEHOLDER.

To complete this tutorial:

Use PWA Kit version 3.1.0 or later.
On your local machine, enable server-side cookies by completing either of these steps:
- Set the environment variable MRT_ALLOW_COOKIES=true.
  
  or
- Pass localAllowCookies to the options of runtime.CreateHandler in ssr.js.
For your chosen environment, enable server-side cookies by using the Managed Runtime (MRT) API or Runtime Admin:
- MRT API: Call the projects_target_partial_update API endpoint and set allow_cookies to true.
- Runtime Admin: Enable cookies in the Environment Settings.
In app/pages/home/index.jsx, create your chosen content for new and returning shoppers. Or create other content that applies to different categories of shoppers.

Add this JavaScript code to the homepage file in your project app/pages/home/index.jsx:

Deploy your bundle.

Thoroughly test cookie functionality across different browsers and devices.
Always obtain shopper consent before storing any personal information in server-side cookies.
Ensure that your approach to personalization complies with relevant data privacy regulations such as General Data Protection Regulation (GDPR) or California Consumer Privacy Act (CCPA).
Carefully evaluate the impact of personalization on different shopper segments to avoid unintended consequences.
Set appropriate security attributes for your cookie, such as the HttpOnly flag to prevent client-side JavaScript access and the Secure flag for HTTPS connections.
Set a reasonable expiration time for the cookie based on your needs. For isNewShopper, a long expiry time is suitable. For example, a year.

This section provides suggested solutions for common errors that you might encounter while using server-side cookies.

You didn’t get the expected site behavior after you deployed code that involves server-side cookies.

Cause: You didn’t enable server-side cookies.

Suggested Solution: Enable server-side cookies as described in the Prerequisites.

There are disruptions in user sessions or preferences.

Cause: Cookies expired or were deleted prematurely.

Suggested Solution:

Review your cookies’ expiration settings and adjust them as needed to align with your desired session or persistence requirements.
Implement mechanisms to detect and handle expired or deleted cookies gracefully, such as re-authenticating shoppers or prompting them to re-establish their preferences.
Monitor shopper feedback and behavior to identify any patterns or issues related to cookie expiration or deletion and address them proactively.

Sometimes cookies behave differently across different pages or components of your site, leading to inconsistencies in shopper experience.

Cause: Inconsistent or decentralized cookie-related logic.

Suggested Solution:

Ensure that cookie-related logic, including setting and reading cookies, is applied consistently across all relevant pages and components.
Review the flow of your application to identify any discrepancies or inconsistencies in how cookies are handled.
Consider centralizing cookie-related logic or using a dedicated library or middleware for managing cookies to ensure uniform behavior.