IU personalizada con el SDK de IMA para iOS

En esta guía, se muestra cómo implementar su propia IU de anuncios personalizados con el SDK de IMA para iOS. Para ello, debes inhabilitar la IU predeterminada, configurar una nueva IU personalizada y, luego, Propagar la IU nueva con información sobre los anuncios obtenida del SDK Esta guía se basa en ejemplo básico de Objective-C para iOS. Puedes descargar la versión completa Ejemplo de IU personalizada.

Nota: Tu cuenta de Google Ad Manager debe estar habilitada para habilitar esta función. Para obtener más información, comunícate con tu administrador de cuentas.

Cómo definir nuevos elementos de la IU

Antes de escribir cualquier código, modifica el guión gráfico para agregar elementos al botón Más información, Omitir anuncio y temporizador de cuenta regresiva. Asegúrate de que Tu botón Omitir anuncio es "Personalizado". (como se muestra a continuación) para evitar que parpadee cuando se actualice el temporizador de cuenta regresiva.

Botón Más información

Botón Omitir anuncio

Etiqueta de Cuenta regresiva del anuncio

Asegúrate de que estos elementos nuevos estén conectados a variables en tu ViewController. También agrega variables para hacer un seguimiento del anuncio actual y el tiempo que debe transcurrir hasta que se pueda omitir que se usará más adelante.

ViewController.m

@property(nonatomic, weak) IBOutlet UIButton *learnMore;
@property(nonatomic, weak) IBOutlet UIButton *skipAd;
@property(nonatomic, weak) IBOutlet UILabel *adCountdown;
@property(nonatomic) NSTimeInterval timeTillSkip;
@property(nonatomic, strong) IMAAd *currentAd;

Cómo inhabilitar la IU integrada

Para comenzar, indícale al SDK que quieres inhabilitar su IU integrada.

ViewController.m

- (void)setUpContentPlayer {
  ...
  IMAAdsRenderingSettings *adsRenderingSettings = [[IMAAdsRenderingSettings alloc] init];
  adsRenderingSettings.disableUi = YES;
  [self.adsManager initializeWithAdsRenderingSettings:adsRenderingSettings];
}

Ocultar tu IU personalizada y mostrarla solo cuando se permita

Algunos anuncios de Google, como los de AdSense, no permiten una IU personalizada. Siempre renderizan su propia IU en su lugar. Oculta tu IU personalizada de forma predeterminada:

ViewController.m

- (void)viewDidLoad {
  ...
  [self hideCustomUi];
  self.timeTillSkip = INFINITY;
  self.learnMore.layer.zPosition = MAXFLOAT;
  self.skipAd.layer.zPosition = MAXFLOAT;
  self.adCountdown.layer.zPosition = MAXFLOAT;
  ...
}

- (void)hideCustomUi {
  self.learnMore.hidden = YES;
  self.adCountdown.hidden = YES;
  self.skipAd.hidden = YES;
}

Mostrar la IU personalizada solo cuando el anuncio que se está reproduciendo oculta su IU. Ocultar la IU personalizada después de cada anuncio en caso de que el siguiente no Permitir IU personalizada:

ViewController.m

- (void)adsManager:(IMAAdsManager *)adsManager didReceiveAdEvent:(IMAAdEvent *)event {
  // When the SDK notified you that ads have been loaded, play them.
  if (event.type == kIMAAdEvent_LOADED) {
    [adsManager start];
  } else if (event.type == kIMAAdEvent_STARTED) {
    self.currentAd = event.ad;
    if (self.currentAd.isUiDisabled) {
      [self showCustomUi];
    }
  } else if (event.type == kIMAAdEvent_SKIPPED || event.type == kIMAAdEvent_COMPLETE) {
    [self hideCustomUi];
  } else if (event.type == kIMAAdEvent_TAPPED) {
    // Since you're disabling IMA's built-in UI, you're also losing the
    // UI element that resumes paused ads with a tap. Add this code
    // to resume paused ads when a user taps on them.
    [self.adsManager resume];
  }
}

- (void)showCustomUi {
  self.learnMore.hidden = NO;
  [self.videoView bringSubviewToFront:self.learnMore];
  self.adCountdown.hidden = NO;
  if (self.currentAd.isSkippable) {
    self.skipAd.hidden = NO;
    [self.videoView bringSubviewToFront:self.skipAd];
  } else {
    self.skipAd.hidden = YES;
  }
  self.adCountdown.text = @"";
  [self.skipAd setTitle:@"" forState:UIControlStateNormal];
}

Cómo agregar lógica para el botón Más información

El primer componente de la IU que se conectará es el botón Más información. Crea un "Retoque interior" de escucha para notificarle al SDK que Se hizo clic en el botón Más información.

ViewController.m

- (IBAction)onLearnMoreTouch:(id)sender {
  [self.adsManager clicked];
}

Cómo agregar lógica para el temporizador de cuenta regresiva

Luego, conecta el temporizador de cuenta regresiva, que usa adsManager:adDidProgressToTime:totalTime: para calcular el tiempo restante del anuncio.

ViewController.m

- (void)adsManager:(IMAAdsManager *)adsManager
adDidProgressToTime:(NSTimeInterval)mediaTime
         totalTime:(NSTimeInterval)totalTime {
  // Update countdown timer.
  NSMutableString *countdownText = [NSMutableString stringWithString:@"Ad "];
  NSInteger totalAds = self.currentAd.adPodInfo.totalAds;
  if (totalAds > 1) {
    NSInteger position = self.currentAd.adPodInfo.adPosition;
    [countdownText appendString:
        [NSString stringWithFormat:@"%ld of %ld", (long)position, (long)totalAds]];
  }
  NSTimeInterval remainingTime = totalTime - mediaTime;
  [countdownText appendString:[NSString stringWithFormat:@" (%.fs)", remainingTime]];
  self.adCountdown.text = countdownText;
}

Agrega lógica para el botón Omitir anuncio

Por último, conecta el botón Omitir anuncio. Este botón solo se muestra para anuncios que se pueden omitir anuncios; se omite un anuncio cuando el temporizador de cuenta regresiva alcanza 0. Este código se agrega al mismo método utilizado para el temporizador de cuenta regresiva anterior.

ViewController.m

- (void)adsManager:(IMAAdsManager *)adsManager
adDidProgressToTime:(NSTimeInterval)mediaTime
         totalTime:(NSTimeInterval)totalTime {
  ...
  // Update skip button
  if (self.currentAd.isSkippable) {
    self.timeTillSkip = self.currentAd.skipTimeOffset - mediaTime;
    NSString *skipString = @"Skip ad";
    if (self.timeTillSkip > 0) {
      skipString =
          [NSString stringWithFormat:@"Skip this ad in %.f...", self.timeTillSkip];
    }
    // Disable animations while you change the button text to prevent it from blinking. The button
    // type must be "Custom" instead of "System" for this to work. This can be set in the attributes
    // inspector for the button in the storyboard file.
    [UIView setAnimationsEnabled:NO];
    [self.skipAd setTitle:skipString forState:UIControlStateNormal];
    [self.skipAd layoutIfNeeded];
    [UIView setAnimationsEnabled:YES];
  }
}

Una vez implementada, la IU de nuestra Ejemplo de IU personalizada se ve así:

Soluciona problemas

¿Tienes una etiqueta de muestra habilitada para inhabilitar la IU del anuncio?

Puedes copiar la URL de este etiqueta de muestra y pégala en tu implementación de IMA.

No puedo inhabilitar la IU predeterminada.

Asegúrate de haber establecido adsRenderingSettings.disableUi en true y pásala a la getAdsManager. Verifica que ad.isUiDisabled() muestra true. Además, tu red debe estar habilitada en Ad Manager para inhabilitar la IU del anuncio. Si está habilitado, su VAST contiene un Extension que se ve así:

<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>

Si sigues teniendo problemas, consulta con tu administrador de cuentas para determinar si estás habilitado. Algunos tipos de anuncios requieren una IU específica. estos anuncios Se devuelve con un valor <UiHideable> de 0. Si te encuentras con esto, tus el equipo de coordinación de anuncios debe realizar cambios para garantizar que estos tipos de anuncios no se publiquen.