Os selos de campanha são uma ferramenta útil para sites de e-commerce para aumentar a visibilidade de produtos ou promoções específicos, criando um senso de urgência ou empolgação e incentivando os visitantes e realizar uma compra.
A Dynamic Yield oferece dois modelos de código personalizado para aplicação de selos (badging) que permitem a você adicionar selos automaticamente aos produtos nas páginas de categorias e nos resultados de pesquisas:
-
Selos na PLP baseados em recomendações: aplique selos nos produtos com base em estratégias de recomendação, como Affinity (Afinidade) ou Recently Viewed (Vistos Recentemente).
Por exemplo: "Selecionados para você" ou "Porque você se interessou em camping" -
Selos na PLP baseados em prova social: aplique selos nos produtos com base em desempenho (prova social).
Por exemplo: "Mais vendidos" ou "Mais de 1000 unidades vendidas"
Para usar os modelos, realize os passos a seguir.
1º passo: defina os seletores de CSS para os cards e as imagens dos produtos
Defina o seletor para os cards dos produtos
O seletor de HTML retorna uma lista com todos os cards de produtos na sua página de categoria. Para definir o seletor, inspecione um dos cards de produtos e acesse o contêiner do topo do card. Você também pode usar a caixa azul como guia visual: quando a caixa azul realça o card de produto inteiro, você está no contêiner certo. Escolha um seletor que identifique facilmente todos os cards de produtos na sua página de categoria.
Se estiver usando uma classe como seletor, lembre-se de não usar uma classe dinâmica que mude em cada página. Se esse for o caso, opte por outro seletor que não seja dinâmico.
Exemplos:
DY Demo Shop › selector › class name › .col-sm-12
Data Attributes as selectors › selector › attribute › [data-automation=”product-grid-item”]
Validar o seletor
Você pode verificar se o seletor retorna produtos na sua página de categoria inserindo sua classe no trecho de código a seguir e colando-o no console.
Este código retorna uma lista de cards de produtos:
document.querySelectorAll('example_ProductCard_Selector')Este código retorna o primeiro card de produto:
document.querySelectorAll('example_ProductCard_Selector')[0] Definir o seletor de imagens
Defina o seletor de CSS para o contêiner da imagem dentro do contêiner do card de produto. Ele é o seletor do contêiner que inclui a tag <img>, não o seletor da própria tag <img>.
Observação:
- Exemplos de contêineres válidos: <div>, <article>, <figure>
- Exemplos de contêineres inválidos: <a>, <img>
Validar o seletor:
Confirme que o seletor que você definiu retorna a imagem do primeiro produto na sua página de categoria inserindo seus seletores no trecho de código a seguir e colando-o no console.
Este código retorna a imagem do primeiro card de produto:
document.querySelectorAll('example_ProductCard_Selector')[0].querySelector('example_productImage_Selector')2º passo: defina a localização do SKU
Há dois métodos para definir a localização do SKU:
1ª opção: usando os atributos de dados (recomendado)
O modelo pronto para usar foi desenvolvido para clientes que têm SKUs como atributo de dados nos cards de produtos. Defina o nome do atributo de dados que contém o SKU do produto. O atributo de dados pode ter diferentes nomes, mas deve ser facilmente identificável como um SKU. Você pode confirmar isso verificando seu feed de produtos na Dynamic Field para identificar o valor correspondente e se certificar de que o SKU retorna as informações esperadas do produto.
Validar a definição do atributo de dados:
Confirme que o nome do atributo de dados está correto inserindo o nome do seu atributo de dados no trecho de código a seguir e colando-o no console.
Este código retorna a SKU do primeiro card de produto:
document.querySelectorAll('example_ProductCard_Selector')[0].getAttribute('example_attribute_name')Exemplo:
DY Demo Shop › Attribute name = data-dy-sku
2ª opção: URL do produto
Se a 1ª opção não for possível e a URL do produto em cada cartão incluir o SKU do produto de maneira clara, use esta opção.
Os delimitadores precisam ser específicos. Por exemplo: product-id=SKU/ › product-id e /
Quando os delimitadores não forem específicos, a expressão regular não retorna o SKU.
Exemplo:
Delimitadores: “p/” e “”(string vazia)
URL: https://www.demoshop.net/de/p/90630584
Retornado: SKU 90630584
Exemplo com URL de produto e delimitadores que não funcionam:
Delimitadores: “-” e “Black”
URL do produto: https://www.demostore.com/eu/shop/edits/bestsellers/stride-waterproof-parka-SB4932_Black.html
Motivo: “-” é repetido várias vezes na URL, e “Black” é dinâmico e não funciona para todos os produtos. Os resultados possíveis nesse cenário são a operação não retornar nada ou retornar algo que não seja o SKU desejado.
Validar os delimitadores:
Você pode confirmar que seus delimitadores e o método usado funcionam incluindo os delimitadores e a classe Items (Itens) no trecho de código a seguir e colando-o no console na sua PLP.
Este código retorna o SKU:
const stringBefore = 'BEFORE_DELIMITER';
const stringAfter = 'AFTER_DELIMITER';
let regexSetup = stringAfter === '' ? '(' + stringBefore + ')(.*)(?=' + stringAfter + ')' : '(' + stringBefore + ')(.*?)(?=' + stringAfter + ')';
document.querySelectorAll('example_ProductCard_Selector')[0].querySelector('a').getAttribute('href').match(new RegExp(regexSetup, ''))[2]3ª opção: URL da imagem
Se a 1ª opção não for possível e a URL da imagem do produto em cada card contiver o SKU do produto de maneira clara, use esta opção.
Os delimitadores precisam ser específicos. Por exemplo, product-id=SKU/ › product-id e /
Quando os delimitadores não forem específicos, a expressão regular não retorna o SKU.
Exemplo:
Delimitadores: “img/p/” e “”(string vazia)
URL: https://static.demoshop.com/img/p/6104478-18029579-large.jpg
Retornado: SKU 6104478
Validar os delimitadores:
Você pode confirmar que seus delimitadores e o método usado funcionam incluindo os delimitadores e a classe Items (Itens) no trecho de código a seguir e colando-o no console na sua PLP.
Este código retorna o SKU:
const stringBefore = 'BEFORE_DELIMITER';
const stringAfter = 'AFTER_DELIMITER';
let regexSetup = stringAfter === '' ? '(' + stringBefore + ')(.*)(?=' + stringAfter + ')' : '(' + stringBefore + ')(.*?)(?=' + stringAfter + ')';
document.querySelectorAll('example_ProductCard_Selector')[0].querySelector('img').getAttribute('src').match(new RegExp(regexSetup, ''))[2]
Entendendo as configurações do delimitador de string para URLs
Se estiver usando a URL do produto ou a URL da imagem, você deve informar à Dynamic Yield onde procurar pelo SKU desejado. Por exemplo, se a URL for yourwebsite.com/product/123456/, você precisa definir onde o SKU começa e onde ele termina da seguinte forma:
- O ‘string delimiter before sku’ (delimitador da string antes do sku) nesse caso é qualquer coisa diretamente antes do próprio SKU, como ‘/product/’.
- O 'string delimiter after sku' (delimitador da string após o sku) seria qualquer coisa diretamente após SKU, como ‘/’.
Lembre-se de que esses delimitadores devem ser específicos. Se a URL contiver outras informações, como o nome do produto (yourwebsite.com/product/grey-mens-shorts-123456/), o delimitador não funcionará.
Você não precisa definir essas duas variáveis se estiver usando a opção de atributo de dados recomendada.
3º passo: defina sua lógica de aplicação de selos
Você pode aplicar selos com base em uma estratégia de recomendação ou desempenho de um produto:
- Estratégia de recomendação: selecione uma estratégia. Com base na resposta à recomendação, os produtos da página da categoria recebem um selo.
- Desempenho do produto: defina critérios de prova social. Os produtos que atenderem aos critérios recebem um selo.
4º passo: crie o design do selo
Use as ferramentas de design da sua preferência para criar o design de selos que atenda às suas necessidades.
Solução de problemas
Se você seguiu todos os passos corretamente e validou seu trabalho, mas ainda está com problemas com o seu caso de uso, é provável que o problema esteja em alguma parte fora do modelo.
Para selos de recomendações:
- Confirme que sua estratégia está realmente retornando os produtos na página direcionada e que os produtos na estratégia de recomendação existem na página.
- Se estiver usando popularidade como estratégia, em Category (Categoria), selecione Popular para ter uma chance maior de que os produtos recebam selos.
Para selos de prova social:
- Confirme que a API de Desempenho de Produtos esteja habilitada no seu site na Dynamic Yield (em General Settings (Configurações Gerais)).
- Verifique se a API de Desempenho de Produtos está realmente retornando dados.
Ainda tem alguma dúvida ou preocupação? Entre em contato com a equipe da sua conta.