Personalizar com cookies

Neste tutorial, você aprenderá a usar cookies no lado do servidor para personalização. Por exemplo, você pode mostrar conteúdo diferente, dependendo se o comprador é novo ou está retornando, como um banner de oferta de boas-vindas para novos compradores e um banner de oferta promocional para compradores que retornam.

Recomendamos testar as etapas em um ambiente que não seja de produção antes de implantar suas alterações na produção.

Antes de executar os comandos neste tutorial, substitua os espaços reservados por valores reais. Os espaços reservados são formatados da seguinte maneira: $PLACEHOLDER.

Pré-requisitos

Para concluir este tutorial:

Use o PWA Kit versão 3.1.0 ou posterior.
Em sua máquina local, habilite os cookies no lado do servidor concluindo uma destas etapas:
- Defina a variável de ambiente MRT_ALLOW_COOKIES=true.
  
  ou
- Passe localAllowCookies para as opções de runtime.CreateHandler em ssr.js.
Para o ambiente escolhido, habilite os cookies do lado do servidor usando a Managed Runtime (MRT) API ou o Runtime Admin:
- MRT API: Chame o endpoint da projects_target_partial_update API e defina allow_cookies como true.
- Runtime Admin: Ative os cookies nas Configurações do ambiente.
Em app/pages/home/index.jsx, crie o conteúdo escolhido para compradores novos e recorrentes. Ou crie outro conteúdo que se aplique a diferentes categorias de compradores.

Mostrar conteúdo diferente para compradores novos ou antigos

Adicione este código JavaScript ao arquivo da página inicial em seu projeto 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}

Implante seu pacote.

Práticas recomendadas

Teste completamente a funcionalidade de cookies em diferentes navegadores e dispositivos.
Sempre obtenha o consentimento do comprador antes de armazenar qualquer informação pessoal em cookies no lado do servidor.
Certifique-se de que sua abordagem de personalização esteja em conformidade com as regulamentações relevantes de privacidade de dados, como o Regulamento Geral de Proteção de Dados (GDPR) ou a Lei de Privacidade do Consumidor da Califórnia (CCPA).
Avalie cuidadosamente o impacto da personalização em diferentes segmentos de compradores para evitar consequências não intencionais.
Defina atributos de segurança apropriados para seu cookie, como o sinalizador HttpOnly para impedir o acesso JavaScript no lado do cliente e o sinalizador Seguro para conexões HTTPS.
Defina um tempo de expiração razoável para o cookie com base em suas necessidades. Para isNewShopper, um longo prazo de validade é adequado. Por exemplo, um ano.

Solucionar problemas de erros comuns

Esta seção fornece soluções sugeridas para erros comuns que você pode encontrar ao usar cookies no lado do servidor.

Resultados inesperados

Você não obteve o comportamento de site esperado depois de implantar o código que envolve cookies no lado do servidor.

Causa: Você não ativou os cookies no lado do servidor.

Solução sugerida: Habilite os cookies no lado do servidor, conforme descrito nos Pré-requisitos.

Expiração ou exclusão de cookies

Há interrupções nas sessões ou preferências do usuário.

Causa: Os cookies expiraram ou foram excluídos prematuramente.

Solução sugerida:

Revise as configurações de expiração de seus cookies e ajuste-as conforme necessário para se alinhar com os requisitos de sessão ou persistência desejados.
Implemente mecanismos para detectar e lidar com cookies expirados ou excluídos normalmente, como autenticar novamente os compradores ou solicitar que eles restabeleçam suas preferências.
Monitore o feedback e o comportamento do comprador para identificar quaisquer padrões ou problemas relacionados à expiração ou exclusão de cookies e resolva-os de forma proativa.

Comportamento inconsistente de cookies nas páginas

Às vezes, os cookies se comportam de maneira diferente em diferentes páginas ou componentes do seu site, levando a inconsistências na experiência do comprador.

Causa: Lógica inconsistente ou descentralizada relacionada a cookies.