Implementação de Containers em Lojas React

Setup - React2 minAtualizado em 09/03/2026

Visão geral

Os menus e nomes podem variar conforme a versão da sua loja e do painel. Se algo estiver diferente, use a busca da Central Técnica ou fale com o suporte Performa.

Para garantir o correto funcionamento das vitrines de recomendação em e-commerces desenvolvidos com a linguagem de programação React, é necessário realizar a inclusão prévia dos containers correspondentes a cada vitrine que será exibida no site.

Esses containers atuam como pontos de renderização na interface, permitindo que o sistema identifique a posição correta dentro da página para carregar dinamicamente os produtos recomendados. Sem essa estrutura previamente definida no código da aplicação, as vitrines não conseguirão ser exibidas corretamente.

Dessa forma, para viabilizar a implementação e assegurar o carregamento adequado das recomendações, é necessário inserir no código da aplicação os containers listados abaixo, respeitando as páginas e posições recomendadas para cada vitrine instalada no site.

Coluna 1Container
Coluna 2Página
Coluna 3Tipo de Recomendação
Coluna 4Título
Coluna 5Posição Recomendada
Coluna 1performa-emptysearch1
Coluna 2Página sem resultado de busca
Coluna 3Recomendação de produtos relacionados ao termo pesquisado pelo usuário.
Coluna 4O que você procura está aqui?
Coluna 5Primeiro elemento da página
Coluna 1performa-emptysearch2
Coluna 2Página sem resultado de busca
Coluna 3Recomendações personalizadas com base no histórico de navegação do cliente. Disponível após o usuário acessar ao menos uma página de produto.
Coluna 4Recomendações para você
Coluna 5Segundo elemento da página
Coluna 1performa-emptysearch3
Coluna 2Página sem resultado de busca
Coluna 3Exibição dos produtos mais vendidos nos últimos 30 dias.
Coluna 4Os mais vendidos
Coluna 5Terceiro elemento da página
Coluna 1performa-homep1
Coluna 2Home
Coluna 3Recomendações personalizadas baseadas no histórico de navegação do cliente. Disponível após o usuário acessar ao menos uma página de produto.
Coluna 4Recomendações para você
Coluna 5Abaixo do primeiro banner
Coluna 1performa-homep2
Coluna 2Home
Coluna 3Exibe os produtos mais clicados do site, considerando o maior volume de interações.
Coluna 4O que os outros estão vendo
Coluna 5Abaixo do segundo banner
Coluna 1performa-product1
Coluna 2Produto
Coluna 3Exibe os produtos mais clicados do site, considerando o maior volume de interações.
Coluna 4O que os outros estão vendo
Coluna 5Abaixo da descrição do produto
Coluna 1performa-product2
Coluna 2Produto
Coluna 3Power Infinity – Vitrine de recomendação infinita. Ordem de exibição: produtos similares ao item visualizado → mais vendidos → mais clicados → todos os produtos em estoque.
Coluna 4Você precisa ver esses produtos
Coluna 5Último elemento da página, acima do rodapé institucional
Coluna 1performa-category1
Coluna 2Categoria
Coluna 3Recomenda os produtos mais vendidos da categoria acessada. Disponível apenas se o XML enviar corretamente as informações de categoria. Indicado para categorias com grande volume de produtos.
Coluna 4Os melhores produtos
Coluna 5Primeiro elemento da página, abaixo dos filtros
Coluna 1performa-category2
Coluna 2Categoria
Coluna 3Exibe os produtos mais vendidos de todo o site.
Coluna 4Os mais vendidos
Coluna 5Final da página, após a listagem de produtos da categoria
Coluna 1performa-emptycart-1
Coluna 2Carrinho vazio
Coluna 3Recomendações personalizadas com base no histórico de navegação do cliente. Disponível após o usuário acessar ao menos uma página de produto.
Coluna 4Recomendações para você
Coluna 5Primeiro elemento da página
Coluna 1performa-emptycart-2
Coluna 2Carrinho vazio
Coluna 3Exibe os produtos mais vendidos de todo o site.
Coluna 4Os mais vendidos
Coluna 5Segundo elemento da página
Coluna 1performa-error1
Coluna 2Página 404
Coluna 3Exibe os produtos mais vendidos de todo o site.
Coluna 4Os mais vendidos
Coluna 5Primeiro elemento da página

Checklist de validação

  1. 1Confirmar que não existe script duplicado da Performa na mesma página.
  2. 2Verificar se não há bloqueio de CSP/CORS ou conflito com script de terceiro.
  3. 3Executar um teste funcional completo em aba anônima para evitar cache/localStorage.
  4. 4Conferir no dashboard se os eventos/indicadores começaram a aparecer como esperado.
  5. 5Comparar métricas após 7 dias para medir impacto real da mudança.

Próximos passos recomendados

  1. 1Conectar tracking e conversão para validar impacto da integração em receita.
  2. 2Padronizar esse setup nos demais ambientes/lojas da operação.
  3. 3Registrar um playbook interno com os pontos que exigem atenção na sua plataforma.

Para vitrines na versão atual, priorize revisão de posição, inteligência ativa e dados de conversão assistida após a publicação.

Insight de operação: faça primeiro em uma loja/ambiente de menor risco, valide coleta de dados e só depois replique em toda a operação.

Perguntas frequentes

O que este artigo sobre Implementação de Containers em Lojas React ajuda a resolver?

Para garantir o correto funcionamento das vitrines de recomendação em e-commerces desenvolvidos com a linguagem de programação React, é necessário realizar a...

Como validar se Implementação de Containers em Lojas React foi aplicado corretamente?

Confirmar que não existe script duplicado da Performa na mesma página. Verificar se não há bloqueio de CSP/CORS ou conflito com script de terceiro. Executar um teste funcional completo em aba anônima para evitar cache/localStorage.

Onde este tema se encaixa na Central de Ajuda da Performa.AI?

Este conteúdo pertence à categoria INTEGRAÇÕES e faz parte do cluster de suporte técnico da Performa.AI para instalação, configuração, operação e otimização dos produtos.

Este artigo foi útil?