Adsense - Anúncios responsíveis com Bootstrap e CSS @media queries

Adsense - Anúncios responsíveis com Bootstrap e CSS @media queries

O Twitter Bootstrap possuí uma relação de classes em CSS que nos ajuda a implementar diferentes diferentes tamanhos de anúncios para diferentes dispositivos.

Class	Phones767px and below	Tablets979px to 768px	DesktopsDefault
.visible-phone	Visible	Hidden	Hidden
.visible-tablet	Hidden	Visible	Hidden
.visible-desktop	Hidden	Hidden	Visible
.hidden-phone	Hidden	Visible	Visible
.hidden-tablet	Visible	Hidden	Visible
.hidden-desktop	Visible	Visible	Hidden

Portanto a ideia é utilizar essas classes para mostrar os anúncios nos tamanhos certos para cada tipo de device.

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)

É incrivelmente simples de fazer isso usando as classes do Bootstrap. Veja o exemplo:

 <div class="visible-desktop">  
        <script type="text/javascript">  
             google_ad_client = "ca-pub-XXXXXX";  
             google_ad_slot = "XXXXXXX";  
             google_ad_width = 728;  
             google_ad_height = 90;  
        </script>  
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>   
 </div>  

 <div class="visible-tablet">  
        <script type="text/javascript">  
             google_ad_client = "ca-pub-XXXXXX";  
             google_ad_slot = "XXXXXXX";  
             google_ad_width = 468;  
             google_ad_height = 60;  
        </script>  
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
 </div>  

 <div class="visible-phone">  
        <script type="text/javascript">  
             google_ad_client = "ca-pub-XXXXXX";  
             google_ad_slot = "XXXXXXX";  
             google_ad_width = 234;  
             google_ad_height = 60;  
        </script>  
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
 </div>  

Fácil né?

Aqui há um exemplo mostrando como podemos fazer a mesma coisa utilizando apenas Javascript.