Interfaccia utente personalizzata con l'SDK IMA per iOS

Questa guida spiega come implementare un'interfaccia utente per gli annunci personalizzati utilizzando l'SDK IMA per iOS. Per farlo, devi disattivare l'interfaccia utente predefinita, configurare una nuova interfaccia utente personalizzata e completare la nuova UI con le informazioni sugli annunci ottenute dall'SDK. Questa guida si basa sul esempio di base di Objective-C per iOS. Puoi scaricare l'intero Esempio di UI personalizzata.

Nota: per attivare questa funzionalità è necessario attivare il tuo account Google Ad Manager. Per saperne di più, contatta il tuo account manager.

Definisci nuovi elementi UI

Prima di scrivere il codice, modifica lo storyboard in modo da aggiungere elementi al Pulsante Scopri di più, pulsante Salta annuncio e timer del conto alla rovescia. Assicurati che Il pulsante Salta annuncio è "Personalizzato" (come mostrato di seguito) per evitare lampeggerà quando il timer per saltare il conto alla rovescia si aggiorna.

Pulsante Scopri di più

Pulsante Salta annuncio

Etichetta Conto alla rovescia degli annunci

Assicurati che questi nuovi elementi siano collegati alle variabili in ViewController. Aggiungi anche variabili per monitorare l'annuncio corrente e il tempo fino a quando non è possibile saltarlo. che verrà usato in seguito.

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;

Disattivare l'interfaccia utente integrata

Per iniziare, comunica all'SDK che vuoi disattivare la sua interfaccia utente integrata.

ViewController.m

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

Nascondi la tua UI personalizzata e mostrala solo se consentita

Alcuni annunci Google, come gli annunci AdSense, non consentono un'interfaccia utente personalizzata. Viene sempre visualizzata la propria UI. Nascondi la tua UI personalizzata per impostazione predefinita:

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

Mostra l'interfaccia utente personalizzata solo quando l'annuncio attualmente in riproduzione nasconde la sua UI. Nascondi l'interfaccia utente personalizzata dopo ogni annuncio nel caso in cui l'annuncio che segue non corrisponda Consenti UI personalizzata:

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

Aggiungi logica per il pulsante Scopri di più

Il primo componente dell'interfaccia utente da collegare è il pulsante Scopri di più. Crea un "Ritocco all'interno" per informare l'SDK che È stato fatto clic sul pulsante Scopri di più.

ViewController.m

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

Aggiungere una logica per il timer del conto alla rovescia

Quindi, collega il timer del conto alla rovescia, che utilizza adsManager:adDidProgressToTime:totalTime: da calcolare per il tempo rimanente dell'annuncio.

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

Aggiungi logica per il pulsante Salta annuncio

Infine, collega il pulsante Salta annuncio. Questo pulsante viene visualizzato solo per gli annunci ignorabili annunci; salta un annuncio quando il timer del conto alla rovescia raggiunge lo 0. Questo codice è stato aggiunto con lo stesso metodo usato per il timer del conto alla rovescia di cui sopra.

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 volta implementata, l'interfaccia utente Esempio di UI personalizzata ha il seguente aspetto:

Risoluzione dei problemi

È presente un tag di esempio abilitato per la disattivazione dell'interfaccia utente degli annunci?

Puoi copiare l'URL di questa tag di esempio e incollalo nell'implementazione IMA.

Non riesco a disattivare l'interfaccia utente predefinita.

Assicurati di impostare adsRenderingSettings.disableUi su true e la passiamo al getAdsManager. Verifica che ad.isUiDisabled() restituisce true. Inoltre, è necessario che la rete sia attivata in Ad Manager per poter disattivare l'interfaccia utente dell'annuncio. Se è attivato, il VAST contiene un elemento Extension che ha il seguente aspetto:

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

Se i problemi persistono, rivolgiti al tuo account manager per determinare se la tua attività è abilitata. Alcuni tipi di annunci richiedono un'interfaccia utente specifica; questi annunci restituito con un valore <UiHideable> pari a 0. Se riscontri questo problema, il team addetto alla gestione del traffico deve apportare modifiche per garantire che questi tipi di annunci non vengano pubblicati.