Plantillas de anuncios nativos

Descargar plantillas de anuncios nativos

Introducción

Gracias a los anuncios nativos, puedes personalizar tus anuncios para ofrecer una experiencia de usuario mejorada y, así, mejorar tanto la interacción como el rendimiento general.

Si quieres 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 una serie de plantillas.

Son vistas que ya tienen el código de los anuncios nativos incluido, de modo que puedas modificarlas de forma sencilla e implementarlas con rapidez. Gracias a estas plantillas, 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 colocarlas en cualquier lugar dentro de tu aplicación, como en el objeto RecyclerView de un feed de noticias o en un cuadro de diálogo.

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ño y mediano. Ambos utilizan la clase TemplateView y tienen una proporción 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 las plantillas de anuncios nativos

Para instalar las plantillas de anuncios nativos, descarga el archivo zip e importa el módulo en un proyecto de Android Studio que ya tengas.

Haz clic en File > New > Import Module (Archivo > Nuevo > Importar módulo).
Selecciona la carpeta nativetemplates.

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

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

Usar las plantillas de anuncios nativos

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

añadir plantilla al diseño

El proceso para usar plantillas consta de dos pasos:

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>

A continuación, debes añadir el anuncio nativo a la plantilla cuando se cargue dicho anuncio:

MobileAds.initialize(this, "[_app-id_]");
 AdLoader adLoader = new AdLoader.Builder(this, "[_ad-unit-id_]")
     .forUnifiedNativeAd(new UnifiedNativeAd.OnUnifiedNativeAdLoadedListener() {
       @Override
       public void onUnifiedNativeAdLoaded(UnifiedNativeAd unifiedNativeAd) {
          NativeTemplateStyle styles = new
              NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();

          TemplateView template = findViewById(R.id.my_template);
          template.setStyles(styles);
          template.setNativeAd(unifiedNativeAd);

        }
     })
     .build();

   adLoader.loadAd(new .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 usar el objeto NativeTemplateStyle.Builder para definir el color de fondo principal, pero hay muchas más opciones. A continuación, te mostramos todos los métodos disponibles en el creador. Dicha herramienta 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 que usan los creadores con los estilos de plantillas de anuncios nativos
`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.