Widgets de recomendação no site
Um widget é um bloco de produtos pronto para o site: “Você também pode gostar” na página inicial, “Comprados juntos” na página do produto, “Vistos recentemente” no carrinho. Você o configura no OneTrace.pro e cola um código curto no site uma única vez. Depois disso, o tipo, o design e a ativação mudam sem editar o site.
Para funcionar, são necessários o rastreador instalado (Conexão do site), o catálogo de produtos e os eventos de visualização, carrinho e compra (Recomendações e catálogo de produtos). Criar e alterar widgets é permitido para “Proprietário”, “Administrador” e “Gerente”.
Como criar um widget
- Abra Engajamento → Site, aba Widgets.
- Clique em Criar widget.
- Preencha as configurações à esquerda; a pré-visualização aparece na hora à direita.
- Clique em Salvar.
Configurações
| Campo | O que define |
|---|---|
| Nome | nome do widget; visível apenas no painel administrativo |
| O que exibir | tipo de recomendação: Personalizados, Populares, Em alta, Vistos juntos, Comprados juntos, Semelhantes, Vistos recentemente |
| Categoria | para populares e em alta: id da categoria do catálogo; vazio significa o catálogo inteiro |
| Título | texto acima dos produtos, por exemplo “Você também pode gostar” |
| Disposição | Grade ou Carrossel com rolagem |
| Cards por linha | de 1 a 8 |
| Total de produtos | de 1 a 24 |
| Cor de destaque | cor do preço e do botão; sem ela, é usada a cor do texto do site |
| Arredondamento dos cantos | cantos das imagens e do botão, de 0 a 32 px |
| Botão | texto do botão, por exemplo “Saiba mais”; vazio significa sem botão |
| Mostrar preço | preço e preço antigo no card |
Pré-visualização
A pré-visualização desenha o widget exatamente como no site, com produtos reais do seu catálogo. Para “Vistos juntos” e tipos parecidos, é usado um exemplo: o primeiro produto disponível, cujo id aparece acima da pré-visualização. Se não houver produtos adequados, são exibidos espaços reservados cinza para você avaliar o design. O seletor Computador / Celular estreita a área para a largura de um celular.
No site, o layout se adapta à largura do espaço, e não da tela: em uma coluna estreita e no celular, os cards ficam dois por linha. A fonte e a cor do texto o widget herda do site.
Código para o site
Cada widget da lista tem o bloco Código para o site. Cole-o no modelo da página, no lugar em que o bloco deve aparecer:
<div data-cdp-widget="a1b2c3d4e5f6" data-item="SKU-1"></div>
Atributos:
data-item: id do produto da página ou dos produtos do carrinho, separados por vírgula:data-item="SKU-1,SKU-7". Obrigatório para os tipos “Vistos juntos”, “Comprados juntos” e “Semelhantes”; preencha-o a partir do modelo da página.data-category: id da categoria para produtos populares, se páginas diferentes precisarem de categorias diferentes.data-exclude: ids de produtos, separados por vírgula, que não devem ser exibidos, por exemplo os que já estão no carrinho.
Produtos personalizados e vistos recentemente são escolhidos com base no visitante, e não precisam de data-item.
Se não houver produtos adequados, o espaço na página fica vazio, sem quebrar o layout.
Ativação e desativação
O interruptor Exibir no site, no cartão do widget, desativa-o sem editar o site: o status muda para “Pausado”, e o bloco na página é limpo. Ative de novo, e os produtos voltam. O botão com a lixeira exclui o widget de vez: ele deixa de aparecer no site.
O botão com o lápis abre Editar widget. As alterações aparecem no site no próximo carregamento da página, sem mudar o código.
Estatísticas
Abaixo do nome do widget ficam as estatísticas de 30 dias:
| Indicador | Como é calculado |
|---|---|
| Impressões | o widget entrou no campo de visão do visitante pelo menos pela metade. Carregar a página sem rolar até o bloco não conta, então o CTR de um widget no fim da página é fiel |
| Cliques | cliques nos cards dos produtos |
| CTR | cliques divididos pelas impressões |
| Compras | compras do produto pelo mesmo cliente em até 7 dias após o clique nele |
| Receita | o valor dessas compras |
O efeito geral das recomendações no site, por tipo, está na seção Recomendações.
Sites de página única
O rastreador encontra os widgets sozinho depois do carregamento da página, quando surgem novos elementos e quando o data-item muda. Por isso, em sites com React, Vue e similares, basta alterar o atributo, e o bloco é redesenhado.
Se for preciso atualizar os produtos sem mudar os atributos, por exemplo depois de uma alteração no carrinho, chame:
cdp.widgets({ force: true });
Código próprio em vez de widget
Os desenvolvedores podem exibir um bloco de recomendações a partir do código, sem configurar nada no painel administrativo:
window.addEventListener('load', () => {
cdp.renderRecommendations('#recs', {
type: 'viewed_with', item: 'SKU-1', title: 'Vistos juntos', layout: 'carousel', columns: 4,
});
});
O bloco tem a mesma aparência de um widget, e as impressões e os cliques são contabilizados automaticamente. Você pode chamá-lo antes do carregamento do rastreador: a chamada espera na fila. O elemento já precisa estar na página; por isso o exemplo espera o evento load. Troque o title pelo texto que quiser exibir. Um resultado vazio limpa o elemento. Cor, arredondamento e botão são mais fáceis de configurar no widget do painel administrativo.