Plantillas de anuncios nativos

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Descargar plantillas nativas

Con los anuncios nativos, puede personalizar sus anuncios y ofrecer una mejor experiencia del usuario. Una mejor experiencia del usuario puede aumentar la participación y mejorar tu rendimiento general.

Para aprovechar al máximo los anuncios nativos, es importante diseñar los diseños de tus anuncios de modo que se sientan como una extensión natural de tu aplicación. Para ayudarte a comenzar, creamos plantillas nativas.

Las plantillas nativas son vistas de código completo para sus anuncios nativos, diseñadas para una implementación rápida y una modificación sencilla. Con las plantillas nativas, puedes implementar tu primer anuncio nativo en solo unos minutos y puedes personalizar el diseño sin necesidad de mucho código. Puedes colocar estas plantillas donde quieras, como en una TableView que se use en un feed de noticias, en un diálogo o en cualquier otra parte de la app.

En esta guía, aprenderás a descargar, incluir y usar plantillas nativas en tus apps para iOS. Se supone que ya usaste el SDK para cargar un anuncio nativo correctamente.

Tamaños de plantilla

Existen dos tamaños de plantilla: 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 llenar 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 las 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 alto por 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 son compatibles con el diseño automático, por lo que puedes experimentar con la ubicación. Por supuesto, también puedes cambiar el código fuente y los archivos xib para satisfacer 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úrese 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 e incluido la clase relevante en tu archivo, sigue esta receta para usar una plantilla. Ten en cuenta que la única forma de cambiar las propiedades de fuente y estilo es mediante el diccionario de estilos; actualmente, anulamos cualquier conjunto de estilos 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];

Cómo definir el estilo de las claves del diccionario

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é obtengo una excepción cuando intento crear una instancia del objeto de la plantilla?
Esto puede ocurrir 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 xib con objetos de vista asociados, como cualquier otra clase de vista xib y personalizada a la que estés acostumbrado desde el desarrollo para iOS. Si prefieres crear 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 estilos xib mediante el diccionario de estilos predeterminado en GADTTemplateView.m.

Contribuir

Creamos plantillas nativas para ayudarlo a desarrollar anuncios nativos rápidamente. Nos encanta ver que contribuyes a nuestro repositorio de GitHub para agregar plantillas o funciones nuevas. Envíanos una solicitud de extracción y la analizaremos.