Plantillas de anuncios nativos

Descargar plantillas de anuncios nativos

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.

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.

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 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.

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_]")
     .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.