Banners

El banner es una herramienta muy útil a la hora de comunicar o vender algún acontecimiento/producto/evento particular. Los banners serán vistos por cualquier usuario que ingrese al sitio, sin necesidad de una suscripción previa.

PASO A PASO

Ingresa al módulo HUB de notificaciones
Selecciona la pestaña Acciones web
Selecciona la opción Banners



La pantalla inicial muestra una lista de los diferentes banners configurados en la plataforma y algunas métricas.

Crear Banner

Selecciona el botón Crear Nuevo, dentro de la pantalla inicial



Se abrirá una nueva ventana para personalizar el banner.

Configuración

En la columna de la izquierda se encuentran las opciones de configuración. A la derecha, la vista previa del banner.

Configura el banner

Nombre
Es de uso interno de la plataforma

Ubicación en el sitio
Inferior
Superior

Título
Es el título que se mostrará en el banner

Color de fondo
Es el color que llevará el fondo del banner

Tipografía
Selecciona una de las opciones que ofrece la plataforma

Botón
Configura la leyenda y los colores del botón que llevará el banner

URL de destino
Es el sitio al que redirigirá el botón al hacer click sobre el banner. Al pegar la url de destino, se le asignará un utm para medir la performance de la herramienta. También se puede configurar el utm, desde la opción Configurar (Parametros UTM para Google Analytics).

Día y Horario
Selecciona los días y horarios en los que se mostrará el banner (por defecto, se encontrará todo el día activo).
Con esta configuración se puede incluir más de un banner en la misma página.

Se visualiza el Widget en...
Selecciona las páginas en las que mostrarás el banner. Se pueden elegir todas las páginas (por defecto), alguna/s páginas específicas o en todas las páginas exceptuando algunas/a.

Días hasta la próxima interacción
Con esta opción el banner se dejará de mostrar durante la cantidad de días especificada a los usuarios que ya hayan interactuado con la pieza.

Prefiero subir HTML
El HTML podrá incluir el contenido que desees: desde una simple imagen (que deberá estar hosteada en algún servidor), a una estructura compleja.

No hay una dimensión específica, depende exclusivamente de lo que quieras generar en función de tu estrategia, y de tu propio sitio.
Utiliza este código HTML de referencia para realizar tu configuración: Si quieres ubicar el Banner en el margen inferior modifica en el HTML la palabra “top”por “bottom”. “bottom: 5px”, por “top: 5px”.

Click en el botón Guardar para finalizar

Los banners estarán visibles para el 100% del tráfico, independientemente del navegador o sistema operativo que utilice el usuario.

¿Cómo puedo customizar más mi Banner?

Para acceder a esta opción, dirígete a la sección de configuración del banner y busca la opción Prefiero Subir html.



Allí podrás pegar el código que hayas creado para cargar tu propio diseño personalizado de notificación.



Configura tus preferencias
Día y hora en la que se muestra la notificación
Las páginas dónde quieres que se vea la notificación
Días para la próxima interacción



Siempre te recomendamos utilizar la plantilla HTML de Icomm para trabajar con la misma estructura. La plantilla de Icomm ya está diseñada para adaptarse a los requerimientos del banner, por lo que puedes estar seguro de que tu diseño encajará perfectamente.

Copia esta plantilla HTML para Banners de Icomm y úsala para crear tus diseños personalizados:

<div class="wpn-banner wpn-banner-top" id="wpn-banner" style="box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.16);
        background-color: #0077ff !important;
        color: #FFFFFF !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        position: fixed;
        bottom: 5px;
        width: 80%;
        left: 10%;
        z-index: 9999;
        border-radius: 6px;
        padding: 25px;
        min-height: 60px;
        font-size: 20px;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <style>
        .wpn-banner-link:hover {
            text-decoration: none;
            color: #000b89 !important;
        }
        
        .wpn-banner-link {
            color: #FFFFFF !important;
        }
        
        .wpn-banner-top .wpn-banner-link-container {
            margin-left: 10px;
        }
        
        @media (max-width: 400px) {
            .wpn-banner-top {
                width: 90% !important;
                left: 5% !important;
                min-height: 160px !important;
            }
            .wpn-banner-top .wpn-banner-title,
            .wpn-banner-top .wpn-banner-link-container {
                width: 100% !important;
            }
            .wpn-banner-link {
                padding: 5px 40px !important;
            }
            .wpn-banner-bottom {
                min-height: 180px !important;
            }
            .wpn-banner-link-container {
                padding: 5px 0 !important;
                margin: 0 !important;
            }
            .wpn-banner-preview-powered svg {
                height: 13px !important;
            }
        }
        
        .wpn-close-container button.wpn-close-banner {
            color: #FFFFFF !important;
            border: none;
            background-color: transparent !important;
            position: absolute;
            top: 0;
            right: 7px;
            font-size: 30px;
            line-height: 30px;
            opacity: .4;
            text-shadow: 0 1px 0 #fff;
        }
        
        .wpn-close-container .wpn-close-banner:hover {
            text-decoration: none;
        }
    </style>
    <div class="wpn-close-container">
        <button type="button" class="wpn-close-banner" aria-label="Close" id="wpn-close-btn">
            <span aria-hidden="true">×</span>
        </button>
    </div>

    <div class="wpn-banner-title">
        Ofertas de último momento </div>

    <div class="wpn-banner-link-container">
    <a href="#nicokrasny" class="wpn-banner-link" id="wpn-banner-link" rel="nofollow" 'target="_blank">
        Ir a Ofertas
    </a>
</div>

En cuanto al código HTML, tienes total libertad para incluir el contenido que desees. Desde una simple imagen (que deberá estar alojada en algún servidor) hasta una estructura compleja, puedes hacer lo que quieras con tu diseño. La dimensión específica dependerá exclusivamente de lo que desees generar en función de la estrategia de tu sitio web.

Activar o desactivar la función

Activa o desactiva el switch que se encuentra en la esquina superior derecha para prender o apagar la función.

Métricas

La plataforma de Icomm ofrece algunas métricas de interés para cada campaña de banners. Las mismas pueden visualizarse desde la pantalla de ingreso al Hub de Notificaciones o en la pantalla inicial cada funcionalidad en particular.

En el caso de Banners, se pueden observar las métricas de Impresiones y Clicks a modo de gráfico en la pantalla inicial del Hub. Para ello, ingresa al módulo de Hub de Notificaciones y desliza hacia abajo, hasta encontrar el gráfico correspondiente. En este caso, el gráfico mostrará las métricas generales de todas las campañas de banners activadas en la plataforma.

Métricas por campaña

También es posible visualizar las métricas de cada una de las campañas de banners activada en la plataforma. Para ello, Ingresa al Módulo de Hub, y desliza hacia abajo, hasta encontrar el gráfico correspondiente y selecciona la opción Ver todos. Serás redirigido la pantalla de inicio de la sección Banners, donde podrás ver las Impresiones y Clicks de cada una de las campañas.

Impresiones: Muestra la cantidad de veces que se imprime el Banner.
Clics: Porcentaje de clicks en relación a las impresiones del Banner.

Icomm Beta Ai

Cómo crear Banners para web

El banner es una herramienta muy útil a la hora de comunicar o vender algún acontecimiento/producto/evento particular. Los banners serán vistos por cualquier usuario que ingrese al sitio, sin necesidad de una suscripción previa.

Ingresa al módulo Acciones en web*

Selecciona la sección Banners



La pantalla inicial muestra una lista de los diferentes banners configurados en la plataforma y algunas métricas.

Crear Banner

Selecciona el botón Crear Nuevo, dentro de la pantalla inicial



Se abrirá una nueva ventana para personalizar el banner.

Configuración

En la columna de la izquierda se encuentran las opciones de configuración. A la derecha, la vista previa del banner.

Configura el banner

Nombre

Es de uso interno de la plataforma

Ubicación en el sitio

Inferior

Superior

Título

Es el título que se mostrará en el banner

Color de fondo

Es el color que llevará el fondo del banner

Tipografía

Selecciona una de las opciones que ofrece la plataforma

Botón

Configura la leyenda y los colores del botón que llevará el banner

URL de destino

Es el sitio al que redirigirá el botón al hacer click sobre el banner. Al pegar la url de destino, se le asignará un utm para medir la performance de la herramienta. También se puede configurar el utm, desde la opción Configurar (Parametros UTM para Google Analytics).

Día y Horario

Selecciona los días y horarios en los que se mostrará el banner (por defecto, se encontrará todo el día activo).

Con esta configuración se puede incluir más de un banner en la misma página.

Se visualiza el Widget en...

Selecciona las páginas en las que mostrarás el banner. Se pueden elegir todas las páginas (por defecto), alguna/s páginas específicas o en todas las páginas exceptuando algunas/a.

Programa una fecha de inicio y finalización

Programar una fecha de inicio y fin para el banner: puedes seleccionar fechas específicas para mostrar el banner en el sitio.

Días hasta la próxima interacción: El banner se dejará de mostrar por la cantidad de días especificada para los usuarios que hayn interactuado con el.



Click en el botón Guardar para finalizar

Los banners estarán visibles para el 100% del tráfico, independientemente del navegador o sistema operativo que utilice el usuario.

¿Cómo puedo customizar más mi Banner?

Para acceder a esta opción, dirígete a la sección de configuración del banner y busca la opción Prefiero Subir html.

Allí podrás pegar el código que hayas creado para cargar tu propio diseño personalizado de notificación.

El HTML podrá incluir el contenido que desees: desde una simple imagen (que deberá estar hosteada en algún servidor), a una estructura compleja.

No hay una dimensión específica, depende exclusivamente de lo que quieras generar en función de tu estrategia, y de tu propio sitio.

Utiliza este código HTML de referencia para realizar tu configuración: Si quieres ubicar el Banner en el margen inferior modifica en el HTML la palabra “top”por “bottom”. “bottom: 5px”, por “top: 5px”.





Configura tus preferencias

Día y hora en la que se muestra el banner

Las páginas dónde quieres que se vea el banner

Programa una fecha de inicio y finalización:

Programar una fecha de inicio y fin para el banner: puedes seleccionar fechas específicas para mostrar el banner en el sitio.

Días hasta la próxima interacción: El banner se dejará de mostrar por la cantidad de días especificada para los usuarios que hayn interactuado con el.

Siempre te recomendamos utilizar la plantilla HTML de Icomm para trabajar con la misma estructura. La plantilla de Icomm ya está diseñada para adaptarse a los requerimientos del banner, por lo que puedes estar seguro de que tu diseño encajará perfectamente.

Copia esta plantilla HTML para Banners de Icomm y úsala para crear tus diseños personalizados:

<div class="wpn-banner wpn-banner-top" id="wpn-banner" style="box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.16);

        background-color: #0077ff !important;

        color: #FFFFFF !important;

        text-align: center;

        display: flex;

        flex-direction: column;

        justify-content: center;

        box-sizing: border-box;

        -moz-box-sizing: border-box;

        -webkit-box-sizing: border-box;

        position: fixed;

        bottom: 5px;

        width: 80%;

        left: 10%;

        z-index: 9999;

        border-radius: 6px;

        padding: 25px;

        min-height: 60px;

        font-size: 20px;

        flex-direction: row;

        align-items: center;

        flex-wrap: wrap;">

    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

    <style>

        .wpn-banner-link:hover {

            text-decoration: none;

            color: #000b89 !important;

        }

        .wpn-banner-link {

            color: #FFFFFF !important;

        }

        .wpn-banner-top .wpn-banner-link-container {

            margin-left: 10px;

        }

        @media (max-width: 400px) {

            .wpn-banner-top {

                width: 90% !important;

                left: 5% !important;

                min-height: 160px !important;

            }

            .wpn-banner-top .wpn-banner-title,

            .wpn-banner-top .wpn-banner-link-container {

                width: 100% !important;

            }

            .wpn-banner-link {

                padding: 5px 40px !important;

            }

            .wpn-banner-bottom {

                min-height: 180px !important;

            }

            .wpn-banner-link-container {

                padding: 5px 0 !important;

                margin: 0 !important;

            }

            .wpn-banner-preview-powered svg {

                height: 13px !important;

            }

        }

        .wpn-close-container button.wpn-close-banner {

            color: #FFFFFF !important;

            border: none;

            background-color: transparent !important;

            position: absolute;

            top: 0;

            right: 7px;

            font-size: 30px;

            line-height: 30px;

            opacity: .4;

            text-shadow: 0 1px 0 #fff;

        }

        .wpn-close-container .wpn-close-banner:hover {

            text-decoration: none;

        }

    </style>

    <div class="wpn-close-container">

        <button type="button" class="wpn-close-banner" aria-label="Close" id="wpn-close-btn">

            <span aria-hidden="true">×</span>

        </button>

    </div>

    <div class="wpn-banner-title">

        Ofertas de último momento </div>

    <div class="wpn-banner-link-container">

    <a href="#nicokrasny" class="wpn-banner-link" id="wpn-banner-link" rel="nofollow" 'target="_blank">

        Ir a Ofertas

    </a>

</div>

En cuanto al código HTML, tienes total libertad para incluir el contenido que desees. Desde una simple imagen (que deberá estar alojada en algún servidor) hasta una estructura compleja, puedes hacer lo que quieras con tu diseño. La dimensión específica dependerá exclusivamente de lo que desees generar en función de la estrategia de tu sitio web.

Activar o desactivar la función

Activa o desactiva el switch que se encuentra en la esquina superior derecha para prender o apagar la función.

Métricas

La plataforma de Icomm ofrece algunas métricas de interés para cada campaña de banners. Las mismas pueden visualizarse desde el módulo de Dashboard, sección Notificaciones.

En el caso de Banners, se pueden observar las métricas de Impresiones, Clicks y CTR. Para ello, ingresa al módulo del Dashboard y selecciona la opción Notificaciones. Luego desliza hacia abajo, hasta encontrar el gráfico correspondiente a las métricas de Banners. En este caso, el gráfico mostrará las métricas generales de todas las campañas de banners activadas en la plataforma.

Métricas por campaña

También es posible visualizar las métricas de cada una de las campañas de banners activadas en la plataforma. Para ello, Ingresa al módulo de Acciones en web > Banners. En esta sección se inicio, podrás ver las Impresiones**, Clicks, CTR y Cierre de cada una de las campañas.



ImpresionesMuestra la cantidad de veces que se imprime el Banner.

Clics: Porcentaje de clicks en relación a las impresiones del Banner.

Actualizado el: 16/12/2024