Banners

O banner é uma ferramenta muito útil na hora de comunicar ou vender um determinado evento/produto/evento. Os banners serão vistos por qualquer usuário que entrar no site, sem a necessidade de assinatura prévia.

PASSO A PASSO

Entre no módulo HUB de Notificações
Selecione a guia Ações da Web
Selecione a opção Banners



A tela inicial mostra uma lista dos diferentes banners configurados na plataforma e algumas métricas.

Criar Banner

Selecione o botão Crie um novo, na tela inicial



Uma nova janela será aberta para personalizar o banner.

Contexto

Na coluna da esquerda estão as opções de configuração. À direita, a prévia do banner.

Configure o banner

Nome
É para uso interno da plataforma

Localização no local
Mais baixo
*Superior

Qualificação
É o título que será exibido no banner

Cor de fundo
É a cor que terá o fundo do banner

Tipografia
Selecione uma das opções oferecidas pela plataforma

Botão
Configure a legenda e as cores do botão que vai carregar o banner

URL de destino
É o site para o qual o botão irá redirecionar ao clicar no banner. Ao colar a url de destino, um utm será atribuído a ela para medir o desempenho da ferramenta. Você também pode configurar o utm, na opção Configurar (Parâmetros UTM para Google Analytics).

Dias e Horários
Selecione os dias e horas em que o banner será exibido (por padrão, ficará ativo o dia todo).

Com esta configuração você pode incluir mais de um banner na mesma página.

Widget é exibido em...
Selecione as páginas nas quais você exibirá o banner. Você pode escolher todas as páginas (padrão), algumas páginas específicas ou todas as páginas exceto algumas.

Dias até a próxima interação
Com esta opção, o banner deixará de ser exibido pelo número de dias especificado para os usuários que já interagiram com a peça.

Prefiro fazer upload de HTML
O HTML pode incluir o conteúdo que você quiser: desde uma simples imagem (que deve estar hospedada em um servidor), até uma estrutura complexa.

Não existe uma dimensão específica, depende exclusivamente do que você deseja gerar com base na sua estratégia e no seu próprio site.
Utilize este código HTML de referência para realizar sua configuração: Caso queira colocar o Banner na margem inferior, modifique a palavra “top” no HTML para “bottom”. “inferior: 5px”, para “superior: 5px”.

Clique no botão Salvar para finalizar

Os banners estarão visíveis a 100% do tráfego, independente do navegador ou sistema operacional utilizado pelo usuário.

Como posso personalizar ainda mais meu Banner?

Para acessar esta opção, vá até a seção de configurações do banner e procure a opção Prefiro Carregar html.



Lá você pode colar o código que criou para carregar seu próprio design de notificação personalizado.



Defina suas preferências
Dia e hora em que a notificação é exibida
As páginas onde você deseja que a notificação seja vista
Dias para a próxima interação

Sempre recomendamos o uso do template Icomm HTML para trabalhar com a mesma estrutura. O modelo Icomm já foi projetado para atender aos requisitos do banner, portanto, você pode ter certeza de que seu design se encaixará perfeitamente.

Copie este modelo de banner HTML da Icomm e use-o para criar seus designs personalizados:

<div class="wpn-banner wpn-banner-top" id="wpn-banner" style="box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.16);
        background-color: #0077ff !important;
        color: #FFFFFF !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        position: fixed;
        bottom: 5px;
        width: 80%;
        left: 10%;
        z-index: 9999;
        border-radius: 6px;
        padding: 25px;
        min-height: 60px;
        font-size: 20px;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <style>
        .wpn-banner-link:hover {
            text-decoration: none;
            color: #000b89 !important;
        }
        
        .wpn-banner-link {
            color: #FFFFFF !important;
        }
        
        .wpn-banner-top .wpn-banner-link-container {
            margin-left: 10px;
        }
        
        @media (max-width: 400px) {
            .wpn-banner-top {
                width: 90% !important;
                left: 5% !important;
                min-height: 160px !important;
            }
            .wpn-banner-top .wpn-banner-title,
            .wpn-banner-top .wpn-banner-link-container {
                width: 100% !important;
            }
            .wpn-banner-link {
                padding: 5px 40px !important;
            }
            .wpn-banner-bottom {
                min-height: 180px !important;
            }
            .wpn-banner-link-container {
                padding: 5px 0 !important;
                margin: 0 !important;
            }
            .wpn-banner-preview-powered svg {
                height: 13px !important;
            }
        }
        
        .wpn-close-container button.wpn-close-banner {
            color: #FFFFFF !important;
            border: none;
            background-color: transparent !important;
            position: absolute;
            top: 0;
            right: 7px;
            font-size: 30px;
            line-height: 30px;
            opacity: .4;
            text-shadow: 0 1px 0 #fff;
        }
        
        .wpn-close-container .wpn-close-banner:hover {
            text-decoration: none;
        }
    </style>
    <div class="wpn-close-container">
        <button type="button" class="wpn-close-banner" aria-label="Close" id="wpn-close-btn">
            <span aria-hidden="true">×</span>
        </button>
    </div>

    <div class="wpn-banner-title">
        Ofertas de último momento </div>

    <div class="wpn-banner-link-container">
    <a href="#nicokrasny" class="wpn-banner-link" id="wpn-banner-link" rel="nofollow" 'target="_blank">
        Ir a Ofertas
    </a>
</div>

Quanto ao código HTML, você tem total liberdade para incluir o conteúdo que quiser. Desde uma imagem simples (que deve ser hospedada em um servidor) até uma estrutura complexa, você pode fazer o que quiser com seu design. A dimensão específica dependerá exclusivamente do que você deseja gerar com base na estratégia do seu site.

Ative ou desative a função

Ative ou desative a chave que está no canto superior direito para ligar ou desligar a função.

Métricas

A plataforma Icomm oferece algumas métricas interessantes para cada campanha de banner. Eles podem ser visualizados na tela de login no Hub de Notificações ou na tela inicial de cada funcionalidade específica.

No caso de Banners, você pode ver as métricas Impressões e Cliques em forma de gráfico na tela inicial do Hub. Para fazer isso, entre no módulo Notifications Hub e role para baixo até encontrar o gráfico correspondente. Nesse caso, o gráfico mostrará as métricas gerais de todas as campanhas de banners ativadas na plataforma.

Métricas por campanha

Também é possível visualizar as métricas de cada uma das campanhas de banners acionadas na plataforma. Para isso, entre no Módulo Hub, role para baixo até encontrar o gráfico correspondente e selecione a opção Ver tudo. Você será redirecionado para a tela inicial da seção Banners, onde poderá visualizar as Impressões e Cliques de cada uma das campanhas.

Impressões: Mostra o número de vezes que o Banner é impresso.
Cliques: Porcentagem de cliques em relação às impressões do Banner.

Atualizado em: 28/06/2023