Tutorial: AdSense responsivo

cicklow disse:

Antes de tudo, e sei que muitos comentarão que isso não é permitido nem nada, já que se modifica o código do AdSense, aviso:
Esta modificação é a ÚNICA PERMITIDA pelo AdSense para fazer com que seus banners funcionem de forma responsiva.



Junto ao seu conteúdo, os anúncios do AdSense podem ser ajustados a diferentes tamanhos de telas usando um fragmento de JavaScript muito simples. Para aproveitar o design adaptável, primeiro crie vários tamanhos de anúncios, por exemplo 728 x 90, 468 x 60 e 300 x 250. A seguir, implemente um fragmento “if-else” para publicar o tamanho de anúncio correto de acordo com o tamanho do dispositivo do usuário. Aqui mostramos um exemplo do código JavaScript relevante:

Se não quisermos criar um banner para cada tamanho de tela, o que poderemos fazer é usar o código antigo do AdSense. (Old AdSense Code Generator)

PHP:

<script type="text/javascript"><!--
google_ad_client = "pub-";
if(window.innerWidth >= 800){
 google_ad_width = 728;
 google_ad_height = 90;
 google_ad_format = "728x90_as";
}else if(window.innerWidth < 400){
 google_ad_width = 300;
 google_ad_height = 250;
 google_ad_format = "300x250_as";
}else{
 google_ad_width = 468;
 google_ad_height = 60;
 google_ad_format = "468x60_as";
}
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "FFFFFF";
google_color_text = "FFFFFF";
google_color_url = "FFFFFF";
google_ui_features = "rc:0";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Para obter recursos adicionais sobre o valor da tecnologia para celulares, testar seu site e encontrar desenvolvedores que ajudem você a criar seu site otimizado para celulares, visite O seu site está adaptado para celular?

Abraços!

Fonte: Como usar o AdSense com um design adaptável - Dentro do AdSense

PS: isso é para evitar que os banners de 728 desconfigurem o design nos dispositivos móveis ou tablets... já que os banners de 300x250 e os 468x90 não desconfiguram o design, são os banners que se adaptam automaticamente à tela.

Clique para expandir...

nicorto disse:

Uma consulta, cicklow, é necessário criar o anúncio no código antigo? Ou basta colocar o pub-? Abraços e obrigado :encouragement:

Clique para expandir...

cicklow disse:

pode usar o código novo, mas terá que criar um banner de cada tamanho.

Clique para expandir...

nicorto disse:

não, refiro-me a esse código que você coloca
google_ad_client = "pub-";
if(window.innerWidth >= 800){
google_ad_width = 728;

bastaria colocar o pub- do editor?

Clique para expandir...

cicklow disse:

Antes de mais nada, e sei que muitos comentarão que isso não é permitido nem nada, já que se modifica o código do AdSense, aviso a vocês:
Esta modificação é a ÚNICA PERMITIDA pelo AdSense para fazer com que seus banners funcionem de forma responsiva.



Junto ao seu conteúdo, os anúncios do AdSense podem ser ajustados a diferentes tamanhos de telas usando um fragmento de JavaScript muito simples. Para aproveitar o design adaptável, primeiro crie vários tamanhos de anúncios, por exemplo 728 x 90, 468 x 60 e 300 x 250. A seguir, implemente um fragmento “if-else” para publicar o tamanho de anúncio correto de acordo com o tamanho do dispositivo do usuário. Aqui mostramos um exemplo do código JavaScript relevante:

Se não quisermos criar um banner para cada tamanho de tela, o que poderemos fazer é usar o código antigo do AdSense. (Old AdSense Code Generator)

PHP:

<script type="text/javascript"><!--
google_ad_client = "pub-";
if(window.innerWidth >= 800){
 google_ad_width = 728;
 google_ad_height = 90;
 google_ad_format = "728x90_as";
}else if(window.innerWidth < 400){
 google_ad_width = 300;
 google_ad_height = 250;
 google_ad_format = "300x250_as";
}else{
 google_ad_width = 468;
 google_ad_height = 60;
 google_ad_format = "468x60_as";
}
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "FFFFFF";
google_color_text = "FFFFFF";
google_color_url = "FFFFFF";
google_ui_features = "rc:0";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Para obter recursos adicionais sobre o valor da tecnologia para dispositivos móveis, testar seu site e encontrar desenvolvedores que te ajudem a criar seu site otimizado para dispositivos móveis, visite ¿Está tu web adaptada al móvil?

Abraços!

Fonte: Cómo usar AdSense con un diseño adaptable - Dentro de AdSense

PS: isso é para evitar que os banners de 728 desconfigurem o design em dispositivos móveis ou tablets... já que os banners de 300x250 e os 468x90 não desconfiguram o design, são os banners que se adaptam automaticamente à tela.

Clique para expandir...

<style>
.adsbygoogle { width:336px; height:280px } media(min-width: 500px) { .adsbygoogle { width: 320px; height: 50px; } } media(min-width: 800px) { .adsbygoogle { width: 300px; height: 250px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- banner responsive -->
<ins class="adsbygoogle"
     style="display:inline-block;"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Felipe disse:

Desculpe incomodar [MENTION=9679]cicklow[/MENTION], é que quanto mais procuro, mais confuso fico.
Ocorre que no meu template tenho um único bloco de anúncio de tamanho: 336x280 abaixo do título de cada artigo (single.php). Quando se acessa com um dispositivo móvel, este anúncio ocupa quase toda a tela e, como sabemos, isso não é permitido pelo AdSense...

Queria saber como transformar esse anúncio em um de 320x50 px quando se acessa com um iPhone ou tablet, por exemplo... É possível? Como devo fazer? Estou bastante perdido com isso, não tenho ideia de como fazer...

---------- Post adicionado em 18-jan-2014 hora: 13:04 ----------

[MENTION] cicklow[/MENTION] ficaria bom se eu fizer assim?

Inserir CODE, HTML ou PHP:

<style>
.adsbygoogle { width:336px; height:280px } media(min-width: 500px) { .adsbygoogle { width: 320px; height: 50px; } } media(min-width: 800px) { .adsbygoogle { width: 300px; height: 250px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- banner responsive -->
<ins class="adsbygoogle"
     style="display:inline-block;"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Clique para expandir...

cicklow disse:

é que você está usando o código novo dos anúncios, o AdSense permite criar anúncios adaptáveis a partir da sua conta sem se complicar tanto, você pode usar isso.

Clique para expandir...

Felipe disse:

Agora estou usando o código de um anúncio de 320 x 200 assíncrono, você diz que esse se adapta sozinho?.... o que acontece é que ele ocupa grande parte da metade superior da tela e não mostra o conteúdo ao usuário de dispositivo móvel... como o transformo em um de 320x50... talvez não seja possível e eu esteja incomodando xD

Clique para expandir...

cicklow disse:

quando você cria o banner na sua conta, ele pergunta qual tipo, o código antigo, o novo ou responsivo... você usa este último

Clique para expandir...

cicklow disse:

quando você cria o banner na sua conta ele pergunta que tipo, o código antigo, o novo ou responsivo... usa este último

Clique para expandir...

epsilo99 disse:

Olá, uma pergunta clcklow, isso serve para converter a lista de links de 728x15 para 200x90 por exemplo?

Obrigado!

Clique para expandir...