Guia de introdução às recomendações de produtos no site

O que você vai aprender

Saiba como adicionar um bloco de recomendações de produtos personalizado diretamente às páginas de detalhes do produto (PDPs), estendendo a personalização no site do Klaviyo além do drawer do Klaviyo Customer Hub. Este guia aborda o que o bloco incorporado faz, como configurar e criar o design dele, como o recurso está sendo lançado ao longo do tempo e os trade-offs técnicos por trás da implementação.

As recomendações de produtos incorporadas são, por design, agnósticas em relação à plataforma de e-commerce e, com o tempo, podem ser hospedadas em qualquer página do seu site, com foco inicial na PDP. Para dar feedback sobre esses recursos, entre em contato com a equipe de produto do Klaviyo Customer Hub.

Antes de começar

• Requisito: este bloco exige que o Klaviyo Customer Hub esteja ativado no Klaviyo.
• Suporte à plataforma: Disponível hoje no Shopify (como um bloco de app do tema), Shopify Plus (como um snippet de código incorporável) e Salesforce Commerce Cloud (somente suporte a SFRA). O suporte para outras plataformas está planejado.
• Dependência do mecanismo: A qualidade das recomendações é impulsionada pelo mecanismo de recomendações da Klaviyo. Estamos exibindo recomendações por meio do nosso serviço de recomendações de última geração — uma atualização do nosso sistema anterior, que não conseguia personalizar recomendações para visitantes anônimos.

Observação: anteriormente, as recomendações de produtos no site estavam disponíveis apenas na gaveta do Hub e somente para usuários conectados. Esse recurso traz as recomendações para fora da gaveta do Hub e para a PDP.

O que você pode fazer com recomendações de produtos incorporadas

O bloco de recomendações de produtos incorporado permite que você exiba produtos relevantes diretamente nas suas páginas de detalhes do produto, para que cada visitante — conhecido ou anônimo — veja algo relevante para ele.

• Combine com o estilo do seu site: personalize fontes, cores, layout e estilos de botão para que o bloco pareça uma parte nativa do seu tema. Adicione classes CSS personalizadas que segmentem todos os elementos do Klaviyo Customer Hub, todos os blocos incorporados ou, especificamente, o bloco de recomendações. Edite o cabeçalho do bloco (por exemplo, "Principais escolhas para você" ou "Talvez você também goste") e escolha um layout no estilo carrossel.
• Personalize recomendações para visitantes conhecidos: as recomendações se baseiam no que a Klaviyo sabe sobre um perfil, com tecnologia do serviço Next Gen Product Recommendations (NGPRS).
• Mostre algo para cada visitante: Por padrão, visitantes anônimos veem recomendações genéricas de produtos, extraídas da Shopify.
• Carregamento rápido sem prejudicar o desempenho da página: o bloco foi projetado para carregar rapidamente desde o início, sem sobrecarregar sua página com código extra — assim, ele não vai deixar seu site mais lento nem prejudicar suas pontuações de desempenho.
• Meça engajamento e receita: Cada clique é rastreado como um evento de Produto clicado e atribuído da mesma forma que um clique em um produto dentro da gaveta do Hub, para que você possa medir visualizações, cliques e receita atribuível.
• Mantenha a experiência consistente: visitantes conhecidos ou identificados podem ver as mesmas recomendações no painel do Hub e na PDP.
• Deixe os clientes salvarem produtos para depois: os clientes podem adicionar um produto recomendado aos favoritos diretamente do card ou ao carrinho se ainda não estiverem prontos para comprar.
• Evite recomendar o que já está no carrinho: Produtos que já estão no carrinho de um comprador são excluídos das recomendações mostradas para ele.

Crie um novo bloco de recomendações de produtos incorporado

Este é um novo bloco incorporável — configure da mesma forma que outros blocos incorporados, como Favoritos e Perguntas frequentes, em vez de pelo framework mais amplo de Blocos de Conteúdo de Personalização Incorporada.

1. Acesse a biblioteca de blocos:
   1. Navegue até Serviço > Klaviyo Customer Hub na navegação à esquerda do Klaviyo. Clique em Design > Blocos no site. Encontre Recomendações de produtos na biblioteca de blocos e adicione ao seu página de produto.
2. Configure sua fonte de recomendação:
   1. Escolha como as recomendações serão preenchidas e filtradas com base no estado do visitante:
      1. Visitantes com login e identificados: Klaviyo (padrão) ou Shopify.
      2. Visitantes anônimos: Shopify (padrão e, no momento, a única opção). Essa fonte também alimenta as recomendações do drawer do Hub para visitantes anônimos.
      3. Filtrar produtos fora de estoque: Ativar/desativar.
      4. Filtre os produtos que já estão no carrinho do comprador: Ative/desative.
3. Projete e personalize:
   1. Ajuste as configurações visuais para que o bloco pareça nativo do seu site:
      1. Elementos: Mostre ou oculte o preço (mostrado por padrão), os botões de favorito (mostrados por padrão), os botões de adicionar ao carrinho (ocultos por padrão) e a variante do produto (oculta por padrão).
      2. Botões: Escolha um estilo (arredondado, quadrado, curvo), cor, cor do texto e caixa do texto.
      3. Layout: Defina a largura máxima, o número máximo de produtos (1–10, padrão 4), o preenchimento (superior, esquerdo, direito, inferior) e as margens (entre o título e a linha de produtos e entre os produtos). Configure o tamanho da imagem (largura, altura) e o ajuste (cobrir, conter, preencher).
      4. Fontes: Selecione famílias e tamanhos para a fonte do cabeçalho, a fonte do nome do produto, a fonte do preço e a fonte da variante.
      5. CSS personalizado: Adicione classes para segmentar todos os elementos do Klaviyo Customer Hub, todos os blocos incorporados ou, especificamente, o bloco de recomendações.

4. Concluir configuração completa da plataforma:
   1. Instale o bloco no frontend da sua plataforma de e-commerce:
      1. Shopify: Adicione como um bloco de aplicativo pelo editor de temas.
      2. Shopify Plus: Adicione como um snippet de código (div) para lojistas que precisam de controle no nível do tema.
5. Publicar:
   1. Salve e publique suas alterações. O bloco aparecerá na sua PDP ao vivo de acordo com a fonte, os filtros e as configurações de design que você configurou.

Atribuição e análise de dados

• Cada clique em um produto recomendado é rastreado como um evento Clicked Product, extraído como "Bloco de recomendação de produto incorporado".
• Os cliques são atribuídos da mesma forma que um clique em um produto dentro da gaveta do Hub.
• O Klaviyo registra visualizações e cliques para que você possa acompanhar a adoção (contas com pelo menos um bloco de recomendações ativo), o engajamento (taxa de cliques (CTR), taxa de adicionar ao carrinho após um clique, favoritos) e a receita (receita atribuível por 1.000 impressões de bloco e participação de pedidos com um caminho de cliques assistido por recomendações).

Correspondência de estilo

Para corresponder ao seu tema atual, a abordagem ideal é fazer com que a Shopify renderize o bloco de produto em nome da Klaviyo. No entanto, a Shopify não renderiza blocos dentro da extensão de app da Klaviyo com o contexto do produto; por isso, em vez disso, criamos um novo bloco de seção que renderiza o bloco de produto.