Se usó la API de Cloud Translation para traducir esta página.

Plantillas nativas

Con los anuncios nativos, puedes personalizar tus anuncios, lo que genera una mejor experiencia del usuario. Las mejores experiencias del usuario pueden aumentar la participación y mejorar tu rendimiento general.

Para aprovechar al máximo los anuncios nativos, es importante aplicar diseño a tus anuncios para que se sientan como una extensión natural de tu app. Para ayudarte a comenzar, creamos Plantillas nativas.

Las Plantillas nativas son vistas con código completo para tus anuncios nativos, diseñadas para una implementación rápida y una modificación fácil. Con las Plantillas nativas, puedes implementar tu primer anuncio nativo en solo unos minutos y personalizar rápidamente el diseño sin mucho código. Puedes colocar estas plantillas en cualquier lugar que desees, como en una vista de recycler que se usa en un feed de noticias, en un diálogo o en cualquier otro lugar de tu app.

Nuestras plantillas nativas 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 plantillas: pequeña y mediana. Ambos usan la clase TemplateView y tienen una relación de aspecto fija. Se escalarán para llenar el ancho de sus vistas superiores.

Plantilla pequeña

@layout/gnt_small_template_view

La plantilla pequeña es ideal para vistas de reciclador o cuando necesites una vista de anuncio rectangular larga. Por ejemplo, puedes usarlo para los anuncios in-feed.

Plantilla mediana

@layout/gnt_medium_template_view

La plantilla mediana debe ocupar entre la mitad y los tres cuartos de una vista de página, pero también se puede usar en feeds. Es adecuado para páginas de destino o páginas de presentación.

No dudes en experimentar con la posición. Por supuesto, también puedes cambiar el código fuente y los archivos en formato XML para que se adapten a tus requisitos.

Instala las plantillas de anuncios nativos

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

Selecciona File > New > Import Module.
Selecciona la carpeta nativetemplates.

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

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

Cómo usar las plantillas de anuncios nativos

Puedes usar la plantilla en cualquier archivo en formato XML de diseño, como cualquier otro grupo de vistas.

agregar plantilla al diseño

El uso de las plantillas es un proceso de dos pasos:

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>

A continuación, debes proporcionarle a tu plantilla tu anuncio nativo 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 estilos

Existen dos maneras de aplicar diseño a tu plantilla: con el XML de diseño tradicional y con nuestro objeto NativeTemplateStyle.Builder. En la muestra de código anterior, se muestra cómo usar el objeto NativeTemplateStyle.Builder para establecer el color de fondo principal, pero también hay una variedad de otras opciones. Estos son todos los métodos de compilación disponibles. El compilador muestra un objeto NativeTemplateStyle que anula cualquier diseño de 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 del compilador para el estilo de plantillas nativas
`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.
`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.

Contribuir

Creamos Plantillas nativas para ayudarte a desarrollar anuncios nativos rápidamente. Nos encantaría que contribuyas a nuestro repositorio de GitHub para agregar nuevas plantillas o funciones. Envíanos una solicitud de extracción y la revisaremos.