Plantillas de anuncios nativos

Selecciona la plataforma: Android iOS Flutter

Descargar plantillas de anuncios nativos

Punto clave: Antes de continuar, debes saber cómo cargar un anuncio nativo. Lee nuestra Guía de anuncios nativos para obtener más información al respecto.

Con los anuncios nativos, puedes personalizar tus anuncios y, así, mejorar la experiencia del usuario. Si ofreces mejores experiencias del usuario, puedes aumentar la participación y mejorar tu rendimiento general.

Para aprovechar al máximo los anuncios nativos, es importante diseñarlos de modo que se vean como una extensión natural de tu app. Para ayudarte a comenzar, creamos plantillas de anuncios nativos.

Las plantillas de anuncios nativos son vistas de código completo para tus anuncios nativos, y están diseñadas para implementarse rápidamente y modificarse con facilidad. Con estas plantillas, puedes implementar tu primer anuncio nativo en solo unos minutos y personalizar rápidamente su apariencia sin necesidad de escribir mucho código. Puedes colocar estas plantillas en cualquier lugar que desees, como en un RecyclerView usado en un feed de noticias, en un cuadro de diálogo o en cualquier parte de tu aplicación.

Nota: Si te interesa crear tus propios diseños de anuncios nativos desde cero, vuelve a la documentación sobre anuncios nativos avanzados.

Nuestras plantillas de anuncios nativos se proporcionan como un módulo de Android Studio, por lo que es fácil incluirlas en tu proyecto y usarlas como quieras.

Tamaños de las plantillas

Hay dos tamaños de plantillas: pequeño y mediano. Ambos usan la clase TemplateView y tienen una relación de aspecto fija. Se ajustan en función del ancho de sus vistas principales.

Plantilla pequeña

@layout/gnt_small_template_view

La plantilla pequeña es ideal para los RecyclerViews o cuando necesitas una vista de anuncio rectangular larga. Por ejemplo, podrías usarla para los anuncios in-feed.

Plantilla mediana

@layout/gnt_medium_template_view

La plantilla mediana está diseñada para ocupar la mitad o un tercio de la vista de página, pero también se puede utilizar en feeds. Es ideal para las páginas de destino o de presentación.

Puedes experimentar con la posición. También puedes cambiar el código fuente y los archivos XML para que se adapten a tus necesidades.

Instala las plantillas de anuncios nativos

Para instalar plantillas nativas, simplemente descarga el archivo ZIP (con la opción Clone or download en GitHub) y, luego, importa el módulo a tu proyecto de Android Studio existente.

1. Elige File > New > Import Module.

2. Selecciona la carpeta nativetemplates.

   

3. Agrega la siguiente línea al archivo build.gradle a nivel de la app:

   dependencies {
           ...
           implementation project(':nativetemplates')
           ...
   }
   

Usa las plantillas de anuncios nativos

Puedes usar la plantilla en cualquier archivo XML de diseño, al igual que cualquier otro grupo de vistas.

Para utilizar plantillas, debes seguir dos pasos:

1. Primero, debes incluir la plantilla como parte de tu diseño.

   <LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context=".MainActivity"
      tools:showIn="@layout/activity_main" >
   
   <!--  This is your template view -->
   <com.google.android.ads.nativetemplates.TemplateView
      android:id="@+id/my_template"
      <!-- this attribute determines which template is used. The other option is
       @layout/gnt_medium_template_view -->
      app:gnt_template_type="@layout/gnt_small_template_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
   
   ...
   </LinearLayout>
   

2. Luego, debes agregar tu anuncio nativo a la plantilla para que lo muestre cuando se cargue:

   MobileAds.initialize(this);
   AdLoader adLoader = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
       .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
           @Override
           public void onNativeAdLoaded(NativeAd nativeAd) {
               NativeTemplateStyle styles = new
                 NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();
               TemplateView template = findViewById(R.id.my_template);
               template.setStyles(styles);
               template.setNativeAd(nativeAd);
           }
        })
        .build();
   
   adLoader.loadAd(new AdRequest.Builder().build());
   

Claves del diccionario de diseño

Existen dos formas de personalizar el diseño de tu plantilla: con el XML de diseño tradicional y con nuestro objeto NativeTemplateStyle.Builder. El ejemplo de código que se indica más arriba muestra cómo usar el objeto NativeTemplateStyle.Builder para establecer el color de fondo principal, pero también hay otras opciones disponibles. A continuación, se muestran todos los métodos de compilación disponibles. El compilador devuelve un objeto NativeTemplateStyle que anula cualquier diseño XML. Los diseños XML gnt_small_template.xml y gnt_medium_template.xml usan los mismos parámetros de diseño de Android que ya conoces.

Métodos de compilación para el diseño de la plantilla de anuncio nativo
withCallToActionTextTypeface	Typeface callToActionTextTypeface Es el tipo de letra del llamado a la acción.
withCallToActionTextSize	float callToActionTextSize Es el tamaño del texto del llamado a la acción.
withCallToActionTypefaceColor	int callToActionTypefaceColor Es el color del texto del llamado a la acción.
withCallToActionBackgroundColor	ColorDrawable callToActionBackgroundColor Es el color de fondo del llamado a la acción.
withPrimaryTextTypeface	Typeface primaryTextTypeface Es el tipo de letra de la primera fila de texto.
withPrimaryTextSize	float primaryTextSize Es el tamaño de la primera fila de texto.
withPrimaryTextTypefaceColor	int primaryTextTypefaceColor Es el color de la primera fila de texto.
withPrimaryTextBackgroundColor	ColorDrawable primaryTextBackgroundColor Es el color de fondo de la primera fila de texto.
withSecondaryTextTypeface	Typeface secondaryTextTypeface Es el tipo de letra de la segunda fila de texto.
withSecondaryTextSize	float secondaryTextSize Es el tamaño de la segunda fila de texto.
withSecondaryTextTypefaceColor	int secondaryTextTypefaceColor Es el color del texto de la segunda fila de texto.
withSecondaryTextBackgroundColor	ColorDrawable secondaryTextBackgroundColor Es el color de fondo de la segunda fila de texto.
withTertiaryTextTypeface	Typeface tertiaryTextTypeface Es el tipo de letra de la tercera fila de texto.
withTertiaryTextSize	float tertiaryTextSize Es el tamaño de la tercera fila de texto.
withTertiaryTextTypefaceColor	int tertiaryTextTypefaceColor Es el color del texto de la tercera fila de texto.
withTertiaryTextBackgroundColor	ColorDrawable tertiaryTextBackgroundColor Es el color de fondo de la tercera fila de texto.
withMainBackgroundColor	ColorDrawable mainBackgroundColor Es el color de fondo principal.

Contribución

Creamos las plantillas de anuncios nativos para ayudarte a desarrollar este tipo de anuncios rápidamente. Nos encantaría que hicieras tu aporte en nuestro repositorio de GitHub y que agregues nuevas plantillas o funciones. Envíanos una solicitud de extracción y la revisaremos.