쿠키를 사용한 개인화

이 튜토리얼에서는 개인화에 서버 측 쿠키를 사용하는 방법을 알아봅니다. 예를 들어 신규 구매자에게는 환영 쿠폰 배너를, 재구매자에게는 프로모션 쿠폰 배너를 표시하는 등, 구매자가 신규 구매자인지 재방문인지에 따라 서로 다른 컨텐츠를 표시할 수 있습니다.

변경 사항을 프로덕션 환경에 배포하기 전에 비프로덕션 환경에서 단계를 테스트하는 것이 좋습니다.

이 튜토리얼의 명령을 실행하기 전에 Placeholder를 실제 값으로 바꿉니다. 자리 표시자는 $PLACEHOLDER와 같은 형식입니다.

사전 요구 사항

이 튜토리얼을 완료하려면 다음을 수행합니다.

PWA Kit 버전 3.1.0 이상을 사용합니다.
로컬 컴퓨터에서 다음 단계 중 하나를 완료하여 서버 측 쿠키를 사용하도록 설정합니다.
- MRT_ALLOW_COOKIES=true 환경 변수를 설정합니다.
  
  또는
- ssr.js의 runtime.CreateHandler 옵션에 localAllowCookies를 전달합니다.
선택한 환경에 대해 MRT(Managed Runtime) API 또는 Runtime Admin을 사용하여 서버 쪽 쿠키를 활성화합니다.
- MRT API: projects_target_partial_update API 엔드포인트를 호출하고 allow_cookies를 true로 설정합니다.
- Runtime Admin: 환경 설정에서 쿠키를 활성화합니다.
app/pages/home/index.jsx에서 신규 및 재방문 구매자에 대해 선택한 컨텐츠를 생성합니다. 또는 다양한 카테고리의 구매자에게 적용되는 다른 컨텐츠를 만들 수 있습니다.

신규 또는 재구매자에게 다양한 컨텐츠 표시

이 JavaScript 코드를 app/pages/home/index.jsx 프로젝트의 홈페이지 파일에 추가합니다.

1import React, { useState, useEffect } from 'react';
2import Cookies from 'js-cookie'
3
4const Home = () => {
5    const [isNewShopper, setIsNewShopper] = useState();
6
7    useEffect(() => {
8
9        // Find out if the site visitor is a new shopper by checking for the isNewShopper cookie.
10        const isNewShopperCookie = Cookies.get('isNewShopper');
11
12        // If the cookie isn't found, set it on the server and treat the site visitor as a new shopper.
13        setIsNewShopper(isNewShopperCookie != null ? isNewShopperCookie === 'true' : true);
14    }, []);
15
16    return (
17        {isNewShopper ? (
18
19        // Show this message to a new shopper.
20            <h1>Welcome! We're glad you're here.</h1>
21        ) : (
22
23        // Show this message to a returning shopper.
24            <h1>Welcome back!</h1>
25        )}
26
27        // ... Code for the rest of your homepage
28    )
29}

번들을 배포합니다.

모범 사례

다양한 브라우저와 기기에서 쿠키 기능을 철저하게 테스트합니다.
서버 측 쿠키에 개인 정보를 저장하기 전에 항상 구매자의 동의를 구합니다.
개인화에 대한 접근 방식이 GDPR(General Data Protection Regulation) 또는 CCPA(California Consumer Privacy Act)와 같은 관련 데이터 개인 정보 보호 규정을 준수하는지 확인합니다.
개인화가 다양한 구매자 세그먼트에 미치는 영향을 신중하게 평가하여 의도치 않은 결과를 방지합니다.
클라이언트 측 JavaScript 액세스를 방지하기 위한 HttpOnly 플래그, HTTPS 연결에 대한 보안 플래그 등, 쿠키에 대한 적절한 보안 특성을 설정합니다.
필요에 따라 쿠키의 적절한 만료 시간을 설정합니다. isNewShopper의 경우 만료 시간이 긴 것이 적합합니다. 예를 들어 년으로 설정합니다.

일반적인 오류 해결

이 섹션에서는 서버 측 쿠키를 사용하는 동안 발생할 수 있는 일반적인 오류에 대한 제안된 해결 방법을 제공합니다.

예상치 못한 결과

서버 측 쿠키와 관련한 코드를 배포한 후 정상적인 사이트 동작을 얻지 못했습니다.

원인: 서버 측 쿠키를 활성화하지 않았습니다.

제안된 솔루션: 사전 요구 사항에서 설명하는 대로 서버 측 쿠키를 활성화합니다.

쿠키 만료 또는 삭제

사용자 세션 또는 기본 설정에 장애가 있습니다.

원인: 쿠키가 만료되었거나 중간에 삭제되었습니다.

제안된 솔루션:

쿠키의 만료 설정을 검토하고 필요에 따라 원하는 세션 또는 지속성 요구 사항에 맞게 조정합니다.
만료되거나 삭제된 쿠키를 정상적으로 감지하고 처리하는 메커니즘(예: 구매자를 다시 인증하거나 기본 설정을 다시 설정하라는 메시지를 표시)을 구현합니다.
구매자의 피드백과 행동을 모니터링하여 쿠키 만료 또는 삭제와 관련한 패턴이나 문제를 파악하고 사전에 해결합니다.

페이지 간에 일관되지 않은 쿠키 동작

쿠키가 사이트의 여러 페이지 또는 구성 요소에서 다르게 작동하여 구매자 경험에 일관성이 없는 경우가 있습니다.

원인: 일관성이 없거나 중앙 집중화되지 않은 쿠키 관련 로직.