Estilos nativos

La configuración de estilos nativos permite que Google Ad Manager controle la renderización de tus anuncios nativos en función de los estilos nativos que especifiques en el producto. Primero, especifica el tamaño y la segmentación. Luego, agrega fragmentos de HTML, CSS y JavaScript para definir anuncios responsivos que ofrezcan una visualización de calidad en todas las pantallas. No es necesario que realices ninguna tarea de renderización, ya que Ad Manager aplica automáticamente el estilo nativo adecuado para el destino. Los estilos nativos se implementan de la misma manera que los anuncios de banner, con un objeto GAMBannerView. Se pueden usar con un tamaño de anuncio fijo determinado con anticipación o con uno flexible que se defina durante el tiempo de ejecución.

Requisitos previos

• Contar con la versión 7.14.0 o posterior del SDK de anuncios de Google para dispositivos móviles

En esta guía, se asume que tienes algunos conocimientos prácticos sobre el SDK de anuncios de Google para dispositivos móviles. Si aún no lo hiciste, considera consultar nuestra guía de introducción.

Tamaño fijo

Los estilos nativos con tamaño fijo te permiten controlar el ancho y la altura del anuncio nativo. Para establecer un tamaño fijo, sigue estos pasos:

1. Crea una línea de pedido en la IU de Ad Manager y selecciona uno de los tamaños predefinidos en el menú desplegable del campo Size.

2. En Interface Builder, configura el ancho y la altura de GAMBannerView para que coincidan con el tamaño predefinido que seleccionaste en el paso 1. Puedes ver una lista de los tamaños y sus constantes de GADAdSize correspondientes en la sección Tamaño del banner.

Implementar estilos nativos con un tamaño fijo es muy sencillo: solo debes seguir las instrucciones que se indican en Tu primera solicitud de banner y obtendrás flexibilidad y control sobre el código HTML, CSS y JavaScript para darle a tu anuncio de banner una apariencia nativa que se vea natural en tu app.

Tamaño flexible

En algunos casos, el tamaño fijo puede no cumplir la función que se busca. Por ejemplo, es posible que desees que el ancho del anuncio coincida con el contenido de tu app, pero que su altura se ajuste de forma dinámica para adaptarse al contenido del anuncio. Si quieres lograr esto, puedes especificar Fluid como el tamaño del anuncio en la IU de Ad Manager para designar que el tamaño del anuncio se determine en el tiempo de ejecución de la app. De esta forma, el SDK proporciona una constante especial de GADAdSize, kGADAdSizeFluid, para controlar el caso. La altura del anuncio flexible se determina de forma dinámica según el ancho que define el publicador, lo que permite que GAMBannerView ajuste su altura para que coincida con la de la creatividad.

Solicitud flexible

A diferencia de otros formatos de anuncios, el tamaño de anuncio kGADAdSizeFluid no tiene un ancho predefinido, por lo que debes asegurarte de establecer explícitamente el ancho del marco del banner en tu código o en Interface Builder. Si no se especifica un ancho, el SDK establece la altura del banner de forma predeterminada en función del ancho completo del dispositivo.

Si realizas una solicitud de varios tamaños que incluya kGADAdSizeFluid, el anuncio que se muestre siempre se colocará dentro de un contenedor flexible y se comportará como un anuncio flexible. En el caso de que se muestre una creatividad no flexible en este contenedor flexible, el SDK centrará el anuncio en el contenedor para que no tengas que modificar la restricción de ancho cada vez que se devuelva un anuncio nuevo.

La implementación para realizar una solicitud flexible de un solo tamaño o de varios tamaños es muy similar. La única diferencia es que, en el caso de una solicitud de varios tamaños, debes establecer la propiedad validAdSizes para especificar los tamaños del anuncio que son válidos para la solicitud de anuncio:

bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

_bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
                              NSValueFromGADAdSize(kGADAdSizeBanner) ];

Así se ve la implementación completa en el código:

var bannerView: AdManagerBannerView!

override func viewDidLoad() {
super.viewDidLoad()
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  bannerView = AdManagerBannerView(adSize: AdSizeFluid)
  var frameRect = bannerView.frame
  frameRect.size.width = view.bounds.width
  bannerView.frame = frameRect

  // Uncomment this code for a multisize fluid request.
  // bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

  bannerView.adUnitID = "YOUR_AD_UNIT_ID"
  bannerView.rootViewController = self

  // Make the ad request.
  bannerView.load(AdManagerRequest())
}

GAMBannerView *_bannerView;

- (void)viewDidLoad {
  [super viewDidLoad];
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  _bannerView = [[GAMBannerView alloc] initWithAdSize:kGADAdSizeFluid];
  CGRect frameRect = _bannerView.frame;
  frameRect.size.width = CGRectGetWidth(self.view.bounds);
  _bannerView.frame = frameRect;

  // Uncomment this code for a multisize fluid request.
  // _bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
  //                               NSValueFromGADAdSize(kGADAdSizeBanner) ];

  _bannerView.adUnitID = @"YOUR_AD_UNIT_ID";
  _bannerView.rootViewController = self;

  // Make the ad request.
  [_bannerView loadRequest:[GAMRequest request]];
}

Para ver un ejemplo de implementación del tamaño de anuncio flexible de Ad Manager, descarga la app de demo de la API de iOS en Objective-C o Swift.

Descargar demostración de la API

Protocolo GADAdSizeDelegate

Es posible que desees conocer la altura de un anuncio de banner antes de que cambie su tamaño. La devolución de llamada adView:willChangeAdSizeTo: notifica a su delegado antes de que la vista del banner cambie al nuevo tamaño GADAdSize. Para recibir una notificación antes de que la vista del banner cambie al nuevo tamaño de anuncio, tu clase debe cumplir con el protocolo GADAdSizeDelegate.

A continuación, se muestra un ejemplo de implementación de la devolución de llamada adView:willChangeAdSizeTo: que muestra cómo obtener el nuevo ancho y alto del banner:

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
bannerView.adSizeDelegate = self

// MARK: - GADAdSizeDelegate

func adView(_ bannerView: BannerView, willChangeAdSizeTo adSize: AdSize) {
  let height = adSize.size.height
  let width = adSize.size.width
}

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
_bannerView.adSizeDelegate = self;

#pragma mark - GADAdSizeDelegate

- (void)adView:(GADBannerView *)bannerView willChangeAdSizeTo:(GADAdSize)adSize {
  CGFloat height = adSize.size.height;
  CGFloat width = adSize.size.width;
}