Guía de diseño de anuncios de Audience Network para Android
Los dispositivos Android vienen en diferentes formas y tamaños, por lo que hay que tener en cuenta cómo se verán los anuncios nativos en distintos dispositivos. Para garantizar que el diseño del anuncio nativo sea similar en todos los dispositivos, debe ser flexible. Es decir, en lugar de definir el diseño con dimensiones estáticas, es necesario que el diseño responda a diferentes tamaños y orientaciones de pantalla.
La práctica recomendada para crear un diseño con capacidad de respuesta es usar ConstraintLayout, que está disponible en una biblioteca de API compatible con Android 2.3 (API level 9) y versiones posteriores. Asimismo, la versión más reciente de Android Studio incluye un editor de diseño para simplificar el proceso de desarrollo de ConstraintLayout. A continuación, puedes ver un tutorial sobre cómo desarrollar la interfaz de usuario de anuncios nativos con ConstraintLayout a partir del editor de diseño.
Asegúrate de completar las guías de primeros pasos para Audience Network y Android antes de continuar.
Requisitos previos
- Asegúrate de haber completado el ejemplo de anuncio nativo y de banner publicitario nativo.
- Asegúrate de haber leído la política de Facebook para desarrollar un producto de calidad.
- Asegúrate de haber leído Desarrollar una UI receptiva con ConstraintLayout.
- Asegúrate de haber leído Desarrollar una UI con el editor de diseño.
Pasos para la creación de un diseño de anuncio nativo
Paso 1: Incluir la biblioteca de ConstraintLayout
Paso 2: Diseñar la parte superior del anuncio nativo (incluidos los iconos, títulos y etiquetas)
Paso 3: Diseñar el contenido de MediaView del anuncio nativo
Paso 4: Diseñar el contexto social, el cuerpo del anuncio y el botón de acción del anuncio nativo
Ejemplo: diseño de circunscripción de XML completo
Demostración: diseño de circunscripción en diferentes orientaciones y tamaños de pantalla
Ejemplo de diseño de circunscripción XML para un banner publicitario nativo
Ejemplo: diseño de circunscripción de XML completo
Demostración: diseño de circunscripción en diferentes orientaciones y tamaños de pantalla
Política sobre anuncios nativos
Ejemplo de elementos interactivos incorrectos
Ejemplo de elementos interactivos correctos
Pasos para la creación de un diseño de anuncio nativo
Paso 1: Incluir la biblioteca de ConstraintLayout
Para usar ConstraintLayout en tu proyecto, debes hacer lo siguiente:
Agrega la siguiente instrucción al build.gradle del módulo (no al proyecto) para usar la biblioteca de ConstraintLayout más reciente:
dependencies {
...
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
}Si tienes problemas para resolver Constraint Layout Library, asegúrate de sincronizar tu archivo de Gradle e intenta reiniciar Android Studio.
Cuando termines de sincronizar correctamente el archivo de Gradle con la biblioteca de ConstraintLayout, deberías poder crear un archivo de diseño XML con ConstraintLayout:
Paso 2: Diseñar la parte superior del anuncio nativo (incluidos los iconos, títulos y etiquetas)
Primero, agrega Horizontal Guidelines y define layout_constraintGuide_begin como 55dp para circunscribir otras vistas. Agrega un elemento com.facebook.ads.MediaView, circunscribe la parte superior y el lado izquierdo, y circunscribe la parte inferior según la guía.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<com.facebook.ads.MediaView
android:id="@+id/native_ad_icon"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="@+id/below_ad_icon_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="55dp" />
...
</android.support.constraint.ConstraintLayout>A continuación, agrega otro elemento Horizontal Guideline y configura layout_constraintGuide_begin como 27.5dp para separar el texto con el nombre del anunciante y la etiqueta del patrocinador. Agrega native_advertiser_name, native_ad_sponsored_label y ad_choices_container del siguiente modo:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
...
<TextView
android:id="@+id/native_advertiser_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/black"
android:textSize="15sp"
android:text="@string/placeholder"
app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />
<android.support.constraint.Guideline
android:id="@+id/separate_advertiser_name_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="27.5dp" />
<TextView
android:id="@+id/native_ad_sponsored_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />
<LinearLayout
android:id="@+id/ad_choices_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
...
</android.support.constraint.ConstraintLayout>Paso 3: Diseñar el contenido de MediaView del anuncio nativo
Agrega MediaView y circunscríbelo según la guía Horizontal Guideline creada en el paso 2, del siguiente modo:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
...
<com.facebook.ads.MediaView
android:id="@+id/native_ad_media"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
app:layout_constraintEnd_toEndOf="@+id/ad_choices_container"
app:layout_constraintStart_toStartOf="@+id/native_ad_icon"
app:layout_constraintTop_toTopOf="@+id/below_ad_icon_guideline" />
...
</android.support.constraint.ConstraintLayout>Paso 4: Diseñar el contexto social, el cuerpo del anuncio y el botón de acción del anuncio nativo
Agrega native_ad_social_context, native_ad_body y native_ad_call_to_action, y circunscríbelos debajo de MediaView.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
...
<TextView
android:id="@+id/native_ad_social_context"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginStart="3dp"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_ad_media"
app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
<TextView
android:id="@+id/native_ad_body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="2"
android:textColor="@android:color/black"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_ad_social_context"
app:layout_constraintTop_toBottomOf="@+id/native_ad_social_context" />
<Button
android:id="@+id/native_ad_call_to_action"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginTop="15dp"
android:background="#4286F4"
android:textSize="12sp"
android:textColor="@android:color/white"
android:text="@string/placeholder"
android:paddingStart="20dp"
android:paddingEnd="20dp"
app:layout_constraintEnd_toEndOf="@id/native_ad_media"
app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
...
</android.support.constraint.ConstraintLayout>Ejemplo: diseño de circunscripción de XML completo
Este es un ejemplo completo de diseño de circunscripción de XML para un anuncio nativo:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<com.facebook.ads.MediaView
android:id="@+id/native_ad_icon"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="@+id/below_ad_icon_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="55dp" />
<TextView
android:id="@+id/native_advertiser_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/black"
android:textSize="15sp"
android:text="@string/placeholder"
app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />
<android.support.constraint.Guideline
android:id="@+id/separate_advertiser_name_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="27.5dp" />
<TextView
android:id="@+id/native_ad_sponsored_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />
<LinearLayout
android:id="@+id/ad_choices_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.facebook.ads.MediaView
android:id="@+id/native_ad_media"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
app:layout_constraintEnd_toEndOf="@+id/ad_choices_container"
app:layout_constraintStart_toStartOf="@+id/native_ad_icon"
app:layout_constraintTop_toTopOf="@+id/below_ad_icon_guideline" />
<TextView
android:id="@+id/native_ad_social_context"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginStart="3dp"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_ad_media"
app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
<TextView
android:id="@+id/native_ad_body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="2"
android:textColor="@android:color/black"
android:textSize="12sp"
android:text="@string/placeholder"
app:layout_constraintStart_toStartOf="@+id/native_ad_social_context"
app:layout_constraintTop_toBottomOf="@+id/native_ad_social_context" />
<Button
android:id="@+id/native_ad_call_to_action"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginTop="15dp"
android:background="#4286F4"
android:textSize="12sp"
android:textColor="@android:color/white"
android:text="@string/placeholder"
android:paddingStart="20dp"
android:paddingEnd="20dp"
app:layout_constraintEnd_toEndOf="@id/native_ad_media"
app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
</android.support.constraint.ConstraintLayout>Demostración: diseño de circunscripción en diferentes orientaciones y tamaños de pantalla
Ya creaste un elemento ConstraintLayout para el anuncio nativo, que ofrecerá la mejor experiencia del usuario en diferentes orientaciones y tamaños de pantalla. ConstraintLayout debe tener una apariencia similar a la de los teléfonos y tabletas Android. Nota: El diseño se encuentra dentro de ScrollView; puedes desplazarte por dicho diseño en la orientación Landscape de los teléfonos cuando el anuncio nativo no se muestra entero.
Ejemplo de diseño de circunscripción para un banner publicitario nativo
El banner publicitario nativo está disponible en la versión más reciente del SDK de Meta Audience Network. Los pasos para crear un diseño de circunscripción para un banner nativo son similares a los pasos correspondientes a Native Ad. Puedes seguir los pasos anteriores para crear el diseño de Native Banner Ad, o bien copiar en tu proyecto el siguiente código de diseño de XML de ejemplo.
Ejemplo: diseño de circunscripción de XML completo
Este es un ejemplo completo de diseño de circunscripción de XML para un banner publicitario nativo:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="3dp">
<RelativeLayout
android:id="@+id/ad_choices_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="2dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/native_ad_sponsored_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/darker_gray"
android:textSize="12sp"
android:text="Placeholder"
app:layout_constraintStart_toEndOf="@id/ad_choices_container"
app:layout_constraintTop_toTopOf="parent" />
<com.facebook.ads.MediaView
android:id="@+id/native_ad_icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="3dp"
android:gravity="center"
app:layout_constraintStart_toStartOf="@id/ad_choices_container"
app:layout_constraintTop_toBottomOf="@id/ad_choices_container" />
<TextView
android:id="@+id/native_advertiser_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:textColor="@android:color/black"
android:textSize="15sp"
android:textStyle="bold"
android:ellipsize="end"
android:lines="1"
app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />
<android.support.constraint.Guideline
android:id="@+id/separate_advertiser_name_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="43dp" />
<TextView
android:id="@+id/native_ad_social_context"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:ellipsize="end"
android:lines="1"
app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />
<Button
android:id="@+id/native_ad_call_to_action"
android:layout_width="80dp"
android:layout_height="50dp"
android:gravity="center"
android:background="#4286F4"
android:textSize="12sp"
android:textColor="@android:color/white"
android:paddingLeft="3dp"
android:paddingRight="3dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@id/native_ad_icon" />
</android.support.constraint.ConstraintLayout>Demostración: diseño de circunscripción en diferentes orientaciones y tamaños de pantalla
Cumplimiento de la política de anuncios nativos
Para crear un producto de calidad, los diseñadores deben seguir la Política de Meta Audience Network cada vez que implementen el diseño de anuncio nativo o de banner publicitario nativo. Los usuarios siempre deben tener el control total de lo que seleccionan mediante clics. Sobre todo en el caso de los elementos interactivos del anuncio, debes procurar que los usuarios solo puedan hacer clic en los títulos de los anuncios, las URL, las llamadas a la acción y las imágenes. Por otra parte, no debería poderse hacer clic en el espacio en blanco del texto del título ni en las vistas de imágenes.
Ejemplo de elementos interactivos incorrectos
Cuando creas el diseño de un anuncio nativo, no debes usar valores fijos para el ancho y la altura de TextView, AdIcon ni MediaView a fin de evitar white space en los títulos de los anuncios. A continuación, se proporciona un ejemplo de lo que nunca debes hacer:
Así se ve un mal ejemplo:
Ejemplo de elementos interactivos correctos
Para crear un anuncio nativo de calidad, sigue los pasos anteriores a fin de desarrollar el diseño de circunscripción de un anuncio nativo o un banner publicitario nativo. Por ejemplo, siempre debes aplicar "wrap_content" en TextView tanto para el ancho como para la altura; puedes asignar un valor fijo de ancho o match_parent a AdIcon o a MediaView, pero, para definir la altura, debes usar wrap_content. A continuación, te mostramos cómo se ve un diseño cuando se sigue la Política de Meta Audience Network:
Próximos pasos
- Sigue nuestras guías para integrar diferentes formatos de anuncio en tu aplicación:
Prueba la integración de los anuncios con tu aplicación.
Envía la aplicación para revisión.
Tan pronto como recibamos una solicitud de un anuncio de parte de tu aplicación o sitio web, la revisaremos para asegurarnos de que cumple con las políticas de Audience Network y las Normas comunitarias de Facebook. Obtén más información sobre nuestro proceso de revisión.
Más recursos |
Guía introductoriaGuía técnica para comenzar a usar Audience Network | Referencia de la APIReferencia del SDK de Facebook para Android |