Plantillas de anuncios nativos

Selecciona la plataforma: Android iOS Flutter

Descargar plantillas de anuncios nativos

Con los anuncios nativos, puedes personalizar tus anuncios y, así, 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 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 las plantillas de anuncios nativos.

Las plantillas nativas son vistas con código completo para tus anuncios nativos, y están diseñadas para implementarse rápidamente y modificarse con facilidad. Con las plantillas nativas, puedes implementar tu primer anuncio nativo en solo unos minutos y personalizar rápidamente su apariencia sin necesidad de escribir mucho código. Puedes colocar estas plantillas en cualquier lugar que desees, como en un TableView que se usa en un feed de noticias, en un diálogo o en cualquier otro lugar de tu app.

En esta guía, se muestra 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

Hay dos tamaños de plantillas: pequeño y mediano. Cada plantilla se representa con una clase. Las clases son GADTSmallTemplateView y GADTMediumTemplateView. Ambas clases extienden GADTTemplateView. Ambas plantillas tienen una relación de aspecto fija, que se ajustará para rellenar el ancho de sus vistas principales 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 está diseñada para ser una vista de página de 1/2 a 3/4. Esto es útil 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 la ubicació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 los 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 pertinente 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 usar el diccionario de estilos. Actualmente, anulamos cualquier estilo establecido en el propio 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 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 "setup" de la subclase.
¿Cómo puedo personalizar aún más estas plantillas?
Estas plantillas son solo archivos .xib con objetos de vista asociados, como cualquier otro archivo .xib y clase de vista personalizada que puedas conocer del 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 diseños cuando los configuro en el archivo .xib?
Actualmente, anulamos todos los estilos de XIB con el diccionario de estilos predeterminados en GADTTemplateView.m.

Contribuir

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