• ¡Bienvenido a XenFácil!

    Estás viendo el sitio como Invitado. Para poder participar en este sitio

    y obtendrás privilegios adicionales, acceso a otras áreas y mucho mas.

    ¡Es gratis!


    ¿Ya eres miembro? Inicia sesión
Adsense responsable

Tutorial Adsense responsable

Resumen Discusión
Para XenForo...
  1. 1.2.x
Autor
Brogan
Imagen del autor
Avatar del autor
URL de XenForo
http://xenforo.com/community/resources/responsive-adsense.2084/
Una de las grandes cosas de 1.2 es el como activar el diseño responsable usando AdSense.

Obviamente, así como varios ancho de página son ahora totalmente dinámicos, añadir un bloque de anuncios de Google de manera normal no funciona.
Cuando el navegador reduce su ancho y hay un anuncio, éste rompe el lado derecho produciendo una barra de desplazamiento horizontal.

Esto es una guía simple que explica como mostrar diferentes bloques de anuncios según el ancho de la pantalla.

Esto está basado en las propias recomendaciones de Google (https://support.google.com/adsense/answer/1354736) y está basado también en JavaScript, ya que los anuncios no cambian dinámicamente al cambiar el ancho del navegador.
En su lugar se precisa refrescar la página.

Lo que sigue a continuación son ejemplos usando código estándar de AdSense.

Brogan dijo:
Google ha introducido muy recientemente código asíncrono de AdSense - mirar aquí para ver como implementarlo: http://xenforo.com/community/resources/responsive-adsense.2084/update?update=5334

Google ha creado un nuevo código de anuncio asíncrono.
aquí se explica como implementarlo.

Para más detalle, mirar aquí: https://support.google.com/adsense/answer/3213689

La principal diferencia entre el código asíncrono y el código actual esque solo es preciso crear una unidad.
Para usar el nuevo código se debe crear una nueva unidad y elegir para el tamaño Otra Responsable - Unidad de Anuncio Responsable (BETA) - Other Responsive - Responsive ad unit (BETA).
17.png
¿Cómo funciona este nuevo código?
Bien, usa consultas media, como el código original pero con el alto y ancho de cada anuncio servido usando CSS específico para las diferentes unidades de anuncios.

ejemplo básico:
Insertar CODE, HTML o PHP: 
<style type="text/css">
.overtaking-top-dynamic {
width: 320px;
height: 50px;
}

@media(min-width: 484px) {
    .overtaking-top-dynamic {
    width: 468px;
    height: 60px;
    }
}
</style>

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Overtaking Top - Dynamic -->
<ins class="adsbygoogle overtaking-top-dynamic"
    style="display:inline-block"
    data-ad-client="ca-pub-id"
    data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
En la parte de arriba existe ahora una nueva sección de CSS.
Aquí se definen los anchos y altos basados en el mínimo ancho de navegador.
Google crea esto automáticamente pero es preciso personalizarlo a las propias necesidades.
En este caso tenemos:
  • Ancho de navegador 483 e inferior - 320x50
  • Ancho de navegador 484 y superior - 468x60
Se pueden servir otros tamaños agregando más consultas media a la sección de CSS y definiendo el mínimo ancho (min-width), el alto y ancho acórdemente.

Debe definirse un tamaño predeterminado para casos de navegadores que no soporten consultas media.

Advertir que las clases de CSS en naranja deben coincidir en el CSS y en la sección del anuncio. Esto se genera actualmente de forma automática basado en el nombre que se da a la unidad de anuncio aunque puede cambiarse si así se desea.

Es importante utilizar solo unidades de anuncio que usen ancho y alto soportado; esta es la lista completa: https://support.google.com/adsense/answer/2953032

Advertir que las unidads de anuncio no cambian dinámicamente ante los cambios de ancho del navegador - se precisa refrescar la página. Google tratará de hacerlo en un futuro.
Además, el seguimiento de los diferentes tamaños de anuncios no está soportado actualmente aunque lo estará en el futuro.
Hacer clic para expandir...

Esto son ejemplos para explicar el texto.

Los elementos resaltados en rojo son importantes zonas de código añadidas al código regular de AdSense.
Los elementos resaltados en azul son de diferentes bloques de anuncios.

Lo primero es usar la plantilla ad_thread_list_below_stickies.
Insertar CODE, HTML o PHP: 
<xen:hook name="ad_thread_list_below_stickies" />
 
<xen:if is="!{$visitor.user_id}">
    <xen:if is="{$stickyThreads}">
        <div style="text-align: center; padding: 8px 0 4px 0; border-bottom: 1px solid @primaryLighterStill">
            <script type="text/javascript">
            google_ad_client = "ca-pub-id";
            width = document.documentElement.clientWidth;
            /* Thread List Below Stickies Responsive 2 */
            google_ad_slot = "123456890";
            google_ad_width = 320;
            google_ad_height = 50;
                if (width > 483) {
                /* Thread List Below Stickies Responsive 1 */
                google_ad_slot = "123456890";
                google_ad_width = 468;
                google_ad_height = 60;
                }
                    if (width > 743) {
                    /* Thread List Below Stickies */
                    google_ad_slot = "123456890";
                    google_ad_width = 728;
                    google_ad_height = 90;
                    }
            </script>
            <script type="text/javascript"
            src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
            </script>
        </div>
    </xen:if>
</xen:if>
Con el código de arriba se mostrarán los anuncios del siguiente modo:
  • Ancho de navegador de 483 y menor - 320x50
  • Ancho de navegador de 484 a 743 - 468x60
  • Ancho de navegador de 744 y mayor - 729x90
Tal y como se puede ver, al incrementarse la ventana del navegador (o reducirse) en ancho, se sevirán diferentes bloques de anuncios.

Este es un ejemplo más complejo usando la plantilla ad_message_below:
Insertar CODE, HTML o PHP: 
<xen:hook name="ad_message_below" />
 
<xen:if is="{$post.position} % {$xenOptions.messagesPerPage} == 0 AND {$thread.reply_count} > 0">
    <xen:if is="!{$visitor.user_id}">
        <li class="message">
            <div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
                <div class="messageUserBlock">
                    <div class="avatarHolder">
                        <span class="helper"></span>
                        <xen:avatar user="$visitor" size="m" img="true" />
                    </div>
                    <h3 class="userText">
                    <span style="font-weight: bold">Google AdSense</span>
                    <em class="userTitle" itemprop="title">Guest Advertisement</em>
                    </h3>
                    <span class="arrow"><span></span></span>
                </div>
            </div>
            <div class="messageInfo primaryContent">
                <div class="messageContent">
                    <article>
                        <blockquote class="messageText ugc baseHtml">
                            <script type="text/javascript">
                            google_ad_client = "ca-pub-id";
                            width = document.documentElement.clientWidth;
                            /* Message Below Responsive 2 */
                           google_ad_slot = "1234567890";
                            google_ad_width = 320;
                            google_ad_height = 50;
                                if (width > 619) {
                                /* Message Below Responsive 1 */
                                google_ad_slot = "1234567890";
                                google_ad_width = 468;
                                google_ad_height = 60;
                                }
                                    if (width > 879) {
                                    /* Message Below */
                                    google_ad_slot = "1234567890";
                                    google_ad_width = 728;
                                    google_ad_height = 90;
                                    }
                            </script>
                            <script type="text/javascript"
                            src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                            </script>
                            <br /><br /><label for="LoginControl"><span style="font-weight: bold; color: #004400"><a href="login/" class="concealed noOutline">Log in or Sign up</a></span></label> to hide all adverts.
                        </blockquote>
                    </article>
                </div>
            </div>
        </li>
    </xen:if>
</xen:if>
Por encima de 619px, se servirá el bloque de anuncios de 320x50.
Entre 620px y 879px, se servirá el bloque de anuncios de 468x60.
Con anchos de 880px y mayores, se servirá el bloque de anuncios de 728x90.

Todos estos puntos se basan en mi estilo que incluye el margen, relleno, ancho del bloque de avatar y margen del contenido de los mensajes, que es 8+120+16+ancho del anuncio+8.
Por ello, el bloque de anuncio con ancho de 468 precisa un ancho de 8+120+16+468+8 = 620.
Todo ello supone que el punto de ruptura sea > 619.

Estos puntos pueden variar según el estilo - Se tendrá que trabajar en ello.
Requisitos
Una cuenta AdSense - www.google.com/adsense/‎
Autor
lms
Visitas
1.293
Primer lanzamiento
Última actualización
Votar
0,00 estrella(s) 0 calificaciones
Unirse a la discusión Más información

Más recursos de lms

Compartir este recurso

Arriba