Banners de publicidade

Os banners de publicidade são uma forma comum de usar para fazer propagandas para divulgação ou chamar a atenção do visitante para alguma informação. É criado para atrair um usuário a um site ou página específica da loja virtual através de um link.

Como ter acesso às novas configurações de banners de publicidade

Desde a atualização da plataforma (versão 4.26.84), o posicionamento dos banners começou a permitir o uso de TAGs. 

A tag poderá ser definida de forma customizada ou utilizando as pré-definidas de acordo com as posições dos banners.

Na listagem de banners, teremos a nova coluna relacionada às TAGs e também a possibilidade de filtragem por meio de TAGs, que irei explicar neste tutorial.

Antes de começar a gerenciar os seus banners de publicidade, é preciso ter um arquivo específico em sua loja virtual. Para isso, siga o seguinte tutorial:

Antes de começarmos é importante lembrar que toda a edição de banners é via código HTML. Você não deverá ter dificuldade em realizar as edições se seguir todos os passos deste tutorial. Entretanto, caso haja dúvidas, não hesite em entrar em contato com nosso setor de suporte.

Se o template da sua loja virtual é algum destes:

  • Boutique;
  • Secret;
  • Calçados;
  • Geek;
  • Magazine.

Acesse o painel administrativo da sua loja virtual e clique em “Layout >> Definir CSS (Folha de Estilos)”.

Cole o seguinte código na primeira linha da box “Global”:

@import url(‘https://cdn.iset.io/assets/54939/arquivos/css/banners_geral.css’);

Depois clique em “Salvar alterações”.

Se o template da sua loja virtual é algum destes:

  • Ranger;
  • Changeman;
  • Flashman;
  • Maskman;
  • Cybercop;
  • Loja Engrenada.

Acesse o painel administrativo da sua loja virtual e clique em “Layout >> Definir CSS (Folha de Estilos)”.

Cole o seguinte código na primeira linha da box “Global”:

@import url(‘https://cdn.iset.io/assets/54015/arquivos/css/banner_geral_boots3.css’);

Depois clique em “Salvar alterações”.

Como gerenciar os banners de publicidade

Para gerenciar os banners de publicidade da sua loja virtual, acesse o painel administrativo da sua loja virtual e clique em “Ferramentas >> Banners >> Publicidade”.

Nesse painel você verá a lista de banners existentes e em frente a cada banner existem algumas possíveis ações a serem realizadas. 

Na lista de banners, em “Grupos”, você pode ver o grupo de banners que foi filtrado.

Em “Marcações”, é possível ver as tags do banners, que irei explicar detalhadamente mais a frente neste tutorial.

Em “Cliques”, você pode ver o número de cliques que o banners possui.

Em “Vencimento” e “Agendado para”, é possível ver as datas configuradas para o banner.

Em “Status”, o sinal verde significa que o banner está ativo e o vermelho significa que ele foi desativado.

Em “Ações”, você pode editar (clicando no lápis amarelo), excluir (clicando no botão vermelho) e ver as estatísticas do banner (clicando no botão branco).

Adicionar um novo banner

Para adicionar um banner, clique na opção “+ Novo banner” disponível na tela de listagem dos banners. 

Após clicar em novo banner defina as configurações do banner através dos campos abaixo:

  • Título do banner: defina o título do banner;
  • Grupo do banner: utilizado apenas para categorização do registro. É possível selecionar uma opção existente ou criar uma nova.

No modo simples, configure:

  • Endereço do banner: endereço para o qual o cliente será direcionado ao clicar no banner;
  • Abrir em: modo em que o link do banner será aberto (na mesma janela ou em uma nova);
  • Imagem: clique no espaço em branco para escolher a imagem;
  • Imagem de fundo: clique no espaço em branco e selecione a imagem de fundo do banner, caso a imagem anterior não tenha fundo;
  • Largura do Banner: preencha com a largura do banner em pixels ou %;
  • Altura do Banner: preencha com a altura do banner em pixels ou %;

No modo HTML, você poderá inserir um código em HTML para colocar um banner em flash ou pop up em sua loja. Caso use este campo, os campos referentes à imagem e links informados serão desconsiderados.

No modo Carrossel, você pode definir imagens e/ou vídeos para exibição no banner que será mostrado no estilo carrossel, podendo também ser totalmente customizado via CSS.

Para adicionar as imagens, clique em “Adicionar imagem” ou jogue a imagem no espaço embaixo.

Depois disso, configure as seguintes opções:

  • Reprodução automática: defina se deseja que a reprodução do banner rotativo deve ser automática ou não;
  • Loop infinito: duplica a última e a primeira imagem dando a impressão de loop infinito;
  • Setas de navegação: exibe os botões de navegação esquerda/direita no banner;
  • Pontos de navegação: exibe os botões de navegação;
  • Itens visíveis: número de imagens visíveis ao mesmo tempo no banner;
  • Tempo de transição: tempo de espera (em segundos) para transação de uma imagem para outra no banner;
  • Velocidade de transição: define a velocidade do efeito de transição (em milisegundos) de uma imagem para outra;
  • Animação de entrada: selecione a opção de animação de entrada;
  • Animação de saída: selecione a opção de animação de saída.

Outras configurações:

  • Programado para”: se uma programação foi definida, o banner será ativado na data informada. Todos os banners programados são marcados como desativados até que a data informada tenha chegado e então serão marcados automaticamente como ativos;
  • Expira em”: se não desejar que o banner expire automaticamente em uma data específica, deixe o campo em branco;
  • Categorias”: você pode selecionar em qual categoria o banner deverá ser exibido;
  • Posicionamento do Banner”: define o posicionamento na tela do banner;
  • Tags/Keywords”: se quiser, é possível criar tags para os seus banners. Porém, a principal função das tags é selecionar onde o banner irá aparecer na loja virtual.

Após terminar as configurações você pode clicar em “Inserir”. Se estiver editando um banner, clique em “Salvar & manter edição” ou “Atualizar”.

As Tags/Keywords

Para usar as configurações dos banners da melhor maneira possível é preciso entender um pouco como as tags funcionam!

  • Billboard: essa tag é usada para banners posicionados abaixo do cabeçalho da loja virtual, em qualquer página, como páginas de produtos ou categorias;

  • Billboard_home: essa tag é usada para banners posicionados abaixo do cabeçalho da loja virtual, assim como na tag Billboard. Porém, o banner só será exibido na página inicial da loja virtual;

  • Web: essa tag é usada apenas para banners posicionados abaixo do cabeçalho da loja virtual. Usando esta tag, é possível exibir o banner apenas para tablets, desktop, etc. Caso a loja seja acessada por um aparelho com a tela menor que a tela de um tablet, o banner é desativado;

  • Mobile: essa tag é usada apenas para banners posicionados abaixo do cabeçalho da loja virtual. Usando esta tag, é possível exibir o banner apenas em telas pequenas, como as de celulares. Caso a loja seja acessada por um aparelho com a tela maior que a tela de um celular, o banner é desativado;

  • Center_top: essa tag exibe o banner abaixo do cabeçalho da loja virtual e entre as colunas laterais;

  • Center_bottom: essa tag exibe o banner acima do rodapé da loja virtual e entre as colunas laterais;

  • Mini_banner_rodape: essa tag é muito importante para o bom funcionamento dos mini banners do rodapé;

  • Mini_banner_topo: essa tag é muito importante para o bom funcionamento dos mini banners do topo;

  • Footer: essa tag exibe o banner acima do rodapé da loja virtual e embaixo das colunas laterais, fora das estrutura da loja;

  • Banner_off: usando essa tag, é possível deixar de exibir o banner apenas para telas pequenas, como celulares.

Este tutorial faz parte do changelog versão 4.26.84.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *