Plantillas de anuncios nativos

Descargar plantillas de anuncios nativos

Puedes utilizar el formato nativo para personalizar tus anuncios, de modo que ofrezcas la mejor experiencia de usuario posible. De esta forma, es probable que se incrementen tanto el nivel de interacción como tu rendimiento general.

Si quieres 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 una serie de plantillas.

Son vistas que ya tienen el código de los anuncios nativos incluido para que puedas modificarlas de forma sencilla e implementarlas con rapidez. Gracias a estas plantillas, 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 el objeto TableView que uses en un feed de noticias o en un cuadro de diálogo.

En esta guía aprenderás a descargar, integrar y utilizar plantillas nativas en aplicaciones para iOS. Damos por hecho que ya has cargado anuncios nativos mediante el SDK.

Tamaños de plantillas

Las plantillas están disponibles en dos tamaños: pequeño y mediano, y cada una de ellas está representada por una clase: GADTSmallTemplateView y GADTMediumTemplateView. Ambas son una ampliación de GADTTemplateView. Además, tienen una proporción fija, por lo que se adaptan al ancho de la vista principal únicamente si llamas al método addHorizontalConstraintsToSuperviewWidth. Si no llamas al método addHorizontalConstraintsToSuperviewWidth, las plantillas se renderizarán con su tamaño predeterminado.

GADTSmallTemplateView

Para las celdas UICollectionView o UITableView, el tamaño de plantilla perfecto es el pequeño. Puedes utilizarlo, por ejemplo, en anuncios in-feed o en cualquier vista de anuncio rectangular y estrecha. El tamaño predeterminado de este tipo de plantilla es de 91 puntos de alto por 355 puntos de ancho.

GADTMediumTemplateView

Las plantillas medianas ocupan la mitad o tres cuartos de la vista de la página. Es el tamaño idóneo para las páginas de destino o de inicio, pero también puedes incluirlo en las vistas UITableViews. El tamaño predeterminado de este tipo de plantilla es de 370 puntos de alto por 355 puntos de ancho.

Todas nuestras plantillas son compatibles con la función de diseño automático, por lo que puedes experimentar con los emplazamientos cuanto quieras, así como modificar el código fuente y los archivos xib, en función de cuáles sean tus necesidades.

Instalar las plantillas de anuncios nativos

Para instalar las plantillas nativas, descarga el archivo zip y arrástralo al proyecto de XCode. La casilla Copy items if needed (Copiar elementos si fuera necesario) debe estar marcada.

Usar las plantillas de anuncios nativos

Después de añadir la carpeta al proyecto e incluir la clase correspondiente en el archivo, debes seguir estos pasos. Si quieres modificar las propiedades de fuente y estilo, debes utilizar obligatoriamente los diccionarios de estilos, ya que en este momento anulamos todos los estilos que haya configurados en el 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 = [[GADTSmallTemplateView alloc] init];

// STEP 3: Template views are just GADUnifiedNativeAdViews
_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 GADUnifiedNativeAdView 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 estilo

Para personalizar las plantillas, el método más rápido 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é aparece una excepción cuando intento crear una instancia del objeto de la plantilla?
Es posible que hayas modificado el tamaño de la vista en el archivo xib, pero que no hayas cambiado el del marco que creaste en el método "setup" de la subclase.
¿Puedo personalizar aún más las plantillas?
Son archivos xib con objetos de vista asociados, igual que el resto de clases de vista xib y personalizadas que habrás utilizado para desarrollar aplicaciones para iOS. Si lo que quieres es crear anuncios nativos desde cero, te recomendamos que consultes nuestra guía sobre los anuncios nativos avanzados.
¿Por qué no se actualizan mis estilos después de configurarlos en el archivo xib?
Actualmente, anulamos todos los estilos del archivo xib y damos prioridad al diccionario de estilos predeterminado de GADTTemplateView.m.

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.