Plantillas nativas

Descargar plantillas nativas

Punto clave: Antes de continuar, debes saber cómo cargar un anuncio nativo.

Los anuncios nativos te permiten personalizarlos y mejorar la 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 definir el estilo de tus diseños de anuncios de modo que parezcan una extensión natural de tu app. Para ayudarte a comenzar, creamos plantillas nativas.

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

Nota: Si te interesa crear tus propios diseños nativos desde cero, regresa a la documentación de Nativos avanzados en su lugar.

Esta guía te mostrará cómo descargar, incluir y usar plantillas nativas en tus apps para iOS. Se supone que ya usaste correctamente el SDK para cargar un anuncio nativo.

Tamaños de las plantillas

Existen dos tamaños de plantilla: pequeño y mediano. Cada plantilla está representada por una clase. Las clases son GADTSmallTemplateView y GADTMediumTemplateView. Ambas clases extienden GADTTemplateView. Ambas plantillas tienen una relación de aspecto fija, que se escalará para llenar el ancho de sus vistas superiores solo si llamas a addHorizontalConstraintsToSuperviewWidth. Si no llamas a addHorizontalConstraintsToSuperviewWidth, cada plantilla renderizará su tamaño predeterminado.

GADTSmallTemplateView

La plantilla pequeña es ideal para celdas UICollectionView o UITableView. Por ejemplo, puedes usarla para anuncios in-feed o en cualquier lugar en el que necesites una vista de anuncio rectangular delgada. El tamaño predeterminado de esta plantilla es de 91 puntos de alto por 355 puntos de ancho.

GADTMediumTemplateView

La plantilla mediana debe ser una vista de página de 1/2 a 3/4. Es útil para páginas de destino o de presentación, pero también se puede incluir en UITableViews. El tamaño predeterminado de esta plantilla es de 370 puntos de alto por 355 puntos de ancho.

Todas nuestras plantillas admiten el diseño automático, así que no dudes en experimentar con la posición. Por supuesto, también puedes cambiar el código fuente y los archivos .xib para que se adapten a tus requisitos.

Cómo instalar las plantillas de anuncios nativos

Para instalar las plantillas nativas, simplemente descarga el archivo ZIP y arrástralo a tu proyecto de Xcode. Asegúrate de marcar la opción Copiar elementos si es necesario.

Cómo usar plantillas de anuncios nativos

Una vez que hayas agregado la carpeta a tu proyecto y de incluir la clase relevante en tu archivo, sigue esta receta para usar una plantilla. Ten en cuenta que la única manera de cambiar las propiedades de la fuente y el estilo es usar el diccionario de estilos; actualmente anulamos cualquier conjunto de estilos en el propio archivo .xib.

Objective‑C

/// Step 1: Import the templates that you need.
#import "NativeTemplates/GADTSmallTemplateView.h"
#import "NativeTemplates/GADTTemplateView.h"
...

// STEP 2: Initialize your template view object.
GADTSmallTemplateView *templateView =
    [[NSBundle mainBundle] loadNibNamed:@"GADTSmallTemplateView" owner:nil options:nil]
      .firstObject;

// STEP 3: Template views are just GADNativeAdViews.
_nativeAdView = templateView;
nativeAd.delegate = self;

// STEP 4: Add your template as a subview of whichever view you'd like.
// This must be done before calling addHorizontalConstraintsToSuperviewWidth.
// Please note: Our template objects are subclasses of GADNativeAdView so
// you can insert them into whatever type of view you’d like, and don’t need to
// create your own.
[self.view addSubview:templateView];

// STEP 5 (Optional): Create your styles dictionary. Set your styles dictionary
// on the template property. A default dictionary is created for you if you do
// not set this. Note - templates do not currently respect style changes in the
// xib.

NSString *myBlueColor = @"#5C84F0";
NSDictionary *styles = @{
    GADTNativeTemplateStyleKeyCallToActionFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyCallToActionFontColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyCallToActionBackgroundColor :
        [GADTTemplateView colorFromHexString:myBlueColor],
    GADTNativeTemplateStyleKeySecondaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeySecondaryFontColor : UIColor.grayColor,
    GADTNativeTemplateStyleKeySecondaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyPrimaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyPrimaryFontColor : UIColor.blackColor,
    GADTNativeTemplateStyleKeyPrimaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyTertiaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyTertiaryFontColor : UIColor.grayColor,
    GADTNativeTemplateStyleKeyTertiaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyMainBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyCornerRadius : [NSNumber numberWithFloat:7.0],
};

templateView.styles = styles;

// STEP 6: Set the ad for your template to render.
templateView.nativeAd = nativeAd;

// STEP 7 (Optional): If you'd like your template view to span the width of your
// superview call this method.
[templateView addHorizontalConstraintsToSuperviewWidth];
[templateView addVerticalCenterConstraintToSuperview];

Claves de diccionario de estilo

La forma más rápida de personalizar las plantillas es crear un diccionario con las siguientes claves:

Objective‑C

/// Call to action font. Expects a UIFont.
GADTNativeTemplateStyleKeyCallToActionFont

/// Call to action font color. Expects a UIColor.
GADTNativeTemplateStyleKeyCallToActionFontColor;

/// Call to action background color. Expects a UIColor.
GADTNativeTemplateStyleKeyCallToActionBackgroundColor;

/// The font, font color and background color for the first row of text in the
/// template.

/// All templates have a primary text area which is populated by the native ad's
/// headline.

/// Primary text font. Expects a UIFont.
GADTNativeTemplateStyleKeyPrimaryFont;

/// Primary text font color. Expects a UIFont.
GADTNativeTemplateStyleKeyPrimaryFontColor;

/// Primary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeyPrimaryBackgroundColor;

/// The font, font color and background color for the second row of text in the
/// template.

/// All templates have a secondary text area which is populated either by the
/// body of the ad, or by the rating of the app.

/// Secondary text font. Expects a UIFont.
GADTNativeTemplateStyleKeySecondaryFont;

/// Secondary text font color. Expects a UIColor.
GADTNativeTemplateStyleKeySecondaryFontColor;

/// Secondary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeySecondaryBackgroundColor;

/// The font, font color and background color for the third row of text in the
/// template. The third row is used to display store name or the default
/// tertiary text.

/// Tertiary text font. Expects a UIFont.
GADTNativeTemplateStyleKeyTertiaryFont;

/// Tertiary text font color. Expects a UIColor.
GADTNativeTemplateStyleKeyTertiaryFontColor;

/// Tertiary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeyTertiaryBackgroundColor;

/// The background color for the bulk of the ad. Expects a UIColor.
GADTNativeTemplateStyleKeyMainBackgroundColor;

/// The corner rounding radius for the icon view and call to action. Expects an
/// NSNumber.
GADTNativeTemplateStyleKeyCornerRadius;

Preguntas frecuentes

¿Por qué obtengo una excepción cuando intento crear una instancia del objeto de plantilla?

Esto puede suceder si cambiaste el tamaño de la vista en el archivo xib, pero no cambiaste el tamaño del marco creado en el método de "configuración" de la subclase.

¿Cómo puedo personalizar aún más estas plantillas?

Estas plantillas son solo .xibs con objetos de vista asociados, como cualquier otra clase de xib y vista personalizada a la que estés acostumbrado del desarrollo de iOS. Si prefieres compilar tus anuncios nativos desde cero, consulta nuestra Guía de anuncios nativos avanzados.

¿Por qué no se actualizan mis estilos cuando los configuro en el xib?

Actualmente, anulamos todos los diseños xib de forma predeterminada en el diccionario de diseños de GADTTemplateView.m.

Contribuir

Creamos plantillas nativas para ayudarte a desarrollar anuncios nativos rápidamente. Nos encantaría que colaboraras con nuestro repositorio de GitHub para agregar plantillas o funciones nuevas. Envíanos una solicitud de incorporación de cambios y lo analizaremos.