Tengo un sitio de wordpress y me gustaría mostrar 1 anuncio de banner de Google Adsense (320 px x 50 px) en la parte inferior de la página solo para usuarios móviles. Cuando digo en la parte inferior de la página, en realidad debería decir la parte inferior de la pantalla visible, de modo que no importa en qué parte de la página se encuentre el usuario, siempre estará visible.

Me di cuenta de que necesito usar consultas de medios y descubrí el tamaño de los principales dispositivos móviles que usan el sitio, que tienen un ancho de 320 px o 360 px.

El css que escribí para esto y lo coloqué en el archivo estándar style.css es;

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 360px) {
.mobileadunit {
  width:320px;
  height:50px;
  position:fixed;
  bottom:0px;
  }

}

Luego coloqué el div en el archivo footer.php en wordpress justo antes de la etiqueta

<div class="mobileadunit">
ADSENSE CODE
</div>

pero a pesar de mis mejores esfuerzos, no puedo hacer que esto aparezca. ¿Estoy haciendo algo mal que es evidentemente obvio?

Resulta que css “@media queries” por sí solo probablemente no entregaría el resultado ni la mejor experiencia de usuario para lo que desea.

En primer lugar, no soy un especialista sino más bien un aprendiz también. De todos modos, por ahora parece que los anuncios de AdSense de Google tienen un tamaño fijo y no se adaptan a diferentes anchos de pantalla cuando se ven en diferentes dispositivos. En dispositivos más pequeños, al navegar por sitios web receptivos, los anuncios de AdSense se expandirían fuera de su contenedor y, a menudo, fuera de la pantalla, rompiendo el diseño, degradando la experiencia del usuario e incluso evitando que los visitantes móviles hagan clic en sus anuncios.

ENTONCES, ¿HAY ALGUNA SOLUCIÓN?

Sí, si busca en la web, encontrará algunas soluciones, incluidas las recomendaciones oficiales de Google sobre la modificación del código de AdSense. Ya resolví este problema una vez, y después de una investigación muy rápida, conocí 2 complementos realmente buenos para mostrar anuncios de AdSense en sitios web receptivos de WordPress. Ver Complemento de Google AdSense para diseño receptivo (Opción gratuita) y el Complemento de AdSense fácil de responder (Opción de pago) también.

Como se mencionó antes, Políticas del programa Google Adsense cubre sus propios métodos y directivas para la alteración del código de Adsense, y aunque sus pautas de modificación aceptadas son bastante sencillas y muy recomendables, siempre que uno no modifique el código de Adsense de una manera que sea perjudicial para el programa, entonces Google acepta modificación menor al código de Adsense sin aplicar ninguna penalización a la cuenta del usuario.

Ya sea mediante el uso de un complemento o no, las consultas de medios javascript + css serían el mejor enfoque para lograr una mejor experiencia para el resultado esperado en función de su pregunta. Si no desea confiar en un complemento, puede seguir los pasos a continuación para que funcione con algunas piezas de css y js.

LA SOLUCIÓN:

Entonces, en base a las soluciones de los complementos antes mencionados, he creado un rápido demostración (sitio web de prueba en vivo) para que pueda acceder/probarlo en su teléfono móvil. El sitio web de demostración muestra el banner móvil de AdSense (320 x 50 píxeles) solo en teléfonos móviles, así como otros bloques de anuncios con diferentes formatos de tamaño solo en dispositivos móviles comunes al detectar sus tamaños de pantalla con la ayuda de la consulta de medios y luego con un javascript muy simple. Indique/diga a Google que elija el mejor tamaño de anuncio para que se muestre cuando se cargue la página.

Tenga en cuenta que este código responde cuando la página se carga por primera vez, pero no responderá a ningún cambio posterior en el tamaño de la ventana o la orientación del dispositivo. Cuando navegue por el sitio web de demostración, considere actualizar la página cada vez que se cambie el tamaño de la ventana.

Además, puedes jugar con él en CODEPEN también, pero recuerde que para que funcione, debe reemplazar el número de cliente de AdSense y los números de espacios publicitarios con los suyos propios. Aquí hay algunas capturas de pantalla de él trabajando en iOS 7 mobile safari iPhone 5.

Así que vamos a dividirlo en pedazos:

Primero, configuremos el marcado HTML:

El banner para móviles de AdSense y los demás bloques de anuncios con diferentes tamaños se mostrarán en función del ancho actual del <div> con id="responsive-adsense“ justo dentro de la <div> con id="adcontainer"que es a su vez, es el que usaremos para posicionar el banner siempre fijo en la parte inferior.

<div class="adcontainer">

<div id="responsive-adsense">
<!-- AdSense javascript goes here -->
</div>

</div>

A continuación, inserte JavaScript de AdSense de inmediato:

Aquí, he comentado los buenos consejos.

<div class="adcontainer">
<div id="responsive-adsense">

 <script type="text/javascript">
  // Replace google_ad_client number with ith your AdSense Publisher ID
  google_ad_client = "ca-pub-928637890363315";
  // Detect and calculate the width of the "<div>" where AdSense ads will be rendered
  var containerWidth = document.getElementById( "responsive-adsense" ).offsetWidth;
  // If ad container is 728px...
   if ( containerWidth >= 728 ) {
  //...Then, display Adsense ad of size 728x90px
  // Remember to replace the AdSense Ad Slot ID as well for all the different size ad units
  google_ad_slot = "2385224440";
  google_ad_width = 728;
  google_ad_height = 90;
    }
  // If ad container is 468px, then display Adsense ad of size 468x60px
   else if ( containerWidth >= 468 ) {
  google_ad_slot = "1350406442";
  google_ad_width = 468;
  google_ad_height = 60;
   }
  // If ad container is 320px, then display Adsense ad of size 320x50px
   else if ( containerWidth >= 320 ) {
  // It is even possible to set a different google_ad_client ID only for your mobile traffic
  google_ad_client = "ca-pub-928637849363315";
  google_ad_slot = "1350806442";
  google_ad_width = 320;
  google_ad_height = 50;
   }
  // If ad container is 234px, then display Adsense ad of size 234x60px
   else if ( containerWidth >= 234 ) {
  google_ad_slot = "2825039647";
  google_ad_width = 234;
  google_ad_height = 60;
   }
</script>

<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

</div>
</div>

El código javascript anterior cubre 4 bloques de anuncios específicos. Google recomienda no modificar el código de AdSense para mostrar más de 3 bloques de anuncios en una misma página, por lo que es recomendable configurar solo 3 bloques de anuncios dentro de una única página. Mientras mostremos solo 1 anuncio dentro de una página única de acuerdo con el tamaño de pantalla de un dispositivo, estamos listos para comenzar. Asegúrese de tomarse un tiempo y leer las políticas de AdSense de Google. aquí.

Estamos cubriendo 4 bloques de anuncios con diferentes tamaños con el código javascript anterior, de la siguiente manera:

• 234 x 60 – Media pancarta
• 320 x 50 – Banner móvil
• 468 x 60 – Pancarta
• 728 x 90 – Tabla de posiciones

Ahora, con la ayuda de css para consulta de medios, nos enfocaremos en los tamaños de pantalla pequeños más comunes

Cubriremos un enfoque extendido para mostrar los anuncios de AdSense en una variedad de tamaños de pantalla con la ayuda de las consultas de medios css a continuación, que a su vez se orientarían a la mayoría de los dispositivos móviles, como teléfonos inteligentes y tabletas. No nos estamos orientando estrictamente a ningún dispositivo móvil específico aquí, por lo tanto, siempre puede crear su propio esquema de orientación o simplemente quedarse con la parte del código del banner móvil de Adsense (320×50), como se muestra en este enfoque…

De acuerdo con su pregunta, no desea mostrar esto en el navegador de escritorio, por lo que comenzaríamos configurando display: none; para todo al navegar por el sitio web en el escritorio.

/* Default Stylesheet */

#responsive-adsense {
  display: none; 
}

#responsive-adsense{
  display: none;
} 


/*
GENERAL MEDIA QUERY FOR SMALL SCREEN SIZES - COVERS COMMON MOBILE DEVICES, PHONES/TABLETS...
*/

@media only screen and (max-width: 1023px) {

.adcontainer {
  display: none; 
}

#responsive-adsense{
  display: none;
} 

}


@media only screen and (max-width: 899px) {

.adcontainer {
  width: 100%;
  height: auto;
  position: fixed;
  bottom: 0px;
  display: block;
  background: #e74c3c;
  color: #fff;
  margin: 0 auto;
  padding: 5px;
 }

#responsive-adsense {
  width: 728px !important;
  display: block !important;
}

}


@media only screen and (max-width: 767px) {

.adcontainer {
 width: 100%;
 height: auto;
 position: fixed;
 bottom: 0px;
 display: block;
 background: #e74c3c;
 color: #fff;
 margin: 0 auto;
 padding: 5px;
}

#responsive-adsense {
 width: 728px !important;
 display: block !important; 
}

}


@media only screen and (max-width: 599px) {

.adcontainer {
 width: 100%;
 height: auto;
 position: fixed;
 bottom: 0px;
 display: block;
 background: #e74c3c;
 color: #fff;
 margin: 0 auto;
 padding: 5px;
}

#responsive-adsense {
 width: 468px !important;
 display: block !important; 
}

}


@media only screen and (max-width: 479px) {

.adcontainer {
 width: 100%;
 height: auto;
 position: fixed;
 bottom: 0px;
 display: block;
 background: #e74c3c;
 color: #fff;
 margin: 0 auto;
 padding: 5px;
}

#responsive-adsense {
 width: 320px !important;
 display: block !important;
} 

}

/* Here's the css for mobile devices */  
@media only screen and (max-width: 320px) {

.adcontainer {
 width: auto !important; 
 padding: 0px !important;
 height: 50px !important; 
}

#responsive-adsense {
 width: 320px !important;
 display: block !important; 
}

}

Por último, pero no menos importante, siempre puede seguir el enfoque receptivo de Google para configurar anuncios de Adsense en su sitio web y realizar sus propios cambios siempre que no infrinja ninguno de los términos prohibidos de sus políticas. https://support.google.com/adsense/answer/1354736?hl=es&topic=1271508

Puede que esta no sea la mejor solución para usted, pero incluso Google señala que su intento aún no es perfecto y acepta sus propias modificaciones cuando y donde lo considere necesario. prácticas de las políticas de Google Adsense.

Referencias adicionales:

Los siguientes artículos señalan dos métodos diferentes para mostrar anuncios de AdSense en sitios web receptivos de la manera correcta. La mayor parte de lo que se respondió aquí se deriva de estas fuentes, así como también de las recomendaciones oficiales de Google.

Échale un vistazo, podría ser realmente útil para tus necesidades:

http://www.labnol.org/internet/google-adsense-responsive-design/25252/

http://www.akshitsethi.me/google-adsense-responsive-ads-explained/

Espero que esto te ayude a ti y a algunos otros compañeros de la comunidad. Cualquier mejora es bienvenida.

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .mobileadunit {
      width:320px;
      height:50px;
      position:fixed;
      bottom:0px;
      display:block;
  }
}

Así que cambié las consultas de medios para que use min/max-width en lugar de min/max-device-width, para que funcione en la pantalla de una computadora, pero aquí hay un jsfiddle que funciona:

http://jsfiddle.net/hm3Cj/

Este es un gran artículo para la diferencia entre solo un ancho mínimo/máximo y un ancho mínimo/máximo de dispositivo: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml (en caso de que esté interesado). También tiene todos los dispositivos/tamaños de pantalla comunes. El actual que está utilizando es una cantidad bastante pequeña de espacio para mostrar. 320 x 480 podría ser una proporción más útil para un teléfono móvil.