Configuración de anuncios nativos

Creando un anuncio nativo la zona es sencilla y, sin embargo, muy personalizable. Puedes usar procesos ligeramente diferentes para configurar una zona de anuncios nativos según tus necesidades:

Escenario A: Simplemente quieres configurar una zona de anuncios, elegir la relación de aspecto de las imágenes de la zona de anuncios nativos y luego ajustar el tamaño de la zona de anuncios en tu sitio para que coincida.
Escenario B: Quieres configurar la zona de anuncios para que coincida con un tamaño o una proporción de imagen personalizados, de modo que la zona de anuncios se vea igual que tu sitio y encaje perfectamente.
Escenario C: Tienes una zona en tu sitio de un tamaño específico y quieres crear una zona de anuncios que encaje en ella y se vea bien.

Sea cual sea el escenario que elijas, lo primero que debes hacer es crear una zona de anuncios nativos.

Creación de una zona de anuncios nativos

Cuando hayas iniciado sesión como Publisher, haz clic en Sitios y zonas, Nueva zona, y despliega la Nativo sección, selecciona el formato de anuncio nativo Widget de recomendaciones y haz clic en Siguiente.

Completa los detalles de la zona y haz clic en Siguiente.

En este escenario, estableces la relación de aspecto de las imágenes en el Panel de administración, y no es necesario establecer el tamaño total de la zona de anuncios. Al usar el Diseño rápido, la zona de anuncios que crees se adaptará automáticamente al tamaño del contenedor en el que la coloques.

Paso 1

Selecciona la Diseño rápido pestaña. En la Diseño de escritorio sección, establece el número de columnas y filas de anuncios que quieres en escritorio.

Paso 2

A continuación, elige la relación de aspecto para tus imágenes en el menú desplegable de Configuración de imagen Puedes elegir entre 1:1, 4:3 o 16:9, para coincidir con las miniaturas de tu sitio.

Paso 3

Una vez que hayas elegido la relación de aspecto, usa la casilla de verificación para elegir si deseas mostrar texto o no, y luego decide dónde se mostrará.
Este texto consiste en un Título y una Descripción. Puedes activarlos y desactivarlos de forma individual en las Título y Descripción secciones si lo deseas.
Revisa la vista previa de la derecha para ver cómo se ve tu zona de anuncios y ajusta la configuración de nuevo si es necesario.

Paso 4

Repite los pasos 1-3 anteriores en la Diseño móvil sección para configurar tu zona de anuncios para móvil.

Paso 5

Comprueba la vista previa tanto de Escritorio y Móvil en el lado derecho de la pantalla. Puedes establecer dónde ocurre el punto de ruptura entre la vista de escritorio y la móvil en el Punto de ruptura móvil menú desplegable de Opciones avanzadas.
El punto de ruptura puede establecerse en 800 px para iPad, 450 px para móvil y Sin respuesta. Cuando cambiamos el punto de ruptura, esto cambia si nuestros ajustes en la sección Diseño de escritorio afectan al escritorio y al iPad, o solo al escritorio.
Cuando estés satisfecho con el aspecto de la vista previa, haz clic en Crear.

Paso 6

Copia la etiqueta HTML de la zona y añádela a tu sitio.
La zona de anuncios se ajustará automáticamente al 100 % del contenedor en el que coloques la etiqueta. Es decir, cuanto más grande sea el contenedor, más grandes serán tanto la zona como los anuncios.

En este escenario, quieres poder cambiar el tamaño de la imagen y el espaciado del anuncio para que coincidan con tu sitio. Harías esto si realmente quieres que los anuncios nativos parezcan parte del contenido editorial de tu sitio.

Paso 1

Selecciona la Diseño rápido pestaña. En la Diseño de escritorio sección, establece el número de columnas y filas de anuncios que quieres en escritorio.

Paso 2

En el Configuración de imagen menú desplegable, selecciona Tamaño personalizado y establece el ancho y el alto de las imágenes para que coincidan con tu sitio. Si el sitio contiene una metaetiqueta y es adaptable, cuando se visualice el sitio, las imágenes también se adaptarán a medida que disminuya el tamaño de la pantalla. La información sobre el Tamaño del widget y el Tamaño de imagen se mostrará en la esquina superior derecha, encima de la vista previa.

Paso 3

Una vez que hayas establecido el tamaño de la imagen, elige si quieres mostrar texto o no, usando la casilla de verificación de Texto y elige dónde se mostrará.
Revisa la vista previa de la derecha para ver cómo se ve tu zona de anuncios y ajusta la configuración de nuevo si es necesario.

Paso 4

Repite los pasos 1-3 en la Diseño móvil sección para configurar tu zona de anuncios para móvil.

Paso 5

En el Opciones avanzadas sección, puedes establecer cuántos píxeles de Espaciado vertical y Espaciado horizontal quieres alrededor de cada anuncio.

Nota: Cambiar estos ajustes modificará el tamaño total de la zona de anuncios.

Paso 6

Comprueba la vista previa tanto de Escritorio y Móvil en el lado derecho de la pantalla. Puedes establecer dónde ocurre el punto de ruptura entre la vista de escritorio y la móvil en el Punto de ruptura móvil menú desplegable de Opciones avanzadas.
El punto de ruptura puede establecerse en 800 px para iPad, 450 px para móvil y Sin respuesta. Cuando cambiamos el punto de ruptura, esto cambia si nuestros ajustes en la sección Diseño de escritorio afectan al escritorio y al iPad, o solo al escritorio.
Cuando estés satisfecho con el aspecto de la vista previa, haz clic en Crear.

Paso 7

Copia la etiqueta HTML de la zona y añádela a tu sitio.
Asegúrate de que el tamaño de la zona de anuncios en tu sitio coincida con el tamaño de la zona que acabas de crear.

Selección de Sin respuesta en el Punto de ruptura móvil

Cuando el Punto de ruptura móvil se establece en Sin respuesta en Opciones avanzadas, el siguiente modal aparecerá en la pantalla.

Al hacer clic en CONTINUAR en el modal, se mostrará el diseño de escritorio de los anuncios en todos los dispositivos, incluidos los móviles y las tabletas.
El diseño móvil ya no podrá ser editado por el usuario cuando se seleccione Sin respuesta.
La configuración de imagen se actualiza al tamaño personalizado predeterminado (ancho: 200 px y alto: 200 px) si no se guardó previamente.

Uso de CSS personalizado con anuncios nativos

En el CSS personalizado sección, puedes añadir CSS personalizado para asegurarte de que la zona de anuncios se muestre correctamente en tu sitio. Se proporcionan como punto de partida las clases CSS más importantes. Obtén más información sobre CSS aquí.

Nota: Ten en cuenta que los cambios en el CSS personalizado no se mostrarán en la vista previa: solo se mostrarán en tu propio sitio.

Clases CSS para anuncios nativos

Hay cinco clases CSS proporcionadas en el cuadro para comenzar, y puedes pegar estilos adicionales como consideres conveniente. Estas cinco clases CSS dan estilo a los elementos más importantes del anuncio nativo de la siguiente manera:

Clase

Acción

.exo-native-widget-outer-container

Da estilo a todo el contenedor del widget.

.exo-native-widget-item

Da estilo a los contenedores de los elementos individuales.

.exo-native-widget-item-image

Da estilo a la imagen.

.exo-native-widget-item-title

Da estilo al texto del título.

.exo-native-widget-item-text

Da estilo al texto de la descripción

Clases CSS adicionales

También puedes dar estilo al anuncio nativo usando estas clases CSS adicionales:

Clase

Acción

.exo-native-widget

Envuelve todo el widget.

.exo-native-widget-header

Envuelve los elementos del encabezado.

.exo-native-widget-outer-container

Envuelve todos los anuncios.

.exo-native-widget-item-container

Envuelve la caja del anuncio.

.exo-native-widget-item-image-wrapper

Envuelve la imagen en la caja del anuncio.

.exo-native-widget-item-image-ratio

Establece la relación de aspecto de la imagen del anuncio.

.exo-native-widget-item-content

Envuelve todo el texto de la caja del anuncio.

.exo-native-widget-item-content-box

Esto envuelve el título, la descripción y la marca del contenedor del anuncio.

.exo-native-widget-item-brand

Da estilo a la marca del anuncio.

Ejemplos

Los siguientes ejemplos muestran cómo los Publishers pueden adaptar los estilos CSS en la configuración de la zona de anuncios nativos según sus necesidades.

1. Para colocar el cuadro de texto sobre la imagen.


 .exo-native-widget-item-content {
      position: absolute !important;
      bottom: 0px  !important;
      z-index: 3  !important;
      top: unset  !important;
      height: 50px  !important;
      left: 15px;
   }

2. Para modificar el tamaño del cuadro de texto.


 .exo-native-widget-item-content {
      height: 50px  !important;
   }

3. Para colocar el cuadro de texto sobre la imagen y añadir un fondo al cuadro de texto con opacidad.


 .exo-native-widget-item-content {
      position: absolute !important;
      bottom: 0px  !important;
      z-index: 3  !important;
      top: unset  !important;
      height: 50px  !important;
      background-color: black !important;
      opacity: 0.7 !important;
    }
.exo-native-widget-item-title {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

4. Para redondear los bordes de la imagen.


 .exo-native-widget-item-image {
    border-radius: 5% !important;
    }

5. Para definir un estilo para la fuente. De esta manera, el Publisher puede usar fuentes disponibles en su sitio web y otras distintas de las disponibles en la configuración de la zona.


 .exo-native-widget-item-title, .exo-native-widget-item-text, .exo-native-widget-item-brand {
   font-family: fantasy !important;
   }

6. Para añadir espaciado entre la imagen y el texto, de modo que el texto pueda estar cerca o lejos de la imagen. También puedes usar padding-bottom para añadir espacio debajo del texto.


 .exo-native-widget-item-content {
    padding: 30px !important;
    }

7. Para personalizar el color de fondo del cuadro de texto para que solo afecte al cuadro de texto que está debajo de cada imagen, dejando el espacio entre las imágenes y los cuadros transparente o con un color de fondo diferente.


 .exo-native-widget-item-content {
    background-color: #ABE1FA !important;
    padding: 10px !important;
}
.exo-native-widget-outer-container {
    background-color: white !important;
    padding: 10px !important;
}
.exo-native-widget-item-title {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

8. Para añadir un borde que cubra una imagen y su cuadro de texto. Esto ayudará a separar cada imagen dentro de ese widget nativo.


.exo-native-widget-item-container {
  border: 10px #0073B7 solid !important;
  padding: 10px !important;
}
.exo-native-widget-outer-container {
  margin: 10px !important;
}

AnteriorGestionar el límite de frecuencia para popunders e intersticiales de página completa SiguientePagos

Última actualización hace 17 días

¿Te fue útil?