Interface personalizada com o SDK do IMA para iOS

Este guia mostra como implementar sua própria interface de anúncio personalizada usando o SDK do IMA para iOS. Para isso, é preciso desativar a interface padrão, configurar uma nova interface personalizada e, em seguida, preencherá a nova interface com informações de anúncio obtidas do SDK. Este guia se baseia no Exemplo básico de Objective-C para iOS. Você pode fazer o download Exemplo de interface personalizada.

Definir novos elementos da interface

Antes de escrever um código, modifique o storyboard para adicionar elementos ao Botão Saiba mais, Pular anúncio e timer de contagem regressiva. Verifique se Seu botão Pular anúncio for "Personalizado" (conforme mostrado abaixo) para evitar que de piscar enquanto o timer de contagem regressiva é atualizado.

Botão Saiba mais

Botão "Saiba mais"

Botão Skip Ad (Pular anúncio)

Botão "Pular anúncio"

Rótulo Contagem regressiva do anúncio

Rótulo de contagem regressiva do anúncio

Verifique se esses novos elementos estão conectados às variáveis no ViewController. Além disso, adicione variáveis para rastrear o anúncio atual e o tempo até que o anúncio possa ser ignorado. que será usado mais tarde.

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;

Desativar a interface integrada

Comece informando ao SDK que você quer desativar a interface integrada dele.

ViewController.m

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

Ocultar a interface personalizada e mostrá-la somente quando permitido

Alguns anúncios do Google, como os anúncios do Google AdSense, não permitem uma interface do usuário personalizada. Em vez disso, eles sempre renderizam a própria interface. Ocultar a interface personalizada por padrão:

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 a interface personalizada somente quando o anúncio em reprodução estiver ocultando a interface. Oculte a interface do usuário personalizada após cada anúncio para o caso de o anúncio seguinte não permitir interface 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];
}

Adicionar lógica ao botão "Saiba mais"

O primeiro componente da interface a ser conectado é o botão Saiba mais. Crie um "Retoque interno" para notificar o SDK de que o O botão Saiba mais foi clicado.

ViewController.m

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

Adicionar lógica para o timer de contagem regressiva.

Em seguida, configure o timer de contagem regressiva, que usa adsManager:adDidProgressToTime:totalTime: para calcular o tempo restante do anúncio.

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;
}

Adicionar lógica para o botão "Pular anúncio"

Por fim, configure o botão Skip Ad (Pular anúncio). Esse botão é exibido somente para anúncios anúncios; ela pula um anúncio quando seu contador regressivo atinge zero. Este código foi adicionado com o mesmo método usado para o contador regressivo acima.

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];
  }
}

Depois de implementada, a interface Exemplo de interface personalizada é assim:

Exemplo de interface personalizada

Solução de problemas

Você tem uma tag de exemplo que desabilite a interface de anúncios?
Você pode copiar o URL deste exemplo de tag e cole na implementação do IMA.
Não consigo desativar a interface padrão.
Verifique se você definiu adsRenderingSettings.disableUi como true e a transmitimos para getAdsManager. Verifique se ad.isUiDisabled() retorna true. Além disso, é preciso ativar sua rede no Ad Manager para desativar a interface do anúncio. Se esse recurso estiver ativado, o VAST vai conter um Extension que é assim: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 Se ainda estiver com problemas, fale com seu gerente de contas para determinar se você tem permissão para isso. Alguns tipos de anúncios exigem uma interface específica. esses anúncios retornar com um valor <UiHideable> de 0. Se você encontrar isso, seu a equipe de tráfego precisa fazer alterações para garantir que esses tipos de anúncios não sejam veiculados.