Benutzerdefinierte Benutzeroberfläche mit dem IMA SDK für iOS

In diesem Leitfaden erfahren Sie, wie Sie mit dem IMA SDK für iOS eine eigene benutzerdefinierte Anzeigen-UI implementieren. Dazu müssen Sie die Standardbenutzeroberfläche deaktivieren, eine neue benutzerdefinierte Benutzeroberfläche einrichten und Anzeigeninformationen aus dem SDK in die neue Benutzeroberfläche einfügen. Dieser Leitfaden baut auf der Einfaches Objective-C-Beispiel für iOS. Sie können die komplette Beispiel für eine benutzerdefinierte UI

Neue UI-Elemente definieren

Bevor Sie Code schreiben, ändern Sie das Storyboard, um Elemente für die Schaltfläche Weitere Informationen, Werbung überspringen und Countdown-Timer. Stellen Sie sicher, dass die Schaltfläche Werbung überspringen (wie unten gezeigt), um zu verhindern, dass wenn der Countdown-Timer zum Überspringen aktualisiert wird.

Schaltfläche Weitere Informationen

Schaltfläche „Weitere Informationen“

Schaltfläche Werbung überspringen

Schaltfläche „Werbung überspringen“

Label Countdown der Anzeige

Countdown-Label für Anzeige

Achten Sie darauf, dass diese neuen Elemente mit Variablen in ViewController verbunden sind. Fügen Sie auch Variablen hinzu, um die aktuelle Anzeige und die Zeit bis zum Überspringen der Anzeige zu verfolgen. der später verwendet wird.

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;

Integrierte UI deaktivieren

Teilen Sie dem SDK zuerst mit, dass Sie die integrierte UI deaktivieren möchten.

ViewController.m

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

Benutzerdefinierte UI ausblenden und nur anzeigen, wenn sie erlaubt ist

Für einige Google-Anzeigen wie AdSense-Anzeigen ist keine benutzerdefinierte Benutzeroberfläche zulässig. Stattdessen rendern sie immer ihre eigene UI. Blenden Sie Ihre benutzerdefinierte UI standardmäßig aus:

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

Benutzerdefinierte Benutzeroberfläche nur dann anzeigen, wenn die gerade wiedergegebene Anzeige die Benutzeroberfläche ausgeblendet. Blenden Sie die benutzerdefinierte Benutzeroberfläche nach jeder Anzeige aus, falls die folgende Anzeige nicht Benutzerdefinierte Benutzeroberfläche zulassen:

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

Logik für die Schaltfläche „Weitere Informationen“ hinzufügen

Die erste UI-Komponente, die verbunden werden soll, ist die Schaltfläche Weitere Informationen. Erstellen Sie eine "Innenretusche". Listener, der das SDK darüber informiert, auf die Schaltfläche Weitere Informationen geklickt wurde.

ViewController.m

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

Logik für den Countdown-Timer hinzufügen

Als Nächstes verkabeln Sie den Countdown-Timer, bei dem adsManager:adDidProgressToTime:totalTime: zum Berechnen die verbleibende Zeit der Anzeige.

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

Logik für die Schaltfläche „Anzeige überspringen“ hinzufügen

Verbinden Sie zum Schluss die Schaltfläche Werbung überspringen. Diese Schaltfläche wird nur bei überspringbaren Anzeigen wird eine Anzeige übersprungen, sobald der Countdown-Timer 0 erreicht ist. Dieser Code wird hinzugefügt dieselbe Methode wie für den Countdown-Timer weiter oben.

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

Nach der Implementierung zeigt die Benutzeroberfläche in unserem Beispiel für eine benutzerdefinierte UI sieht so aus:

Beispiel für eine benutzerdefinierte Benutzeroberfläche

Fehlerbehebung

Haben Sie ein Beispiel-Tag, mit dem die Anzeigen-UI deaktiviert werden kann?
Sie können die URL dieses Beispiel-Tag und fügen Sie ihn in Ihre IMA-Implementierung ein.
Ich kann die Standardbenutzeroberfläche nicht deaktivieren.
Achten Sie darauf, dass adsRenderingSettings.disableUi auf true festgelegt ist und an getAdsManager übergeben. Prüfen Sie, ob ad.isUiDisabled() gibt true zurück. Außerdem muss Ihr Netzwerk in Ad Manager aktiviert sein, damit auf der Benutzeroberfläche. Wenn diese Funktion aktiviert ist, enthält Ihr VAST einen Extension, der sieht so aus: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 Sollten weiterhin Probleme auftreten, wenden Sie sich an Ihren Account Manager, um herauszufinden, unabhängig davon, ob Sie aktiviert sind. Für einige Anzeigentypen ist eine spezielle Benutzeroberfläche erforderlich. diese Anzeigen mit einem <UiHideable>-Wert von 0 zurückgeben. In diesem Fall muss das Trafficking-Team Änderungen vornehmen, damit diese Anzeigentypen nicht geschaltet werden.