Com a tendência para todos os Temas WordPress se tornarem responsivos, é necessário começar a trabalhar alguns dos problemas associados a esta técnica. Um layout responsivo é um layout que se adapta de forma líquida e automática à resolução de tela de um qualquer dispositivo, seja ele um computador desktop, um tablet ou um smartphone. No entanto, existem algumas estratégias a ter em consideração quando se usam layouts responsivos em WordPress, especialmente no que diz respeito a monetização com anúncios do Google Adsense.
A Google recomenda a utilização de layouts responsivos, especialmente porque eles mantém o conteúdo desktop e mobile todo ele num único URL, o que ajuda na hora de indexar conteúdos do seu blog.
ANÚNCIOS RESPONSIVOS
Se você usa anúncios do Google Adsense num layout responsivo, talvez já tenha reparado que esses anúncios não se ajustam às dimensões do seu layout mobile. Todo o conteúdo é ajustado automaticamente, mas os anúncios do Google mantém as dimensões fixas. Na verdade esses anúncios têm uma largura fixa, e por essa razão não se ajustam ao seu layout.
Se por ventura você estiver usando um bloco de anúncios com 728×90 pixeis, quando você abrir o seu blog na versão mobile, esse anúncio vai sair claramente fora da tela, tendo em consideração que um smartphone tem 320px de largura na tela. E como os anúncios do Google usam dimensões fixas, eles nunca se irão ajustar às dimensões da tela de um tablet ou smartphone, pelo que é necessário você trabalhar nesse sentido.
Como os anúncios do Google Adsense não são responsivos por padrão, você poderá usar um pequeno truque de JavaScript para fazer com que eles respondam às dimensões da tela. A lógica é bastante simples: você cria múltiplos formatos de anúncios (digamos 768×90, 468×60 e 300×250) e baseado na dimensão (largura) do dispositivo do usuário, é apresentado o formato mais conveniente e aquele que de alguma forma não estraga seu layout.
Vejamos o código JavaScript para o efeito:
<script type="text/javascript">
google_ad_client = "ca-publisher-id";
if (window.innerWidth >= 800) {
google_ad_slot = "ad-unit-1";
google_ad_width = 728;
google_ad_height = 60;
} else if (window.innerWidth < 400) {
google_ad_slot = "ad-unit-2";
google_ad_width = 300;
google_ad_height = 250;
} else {
google_ad_slot = "ad-unit-3";
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
Lembre-se de que terá de trocar os campos google_ad_client e google_ad_slot para os valores dos seus anúncios, que você pode encontrar no código Javascript de cada um dos seus anúncios do Google criados. Crie os blocos de anúncios com essas dimensões, e puxe os dados de cada um deles.
Internamente, é a propriedade window.innerWidth que faz toda a magia acontecer. Esta propriedade contem a largura em pixeis da janela de browser do usuário e assim que você sabe essa largura, você sabe quais banners de anúncios mostrar para ele.
Embora seja sempre recomendável você confirmar que esta técnica não infringe os Termos de utilização do Google AdSense, a verdade é que você não está fazendo nada de errado, nem alterando o código Javascript fornecido pela Google para o efeito. Você está apenas mostrando um anúncio em vez de outro, dependendo da dimensão da janela de browser do usuário.
Uma vez que muitos blogueiros e webmasters fazem testes de performance A/B nos seus blogs para verificarem quais os anúncios que rendem mais dinheiro, esta técnica pode ser facilmente encaixada nesse tipo de atuação, não podendo ser considerada ilegal ou incumpridora dos termos e condições fornecidos pelo Google.
Até Já!
