Tuesday, November 13, 2012

Adsense - Anúncios responsíveis via Javascript


Adsense - Anúncios responsíveis via Javascript

Como fazer anúncios responsíveis usando Javascript

A ideia é verificar o tamanho da tela do usuário e em seguida, baseado nos valores, mostrar os anúncios nos tamanhos corretos.

No meu caso eu configurei o seguinte esquema:

  • Padrão Desktop
    • Leaderboard (728x90)

  • Padrão Portrait tablet to landscape and desktop
    • Banner (468x60)

  • Padrão Landscape phone to portrait tablet
    • Banner (468x60)

  • Padrão Landscape phones and down
    • Half Banner (234x60)


Veja o código fonte do exemplo:


 <script type="text/javascript">  
       google_ad_client = "ca-pub-XXXXXX";  
       google_ad_slot = "";  
       if(window.innerWidth >= 800) {  
        //visible-desktop  
        //Medium Rectangle  
        google_ad_slot = "xxxxxxx";  
        google_ad_width = 300;  
        google_ad_height = 250;  
       }  
       else if((window.innerWidth > 480)&&(window.innerWidth < 800)) {  
        //visible-tablet  
        //Square  
        google_ad_slot = "xxxxxxx";  
        google_ad_width = 250;  
        google_ad_height = 250;  
       }  
       else if(window.innerWidth <= 480) {  
        //visible-phone  
        //Large Rectangle  
        google_ad_slot = "xxxxxxx";  
        google_ad_width = 336;  
        google_ad_height = 280;  
       }  
       if(google_ad_slot != "")  
        document.write('1: <scr'+'ipt type=\"text/javascript\" src=\"http://pagead2.googlesyndication.com/pagead/show_ads.js\"></scri'+'pt>');  
       </script>  

Você utiliza o Twitter Bootstrap? Se sim, você pode conseguir o mesmo resultado de maneira muito mais simples. Veja aqui!


No comments:

Post a Comment