Plantillas de anuncios nativos

Descargar plantillas de anuncios nativos

Importante: Antes de seguir, descubre cómo puedes cargar anuncios nativos. Consulta nuestra guía sobre los anuncios nativos para obtener más información acerca de este tipo de anuncios.

Puedes utilizar el formato nativo para personalizar tus anuncios y ofrecer una mejor experiencia de usuario. De esta forma, es probable que mejores tanto el nivel de interacción como tu rendimiento general.

Para sacar el máximo partido a este formato, diseña los anuncios en consonancia con el estilo de tu aplicación. Para ayudarte a empezar, hemos creado varias plantillas.

Estas plantillas son vistas que ya traen incluido el código de los anuncios nativos, para que puedas modificarlas fácilmente e implementarlas con rapidez. Con ellas, implementar tu primer anuncio nativo te llevará tan solo unos minutos. Además, podrás personalizarlo por completo fácilmente y sin tener que usar mucho código. Puedes colocar estas plantillas en cualquier lugar dentro de tu aplicación, como en un cuadro de diálogo o en el objeto RecyclerView que uses en un feed de noticias.

Nota: Si prefieres diseñar tus propios anuncios nativos desde cero, consulta la documentación sobre los anuncios nativos avanzados.

Proporcionamos nuestras plantillas como un módulo de Android Studio para que puedas incluirlas en tu proyecto y usarlas como quieras sin dificultades.

Tamaños de plantillas

Las plantillas están disponibles en dos tamaños: pequeñas y medianas. Ambos tamaños utilizan la clase TemplateView y tienen una relación de aspecto fija, que se ajusta al ancho de la vista principal.

Plantilla pequeña

@layout/gnt_small_template_view

La plantilla pequeña es idónea para los objetos RecyclerView, o si necesitas que el anuncio sea rectangular y alargado. Por ejemplo, podrías usarla con anuncios in‑feed.

Plantilla mediana

@layout/gnt_medium_template_view

Las plantillas medianas ocupan la mitad o tres cuartos de la vista de la página, pero también pueden usarse en feeds. Es el tamaño ideal para las páginas de destino o de inicio.

Puedes experimentar cuanto quieras con los emplazamientos, así como modificar el código fuente y los archivos XML en función de cuáles sean tus necesidades.

Instalar plantillas de anuncios nativos

Para instalar plantillas de anuncios nativos, descarga el archivo zip con la opción Clone (Clonar) o la opción Download (Descargar) de GitHub, e importa el módulo en un proyecto de Android Studio que ya tengas.

1. Haz clic en File > New > Import Module (Archivo > Nuevo > Importar módulo).

2. Selecciona la carpeta nativetemplates.

   

3. Añade la siguiente línea a tu archivo build.gradle, a nivel de la aplicación:

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

Usar las plantillas de anuncios nativos

Puedes utilizarlas en cualquier archivo XML de diseño, como cualquier otro grupo de vistas.

El proceso para usar plantillas consta de dos pasos:

1. En primer lugar, debes incluir la plantilla en 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. A continuación, debes añadir el anuncio nativo a la plantilla cuando se cargue dicho anuncio:

   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 estilos

Puedes personalizar tu plantilla de dos formas: a través de un archivo XML tradicional o mediante nuestro objeto NativeTemplateStyle.Builder. En el ejemplo de código anterior, se muestra cómo se utiliza el objeto NativeTemplateStyle.Builder para configurar el color de fondo principal, pero hay muchas más opciones. A continuación, te mostramos todos los métodos disponibles de Builder. Builder devuelve el objeto NativeTemplateStyle, que anula los estilos configurados mediante archivos XML. Los archivos XML gnt_small_template.xml y gnt_medium_template.xml utilizan los mismos parámetros de diseño de Android que ya conoces.

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

Contribuir

Hemos creado las plantillas de anuncios nativos para ayudarte a desarrollar este tipo de anuncios de forma rápida. Nos encantaría contar con tu ayuda, así que si quieres aportar tu granito de arena, puedes añadir plantillas o funciones a nuestro repositorio de GitHub. Envíanos una solicitud de extracción y la revisaremos.