Personalizar com contexto do comprador

Com o Shopper Context, você pode personalizar as experiências de compra personalizando suas promoções, preços, recomendações de produtos e conteúdo entregue em seu site com base no comportamento do comprador. Por exemplo, se os compradores visitarem seu site a partir de um dispositivo móvel, ofereça a eles um desconto de 10%.

O gancho nomeado useUpdateShopperContext é usado para definir o contexto do comprador em um site do Kit Progressive Web App (PWA ). A implementação padrão do Shopper Context no PWA Kit é uma demonstração dos recursos de personalização. Na implementação de demonstração descrita neste guia, usamos parâmetros de consulta para ativar um esquema de personalização que altera o conteúdo e as promoções da página de listagem de produtos (PLP). Estenda nossa implementação com código personalizado para corresponder à sua própria estratégia de personalização.

Este guia explica nossa implementação de demonstração do Shopper Context e como configurá-la e estendê-la para potencializar a estratégia de personalização de seu site PWA Kit. A funcionalidade descrita neste guia não é compatível com uma vitrine híbrida.

Recomendamos testar a personalização em um ambiente que não seja de produção antes de implantar suas alterações na produção. Você também pode visualizar sua personalização usando o Storefront Preview.

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

Este vídeo mostra um exemplo de como personalizar conteúdo e promoções com a implementação de demonstração do Shopper Context.

Shopper Context in PWA Kit
undefined

Para usar a personalização com o Shopper Context:

  • Na interface do administrador do Shopper Login and API Access (SLAS), crie um cliente SLAS privado. Consulte Criar um cliente SLAS.

No Business Manager

O shopper_context_hooks cartridge atua como uma lista de permissões para garantir que somente o contexto que você deseja usar para campanhas de personalização possa ser definido a partir do cliente. No Business Manager

  • Adicione shopper_context_hooks ao caminho do cartridge do seu site. Essa etapa garante a segurança do site, impedindo que membros não autorizados da equipe de desenvolvimento do site definam todos os escopos de contexto do comprador.

    • Vá para Administração > Sites > Gerenciar Sites.
    • Selecione o site onde você deseja usar este cartucho. Exemplo de identificador de site: RefArch.
    • Clique na guia Configurações.
    • No campo Cartuchos, adicione o novo caminho shopper_context_hooksdo cartucho. Adicione o novo caminho do cartridge antes do caminho para app_storefront_base. Por exemplo:shopper_context_hooks:app_storefront_base

  • Instale e carregue o cartucho.

    • Clone o repositório de ganchos do Shopper Context. O nome do diretório de nível superior é shopper_context_hooks.

    • Para instalar dependências de pacote, a partir do shopper_context_hooks diretório, execute:

      npm install

    • Configure IDs de cliente atualizando CLIENT_REGISTRY em cartridges/shopper_context_hooks/cartridge/scripts/config/clientRegistry.js

    • Crie um dw.json arquivo no shopper_context_hooks diretório. Substitua as $ cadeias de caracteres neste exemplo por valores reais ou defina as variáveis de ambiente correspondentes.

    • No shopper_context_hooks diretório, execute:

      npm run uploadCartridge

Para obter mais informações sobre como carregar o cartucho, consulte Carregar código para Storefront Reference Architecture (SFRA).

Configure o registro do cliente adicionando uma preferência de site personalizada. Para fazer isso, importe o system-objecttype-extensions.xml Business Manager.

  • Vá em Administração > Desenvolvimento > do site Importação & e exportação.
  • Em Importar & Arquivos de Exportação, clique em Carregar.
  • Clique em Selecionar arquivo.
  • Vá para meta/meta
  • Selecione system-objecttype-extensions.xml.
  • Clique em Upload.
  • Depois que o arquivo for carregado, clique em Voltar.
  • Em Metadados, clique em Importar.
  • Selecione system-objecttype-extensions.xml e clique em Avançar.
  • Depois que o arquivo for validado, clique em Importar.

Para atualizar sua configuração, em Business Manager:

  • Vá em Ferramentas > do comerciante Preferências > do site Preferências > personalizadas Contexto do comprador Ganchos preferências.
  • Atualize o campo Registro do cliente com uma configuração JSON. Insira o ID do cliente que você configurou na etapa 1 e as chaves de contexto do comprador que o cliente pode definir. Você pode inserir qualquer uma das chaves disponíveis no tipo ShopperContext. Para IDs de cliente que exigem permissões para definir todas as chaves de contexto do comprador, como o ID de cliente usado para o Storefront Preview, use a chave all.

Neste exemplo, definimos chaves de contexto do comprador para dois IDs de cliente diferentes.

  • As solicitações do ID aaaaaaaa-8536-4a39-acbb-8e7f1759f901 do cliente podem definir somente as 3 chaves especificadas no Contexto do comprador.
  • As solicitações do ID bbbbbbbb-b5e9-efbc-42f6-584f60fd54ff do cliente podem definir todas as chaves no Shopper Context.
  • Adicione este escopo do Contexto do comprador ao SLAS Private Client: sfcc.shopper-context.rw. Consulte Criar um cliente SLAS.

Nossa demonstração do Shopper Context usa o sourceCode conjunto por meio de um parâmetro de consulta para acionar alterações de conteúdo em um PLP e novas promoções para um grupo de clientes específico. Você pode ver a demonstração em ação em um PLP adicionando &sourcecode=instagram à URL.

Em nossa demonstração, utilizamos o useUpdateShopperContext gancho para acionar uma campanha de personalização. Em seu projeto, adicione ou remova parâmetros de consulta do SHOPPER_CONTEXT_SEARCH_PARAMS Shopper Context na constante in app/constants.js para obter suas próprias personalizações acionadas por parâmetros de consulta.

Por exemplo, se você adicionou atributos personalizados que deseja definir usando parâmetros de consulta, inclua-os como parâmetros de consulta personalizados no app/constants.js. Neste exemplo, adicionamos estes parâmetros: deviceType e storeId.

Opcionalmente, você pode adicionar personalização além do que está na Implementação de demonstração do contexto do comprador. Por exemplo, você pode personalizar o conteúdo com base na geolocalização de um comprador.

Neste código de exemplo, obtemos a geolocalização de um comprador. Depois de obter a geolocalização, você pode aplicar a personalização escolhida. Por exemplo:

  • Para Nova York, EUA: 20% de desconto em tops femininos.
  • Para Boston, EUA: 15% de desconto em tops femininos.

Esta seção fornece uma solução sugerida para um erro comum que você pode encontrar ao usar o Shopper Context.

Causa potencial: A personalização no Business Manager não está configurada corretamente.

Solução sugerida: Certifique-se de que o gatilho de contexto definido esteja atribuído a uma campanha de personalização no Business Manager.