Tutorial: AdSense responsivo

  • Autor Autor Cicklow
  • Data de início Data de início
Este tópico foi traduzido automaticamente do espanhol. Ver original
Cicklow

Cicklow

Admin
Dseda
Verificado
Verificación en dos pasos activada
Suscripción a IA
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:
Esta modificação é a ÚNICA PERMITIDA pelo AdSense para fazer com que seus banners funcionem de forma responsiva.

O design adaptável é uma técnica de design de sites que permite criar um site individual que se adaptará ao dispositivo a partir do qual é visualizado: notebook, smartphone ou tablet. Um site com design adaptável muda automaticamente seu tamanho para os diferentes dispositivos, mas é você quem deve decidir qual conteúdo importa mais para o usuário de celular.

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 segundo o tamanho do dispositivo do usuário. Aqui mostramos um exemplo do código JavaScript relevante:

9e24ef17eb475b8892379a6b023e915b.png


Se não quisermos criar um banner para cada tamanho de tela, o que poderemos fazer é usar o velho código 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 te ajudem a criar seu site otimizado para celulares, visite ¿Está tu web adaptada al móvil?

Abraços!

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

PS: isto é 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.
 
Última edição:
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Obrigado pela super contribuição 🙄
uma pergunta, isso só serve se meu site não for responsivo?

porque meu site é responsivo, precisarei fazer isso nos códigos do AdSense?

Abraços
 
Obrigado pela super contribuição 🙄
uma pergunta, isso só serve se meu site não for responsivo?

porque meu site é responsivo, precisarei fazer isso nos códigos do AdSense?

Abraços

estes códigos são para os sites responsivos... XD o que isto faz é que o banner de 728 desconfigure o design, já que não se adapta à tela como os de 300x250 e os de 480x60.. é só se você tiver esse tipo de banners.
 
Obrigado cara, parabéns!... Nossa, atualmente estava procurando a forma de fazer isto, já tenho a informação e agora não sei como começar para implementá-lo! buscarei ajuda ....
 
estes códigos são para os sites responsivos... XD o que isto faz é que o banner de 728 desconfigure o design, já que não se adapta à tela como os de 300x250 e os de 480x60.. é só se você tiver esse tipo de banners.

jaaa obrigado de novo jeje XD
 
Este já está no top 5 dos melhores tutoriais do ano. Obrigado :encouragement:.
 
Acabei de instalar um tema adaptável e ele mostrava os banners estranhos ao reduzir a tela.
Eu vou optar por criar vários anúncios AdSense. Assim tenho maior controle sobre quem entra no meu site e focar-me mais no design para essas dimensões

---------- Post adicionado na hora: 12:17 ---------- Post anterior adicionado na hora: 12:05 ----------

Também está publicado no blog de webmaster oficial Google http://googlewebmastercentral.blogspot.ie/2012/04/responsive-design-harnessing-power-of.html?m=1

Outra coisa interessante é testá-lo para banners de afiliados
 
MUITO interessante a contribuição! Obrigado!
 
Acabei de instalar um tema adaptável e ele mostrava os banners estranhos ao reduzir a tela.
Eu vou optar por criar vários anúncios AdSense. Assim tenho maior controle sobre quem entra no meu site e focar-me mais no design para essas dimensões

---------- Post adicionado na hora: 12:17 ---------- Post anterior adicionado na hora: 12:05 ----------

Também está publicado no blog de webmaster oficial Google Official Google Webmaster Central Blog: Responsive design – harnessing the power of media queries

Outra coisa interessante é testá-lo para banners de afiliados

sisis eu coloquei a fonte original: Cómo usar AdSense con un diseño adaptable - Dentro de AdSense
desde já, o que fala o post que você colocou é usar media queries para CSS, não para AdSense.
 
É que meu inglês peca por suas falhas. Entrei no link que coloquei. Mas não entendi muito.
Embora tenha me parecido interessante destacar que também propõem isso no Google com

Ah, por certo, também se pode eliminar a publicidade segundo o tamanho da tela deixando o espaço em branco
 
É que meu inglês peca por suas falhas. Entrei no link que coloquei. Mas não entendi muito.
Embora tenha me parecido interessante destacar que também propõem isso no Google com

Ah, por certo, também se pode eliminar a publicidade segundo o tamanho da tela deixando o espaço em branco

mas só poderia fazê-lo com JS ou PHP, não pode fazê-lo com CSS já que estaria ocultando o banner e também geraria impressões inválidas.
 
Muito obrigado, colocarei em prática
 
Desculpe, mas não me ficou claro, o código PHP que está aí (claro, com os dados da minha conta) vai no lugar dos quadros do AdSense que tenho atualmente?
 
AdSense não me deixa usá-lo por ter streaming no site 🙁
 
Você é fonte de inspiração para muitos de nós OBRIGADO🙂
 
Desculpa, mas não ficou claro para mim, o código php que está aí (claro, com os dados da minha conta) vai no lugar dos blocos do AdSense que tenho atualmente?

sim, sim, isso vai no lugar dos blocos gerados a partir da sua conta do AdSense.
 
Bom tutorial, embora eu não tenha sites responsivos, mas talvez algum dia precise. A verdade é que não sei se vale a pena, mas não perco nada em testar, para ver se melhoro um pouco meus ganhos.
 
Já implementei...
 
Alguém já implementou no Blogger?
 
Voltar
Topo