Meta Audience Network
Volver al documento en Español (España)
Este documento se ha actualizado.
La traducción en Español (España) no está disponible todavía.
Actualización del documento en inglés: 24 ago. 2023
Actualización del documento en Español (España): 26 nov. 2018

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 haber completado las guías de primeros pasos de Audience Network y Android antes de continuar.

Requisitos previos

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:

Next Steps

Más recursos

Guía introductoria

Guía técnica para comenzar a usar Audience Network

Referencia de la API

Referencia del SDK de Facebook para Android