Merida Design Blog

Publicado el | Recursos / ,

Lazy Ads: Carga publicidad de manera asíncrona

Lazy Ads te permite cargar la publicidad de manera totalmente asíncrona, evitando que se bloquee la carga de la página mientras se espera a la respuesta del proveedor de la publicidad.

Problemática

Dependiendo del proveedor que se use para mostrar la publicidad, la carga del sitio se puede ver bloqueada mientras espera la respuesta del proveedor y esto es, porque la mayoría aún sigue usando document.write para cargar su contenido, lo que detiene el flujo de carga por completo.

De igual forma muchos proveedores aún no emplean códigos amigables al diseño responsivo y esto puede provocar que en determinadas resoluciones la página se vea desfasada.

Es posible ocultar la publicidad mediante css y media queries, sin embargo, únicamente se ocultan pero el script se sigue ejecutando por lo que la petición al proveedor se sigue realizando y la impresión también es contabilizada.

Solución

LazyAds evita que el script de la publicidad se ejecute de inmediato y maneja su ejecución de manera interna, por lo que la carga se vuelve asíncrona y permite que la página se cargue por completo incluso antes de recibir la respuesta del proveedor(de la publicidad).

Con LazyAds es posible usar condicionales para la carga de la publicidad en base a media queries ó incluso, basado en el tamaño del elemento que contiene la publicidad.

Uso básico

  1. Carga el script en la cabecera de tu página.
    <html>
      <head>
        ...
        <script src="../path_to/lazyad-loader.min.js" async></script>
    

  2. Coloca el script de la publicidad dentro del contenedor de LazyAd para prevenir que se ejecute de inmediato.

            <!-- coloca todos los scripts de publicidad en un div lazyad & lazyad script  -->
            <div class="ad" data-lazyad>
                <script type="text/lazyad">
                <!--
                    COLOCA AQUÍ EL SCRIPT (incluyendo el <script> tag)
                -->
                </script>
            </div>
    

Importante: es necesario colocar los simbolos de comentarios antes y después del script de publicidad para evitar que el script de lazyad sea cerrdo de manera prematura.


Media Query

Esta publicidad solo se leerá si la pantalla es de al menos 800px de ancho.

        <!-- coloca todos los scripts de publicidad en un div lazyad & lazyad script  -->
        <div class="ad" data-lazyad data-matchmedia="only screen and (min-width: 800px)">
            <script type="text/lazyad">
            <!--
                COLOCA AQUÍ EL SCRIPT (incluyendo el <script> tag)
            -->
            </script>
        </div>

Dimensiones del contenedor

Esta publicidad solo se leerá si su contenedor tiene 728px de ancho por 90px de alto.

        <!-- coloca todos los scripts de publicidad en un div lazyad & lazyad script  -->
        <div class="ad" data-lazyad data-adwidth="728" data-adheight="90">
            <script type="text/lazyad">
            <!--
                COLOCA AQUÍ EL SCRIPT (incluyendo el <script> tag)
            -->
            </script>
        </div>

Para mayor documentación y descarga de la librería, visita el siguiente enlace:
Página: https://github.com/madgex/lazy-ads



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: