Interface utilisateur personnalisée avec le SDK IMA pour iOS

Ce guide explique comment implémenter votre propre interface utilisateur d'annonce personnalisée à l'aide du SDK IMA pour iOS. Pour ce faire, vous devez désactiver l'interface utilisateur par défaut, configurer une nouvelle interface utilisateur personnalisée, puis Insérer dans la nouvelle interface utilisateur les informations sur les annonces obtenues à partir du SDK Ce guide s'appuie sur Exemple Objective-C de base pour iOS. Vous pouvez télécharger Exemple d'interface utilisateur personnalisée.

Remarque :Vous devez activer cette fonctionnalité pour votre compte Google Ad Manager. Pour en savoir plus, contactez votre responsable de compte.

Définir de nouveaux éléments d'interface utilisateur

Avant d'écrire du code, modifiez le storyboard afin d’ajouter des éléments pour le Les boutons En savoir plus, Ignorer l'annonce et compte à rebours. Vérifiez que votre bouton Ignorer l'annonce est un bouton "Personnalisé" (comme indiqué ci-dessous) pour empêcher clignoter lors de la mise à jour du compte à rebours pour l'option "Ignorer".

Bouton En savoir plus

Bouton Ignorer l'annonce

Libellé Compte à rebours d'annonce

Assurez-vous que ces nouveaux éléments sont connectés aux variables dans votre ViewController. Ajoutez également des variables pour suivre l'annonce actuelle et le délai jusqu'à ce que l'annonce puisse être ignorée. que nous utiliserons plus tard.

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;

Désactiver l'interface utilisateur intégrée

Commencez par indiquer au SDK que vous souhaitez désactiver son interface utilisateur intégrée.

ViewController.m

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

Masquer votre interface utilisateur personnalisée et ne l'afficher que lorsqu'elle est autorisée

Certaines annonces Google, telles que les annonces AdSense, ne permettent pas d'utiliser une interface utilisateur personnalisée. Ils affichent toujours leur propre UI à la place. Masquez votre interface utilisateur personnalisée par défaut:

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

Afficher l'interface utilisateur personnalisée uniquement lorsque l'annonce en cours de lecture masque son interface utilisateur Masquez l'interface utilisateur personnalisée après chaque annonce au cas où l'annonce suivante autoriser l'interface utilisateur personnalisée:

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

Ajouter une logique pour le bouton "En savoir plus"

Le bouton En savoir plus est le premier composant d'interface utilisateur à intégrer. Créer une "Retouche intérieure" pour avertir le SDK que a cliqué sur le bouton En savoir plus.

ViewController.m

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

Ajouter une logique pour le compte à rebours

Ensuite, allumez le compte à rebours, qui utilise adsManager:adDidProgressToTime:totalTime: pour calculer le temps restant de l'annonce.

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

Ajouter une logique pour le bouton "Ignorer l'annonce"

Enfin, activez le bouton Ignorer l'annonce. Ce bouton ne s'affiche que pour les annonces désactivables annonces il ignore une annonce dès que son compte à rebours atteint 0. Ce code est ajouté en utilisant la même méthode que celle utilisée pour le compte à rebours ci-dessus.

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

Une fois implémentée, l'interface utilisateur Exemple d'interface utilisateur personnalisée se présente comme suit:

Dépannage

Disposez-vous d'un exemple de tag permettant de désactiver l'UI des annonces ?

Vous pouvez copier l'URL de exemple de tag et le coller dans votre implémentation IMA.

Je ne parviens pas à désactiver l'interface utilisateur par défaut.

Assurez-vous d'avoir défini adsRenderingSettings.disableUi sur true et le transmettre à getAdsManager. Vérifier que ad.isUiDisabled() renvoie true. De plus, votre réseau doit être activé dans Ad Manager pour que vous puissiez désactiver dans l'UI de l'annonce. Si vous êtes activé, votre VAST contient un Extension qui se présente comme suit:

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

Si le problème persiste, adressez-vous à votre responsable de compte afin de déterminer si vous êtes activé ou non. Certains types d'annonces requièrent une interface utilisateur spécifique. ces annonces renvoie une valeur <UiHideable> de 0. Si vous rencontrez ce problème, l'équipe de trafficking doit apporter des modifications pour s'assurer que ces types d'annonces ne sont pas diffusés.