Plantillas de anuncios nativos

Descarga plantillas nativas

Punto clave: Antes de continuar, debes saber cómo cargar un anuncio nativo. Obtén más información sobre los anuncios nativos en nuestra Guía de anuncios nativos.

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 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 diseñar tus propios diseños nativos desde cero, vuelve a la documentación de Native Advanced.

En esta guía, se muestra cómo descargar, incluir y usar Plantillas nativas en tus apps para iOS. Se da por sentado que ya usaste correctamente el SDK para cargar un anuncio nativo.

Tamaños de las plantillas

Existen dos tamaños de plantillas: pequeña y mediana. 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 ocupar el ancho de sus vistas superiores solo si llamas a addHorizontalConstraintsToSuperviewWidth. Si no llamas a addHorizontalConstraintsToSuperviewWidth, cada plantilla mostrará su tamaño predeterminado.

GADTSmallTemplateView

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

GADTMediumTemplateView

La plantilla mediana debe ser una vista de 1/2 a 3/4 páginas. Esto es bueno para las 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 las posiciones. Por supuesto, también puedes cambiar el código fuente y los archivos xib para que se adapten a tus requisitos.

Instala 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 las plantillas de anuncios nativos

Una vez que hayas agregado la carpeta a tu proyecto y hayas incluido 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 fuente y estilo es usar el diccionario de estilos. Actualmente, anulamos cualquier estilo establecido en el 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 del diccionario de diseño

La forma más rápida de personalizar tus 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é recibo 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 "setup" 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 otro xib y clase de vista personalizada que puedas usar en el desarrollo de iOS. Si prefieres crear tus anuncios nativos desde cero, consulta nuestra guía de Native Ads Advanced.

¿Por qué mis diseños no se actualizan cuando los configuro en el xib?

Actualmente, anulamos todos los estilos xib con el diccionario de estilos predeterminados en GADTTemplateView.m.

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.