StickyFoot: javascript para exibição de anúncios no rodapé da página

Disponibiliza uma área para exibição de anúncios com opção de fechar e esconde-los e também de voltar a exibi-los(minimizar, maximizar). O script oferece a opção de iniciação retardada, é possível definir um tempo de espera antes da exibição. Também é possível definir o tempo para automaticamente reabrir a caixa de exibição e se esta abertura deve ser feita mesmo se o usuário não mudar de página.

Similar ao anchor ads do google adsense porém oferece maior personalização, permitindo configurá-lo de forma a não incomodar o visitante e ao mesmo tempo permite forçar a reexibição no tempo desejado.

O script foi desenvolvido pensando em anúncios mas nada impede de utilizá-lo para outros fins, como exibir uma notificação.

Este é o mesmo script usado neste site para exibição de anúncios no rodapé da página.

Download

Faça o download dos arquivos.

Download  

Carregando

Carregue o css e o javascript no site.

HTML

<link rel='stylesheet' type='text/css' href='/caminho/para/css/stickyfoot.min.css'>
<script src='/caminho/para/js/stickyfoot.min.js'></script>

Iniciando

Colque as <div> containers abaixo no código HMTL, os anúncios devem ser inseridos dentro destas <div>. A posição delas no HTML não é importante já que sua posição é fixa, porém devem preceder o código javascript que inicia o script.

HTML

<div class='wabi-stickyfoot-container'>
   <div class='stickyfoot'>
      // Seu anúncio aqui
   </div>
</div>

Após o carregamento do javascript principal e das <div> HTML, inicie o script.

JavaScript

const myStickyFoot = new wabiStickyFoot({
   expire: 15, // minutos
   reopen: true,
   delay: 1 // minutos
});

Esta inicialização define que o anúncio será exibido somente um minuto após o site ser carregado e que se o usuário fechar o anúncio o mesmo será reexibido novamente após 15 minutos, mesmo que ele não mude de página.

Considerações

O tempo é tratado em minutos no script. Para configurar em segundos use frações, alguns exemplos:

• .5: 30 segundos
• .1: 6 segundos
• .05: 3 segundos

 

No css é definida a altura da caixa de exibição de anúncios como 120px. Para utilizar um anúncio do adsense com esta mesma altura é preciso criá-lo com dimensões fixas, usar anúncios responsivos alterará a altura da caixa de exibição. Mesmo usando dimensões fixas, se a largura definida no anúncio for maior do que a disponível na tela do visitante, o adsense irá usar anúncios responsivos, o que alterará a altura da caixa de exibição.

Felizmente estas alterações de dimensões são corrigidas por este javascript que redimensiona a altura da caixa de exibição e a reposiciona de acordo.

Checar se existe

É uma boa pratica checar se a <div> utilizada pelo script existe antes de iniciá-lo, assim o código pode estar em páginas em que as <div> container não existe sem gerar erro.

JavaScript

const stickyFootContainer = document.querySelector('.wabi-stickyfoot-container');
if (typeof stickyFootContainer != 'undefined'
   && stickyFootContainer != null ) {
   const myStickyFoot = new wabiStickyFoot({
      expire: 15, // minutos
      reopen: true,
      delay: 1 // minutos 
   });
}