Anúncio Boo-Box Responsivo - Como se adaptar

Olá pessoal,

Adaptar! Sim. O método funciona sobre certas condições.

Hoje é dia é importante ter um site que se adapte em dispositivos móveis e telas menores, sendo assim, os anúncios também devem estar neles de forma correta. Aliás, nós estamos sempre querendo aqueles centavos no tão desejado clique.  Com os anúncios boo-box temos vários tamanhos de anúncios, mas que não adaptam seu tamanho automaticamente.

(Imagem: Créditos a Boo-box)

Obviamente a dica nessa forma apenas funciona para anúncios Boo-Box. Abaixo há um trecho de código alterado que carrega o anúncio correto de acordo com o tamanho da tela. O que pode-se chamar de uma certa "responsividade"

(Lembrando que entrei em contato com a Boo-box para checar se essa alteração infringe a cláusula de alteração de códigos de anúncio. A resposta foi não. Ótimo!)

<script type="text/javascript">
bb_bid = "XXXXXXXX";
bb_lang = "pt-BR";
bb_name = "custom";

if (window.innerWidth >= 810) {
bb_limit = "8"; //anúncio 768x90
bb_format = "bbb";
} 

if (window.innerWidth < 810) {
bb_limit = "6"; //anúncio 300x250
bb_format = "bbn";
} 
</script>

<script type="text/javascript" src="http://static.boo-box.com/javascripts/embed.js"></script>

Ou seja, se o tamanho horizontal da janela for maior que 810 pixels, o anúncio 768x90 é exibido. Se for menos que 810, o anúncio de 300x250 será carregado. Veja o exemplo no rodapé do site e em um smartphone de 4.7 polegadas, ambos com o mesmo código:

Observações:
1. O atributo "innerWidth"  conta os pixels na horizontal, desconsiderando a barra de rolagem, e retorna um inteiro. Mais sobre "innerWidth" no w3schools clicando aqui;

2. O valor de 810 pixels foi escolhido como um valor de segurança para desconsiderar o tamanho da barra e possíveis margens em seu site. Até porquê um anúncio parcialmente coberto não é computado. Outro fator é que o código acima possui dois dos tamanhos de anúncios mais comuns;

3. Lembre-se de colocar o seu "bb_bid", substituindo XXXXXXXX, por seu número único;

4. A decisão de qual anúncio exibir é feita no momento que a página é carregada. Esse método não contempla mudanças após o carregamento do anúncio;

5. Não confunda a não exibição do anúncio com a limitação de dispositivos móveis com anúncios animados em flash.

Para concluir: É uma solução paliativa, mas simples, que é uma alternativa para usufruir ao máximo dos anúncios Boo-Box.