02 of fevereiro de 2015

Como adaptar o inventário da boo-box em sites Responsivos

Pimp your blog Postado por

O Publisher Luiz Felipe Vilela do site Ainda Dá Tempo nos enviou um email com uma dica muito legal para adaptar seu script da boo-box em sites responsivos. Se você não sabe como adequar o seu site para mobile, veja este post.

Normalmente indicamos que o Publisher utilize um inventário no tamanho 300×250, pois além de ser o formato mais procurado pelos anunciantes e ter uma variedade maior de campanhas disponíveis, dificilmente uma tela será menor que esse formato. Mas, se você entende um pouquinho de CSS e HTML vai gostar dessa dica. Depois de seguir este tutorial, seu site vai exibir um tamanho de banner diferente de acordo com o tamanho da tela de cada sessão.

 

Primeiro, vá no seu painel de Publisher e pegue seu código de inventário.
Não sabe como pegar o código? Clique aqui e veja em nosso tutorial

criar-inventário

A estrutura do código é a seguinte:

<script type=”text/javascript”>
bb_bid = “XXXXXXX”;
bb_lang = “pt-BR”;
bb_name = “custom”;
bb_limit = “8”;
bb_format = “bbb”;
</script>
<script type=”text/javascript” src=”http://static.boo-box.com/javascripts/embed.js”></script>

 

Para adaptar seu código, divida-o em suas partes:

<script type=”text/javascript”>
bb_bid = “XXXXXXX”;
bb_lang = “pt-BR”;
bb_name = “custom”;
———DIVISÃO——–
bb_limit = “8”;
bb_format = “bbb”;
</script>
<script type=”text/javascript” src=”http://static.boo-box.com/javascripts/embed.js”></script>

 

Essa primeira parte, que pintamos de laranja, vai ficar exatamente igual. É na segunda parte do script que vamos modificar um pouco adicionando elementos que diferem o layout pelo tamanho da tela em que o blog/site for acessado com CSS.

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

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

if (window.innerWidth < 810) {
bb_limit = "6"; //anúncio 300×250
bb_format = "bbn";
}
</script>
<script type="text/javascript" src="http://static.boo-box.com/javascripts/embed.js"></script>

adicionando banner boo-box em site responsivo

 

Viram como a dica é simples?

O que fizemos aqui foi definir que o 728×90 seja carregado quando a tela for maior ou igual a 810 pixels, e caso ela seja menor, irá carregar um 300×250.

 

Algumas observações que o próprio Luiz Felipe ressaltou e que queremos enfatizar são:

1) O valor de 810 pixels foi escolhido como um valor de segurança para o layout do site dele. Verifique qual a necessidade real em pixels na horizontal do seu site e adeque o tamanho se necessário.

2) Ele escolheu para o exemplo, dois dos formatos mais recomendados pela boo-box, o 728×90 e 300×250, mas você pode adaptar o script de acordo com a sua necessidade. Para isso, na tela de criar inventário, escolha outros formatos e copie o final deles. Exemplo: limit=”6″ format=”bbn” é o 300×250; limit=”8″ format=”bbb” é o 728×90;  limit=”10″ format=”bbi” é o 160×600 e por aí vai.

3) Lembre-se que na parte escrito “bb_bid = “XXXXXXX” você deve adicionar o número que aparece na caixa de criar inventário. Esse número é único para cada Publisher e é essencial para contabilizar seus ganhos.

4) O anúncio exibido é determinado no momento em que o visitante abre o seu site. Ele não mudará caso o visitante altere o formato da tela durante a mesma sessão.

5) Se você não tem familiaridade com CSS, recomendamos que utilize apenas o banner no formato 300×250 em seu site.

 

Ele fez um post sobre o assunto no site dele, também! Clique aqui para ver.

E você? Tem alguma dica legal que possa ajudar outros Publishers?
Envie para nós!