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