Bild-im-Bild-Anzeigen implementieren (Beta)

Plattform auswählen: Android iOS

Bild im Bild

Bild-im-Bild-Anzeigen (BiB) werden in einem schwebenden Fenster eingeblendet, das über dem Inhalt auf dem Bildschirm, z. B. Artikeln, Feeds oder Gameplay, angezeigt wird. Mit diesem Format können Nutzer mit Ihrer App interagieren, während die Anzeige sichtbar bleibt. Mit diesem Format können Sie Anzeigen präsentieren, die nicht den gesamten Bildschirm einnehmen. Weitere Informationen zu Picture-in-Picture-Anzeigen

In diesem Leitfaden wird beschrieben, wie Sie mit Google Mobile Ads SDK Bild-im-Bild-Anzeigen in Ihrer App anfordern und präsentieren.

Hinweis

Führen Sie vor dem Fortfahren die folgenden Schritte aus:

Anzeige laden

Wenn Sie ein GADPictureInPictureAd-Objekt laden möchten, erstellen Sie eine Anzeigenanfrage und rufen Sie die Methode load auf:

Swift

private func loadPictureInPictureAd() async {
  do {
    // Capture the PictureInPictureAd reference for later use.
    pipAd = try await PictureInPictureAd.load(
      with: adUnitID, request: Request())
    // Set the delegate to be notified of ad events.
    pipAd?.delegate = self
  } catch {
    print(
      "Picture-in-Picture ad failed to load: \(error.localizedDescription)")
  }
}

Ersetzen Sie adUnitID durch Ihre Anzeigenblock-ID.

Objective-C

- (void)loadPictureInPictureAd {
  GADRequest *request = [GADRequest request];

  [GADPictureInPictureAd
       loadWithAdUnitID:kAdUnitID
                request:request
      completionHandler:^(GADPictureInPictureAd *_Nullable ad, NSError *_Nullable error) {
        if (error) {
          NSLog(@"Picture-in-Picture ad failed to load: %@", error);
          return;
        }
        // Capture the PictureInPictureAd reference for later use.
        self.pipAd = ad;
        // Set the delegate to be notified of ad events.
        self.pipAd.delegate = self;
      }];
}

Ersetzen Sie kAdUnitID durch Ihre Anzeigenblock-ID.

Anzeige einblenden

Wenn Sie die Bild-im-Bild-Anzeige auf dem Bildschirm anzeigen möchten, konfigurieren Sie die Bild-im-Bild-Optionen und rufen Sie die show-Methode auf. Im folgenden Beispiel wird die Standardposition der Anzeige und der Präsentationsbereich auf den Bildschirm festgelegt:

Swift

private func showPictureInPictureAd() {
  // Use the loaded PictureInPictureAd instance.
  guard let pipAd else {
    print("No ad to show.")
    return
  }
  let options = PictureInPictureAdOptions()
  // Uses the Google Mobile Ads SDK's default screen position.
  options.position = .default
  // Binds the ad lifecycle to the host screen.
  options.presentationScope = .screen

  pipAd.show(with: options)
}

Objective-C

- (void)showPictureInPictureAd {
  // Use the loaded PictureInPictureAd instance.
  if (!self.pipAd) {
    NSLog(@"No ad to show.");
    return;
  }
  GADPictureInPictureAdOptions *options =
      [[GADPictureInPictureAdOptions alloc] init];
  // Uses the Google Mobile Ads SDK's default screen position.
  options.position = GADPictureInPictureAdPositionDefault;
  // Binds the ad lifecycle to the host screen.
  options.presentationScope = GADPictureInPictureAdPresentationScopeScreen;

  [self.pipAd showWithOptions:options];
}

Position festlegen

Standardmäßig wird in Google Mobile Ads SDK eine Bild-im-Bild-Anzeige beim ersten Aufrufen unten rechts auf dem Bildschirm oder an der zuletzt bekannten Position angezeigt, wenn sie schon einmal eingeblendet wurde. Wenn Sie anpassen möchten, wo die Anzeige eingeblendet wird, legen Sie die Position in den Bild-im-Bild-Optionen fest. Im folgenden Beispiel wird die Position oben auf dem Inhalt in der oberen linken Ecke des Bildschirms festgelegt:

Swift

private func createTopLeftPositionOptions() -> PictureInPictureAdOptions {
  let options = PictureInPictureAdOptions()
  // Sets the ad position to the top-left corner of the screen.
  options.position = .topLeft
  return options
}

Objective-C

- (GADPictureInPictureAdOptions *)createTopLeftPositionOptions {
  GADPictureInPictureAdOptions *options =
      [[GADPictureInPictureAdOptions alloc] init];
  // Sets the ad position to the top-left corner of the screen.
  options.position = GADPictureInPictureAdPositionTopLeft;
  return options;
}

Alle verfügbaren Positionen finden Sie unter GADPictureInPictureAdPosition.

Umfang der Präsentation festlegen

Standardmäßig wird mit Google Mobile Ads SDK eine Bild-im-Bild-Anzeige an den aktuellen Hostbildschirm gebunden. Google Mobile Ads SDK schließt die Anzeige, wenn die Ansichtshierarchie des Hostbildschirms nicht mehr im Arbeitsspeicher ist. Damit die Anzeige sichtbar bleibt, nachdem der Hostbildschirm aus dem Speicher entfernt wurde, legen Sie den Präsentationsbereich auf die Anwendung fest:

Swift

private func createApplicationScopedOptions() -> PictureInPictureAdOptions {
  let options = PictureInPictureAdOptions()
  // Keeps the ad visible beyond the host screen's lifecycle.
  options.presentationScope = .application
  return options
}

Objective-C

- (GADPictureInPictureAdOptions *)createApplicationScopedOptions {
  GADPictureInPictureAdOptions *options =
      [[GADPictureInPictureAdOptions alloc] init];
  // Keeps the ad visible beyond the host screen's lifecycle.
  options.presentationScope = GADPictureInPictureAdPresentationScopeApplication;
  return options;
}

Weitere Informationen finden Sie unter Anzeige auf allen Bildschirmen sichtbar machen.

Callback für Anzeigenereignisse festlegen

Wenn Sie Lifecycle-Events für Bild-im-Bild-Anzeigen verarbeiten möchten, legen Sie den Event-Callback für die Anzeige fest, bevor Sie sie präsentieren. Mit diesem Callback werden Standardereignisse wie Klicks und Impressionen gemeldet. Mit diesem Callback werden auch Ereignisse im Zusammenhang mit dem Bild-im-Bild-Modus gemeldet, z. B. wenn die Anzeige ein- oder ausgeblendet wird:

Swift

func pictureInPictureAdDidShow(_ pictureInPictureAd: PictureInPictureAd) {
  print("Picture-in-Picture ad shown.")
}

func pictureInPictureAdDidHide(_ pictureInPictureAd: PictureInPictureAd) {
  print("Picture-in-Picture ad hidden.")
}

func pictureInPictureAdDidFailToShow(
  _ pictureInPictureAd: PictureInPictureAd, error: Error
) {
  print("Picture-in-Picture ad failed to show: \(error.localizedDescription)")
}

func pictureInPictureAdDidRecordImpression(
  _ pictureInPictureAd: PictureInPictureAd
) {
  print("Picture-in-Picture ad recorded an impression.")
}

func pictureInPictureAdDidRecordClick(
  _ pictureInPictureAd: PictureInPictureAd
) {
  print("Picture-in-Picture ad recorded a click.")
}

func pictureInPictureAdWillPresentScreen(
  _ pictureInPictureAd: PictureInPictureAd
) {
  print("Picture-in-Picture ad will present screen.")
}

func pictureInPictureAdWillDismissScreen(
  _ pictureInPictureAd: PictureInPictureAd
) {
  print("Picture-in-Picture ad will dismiss screen.")
}

func pictureInPictureAdDidDismissScreen(
  _ pictureInPictureAd: PictureInPictureAd
) {
  print("Picture-in-Picture ad dismissed screen.")
}

Objective-C

- (void)pictureInPictureAdDidShow:(GADPictureInPictureAd *)pictureInPictureAd {
  NSLog(@"Picture-in-Picture ad shown.");
}

- (void)pictureInPictureAdDidHide:(GADPictureInPictureAd *)pictureInPictureAd {
  NSLog(@"Picture-in-Picture ad hidden.");
}

- (void)pictureInPictureAdDidFailToShow:(GADPictureInPictureAd *)pictureInPictureAd
                              withError:(NSError *)error {
  NSLog(@"Picture-in-Picture ad failed to show: %@", error);
}

- (void)pictureInPictureAdDidRecordImpression:(GADPictureInPictureAd *)pictureInPictureAd {
  NSLog(@"Picture-in-Picture ad recorded an impression.");
}

- (void)pictureInPictureAdDidRecordClick:(GADPictureInPictureAd *)pictureInPictureAd {
  NSLog(@"Picture-in-Picture ad recorded a click.");
}

- (void)pictureInPictureAdWillPresentScreen:(GADPictureInPictureAd *)pictureInPictureAd {
  NSLog(@"Picture-in-Picture ad will present screen.");
}

- (void)pictureInPictureAdWillDismissScreen:(GADPictureInPictureAd *)pictureInPictureAd {
  NSLog(@"Picture-in-Picture ad will dismiss screen.");
}

- (void)pictureInPictureAdDidDismissScreen:(GADPictureInPictureAd *)pictureInPictureAd {
  NSLog(@"Picture-in-Picture ad dismissed screen.");
}

Anzeige ausblenden

Wenn Sie die schwebende Anzeige vom Bildschirm entfernen möchten, rufen Sie die Methode hide auf. Mit dieser Methode wird der Callback für das Ereignis „Anzeige ausgeblendet“ aufgerufen:

Swift

private func hidePictureInPictureAd() {
  // Use the loaded PictureInPictureAd instance.
  guard let pipAd else {
    print("No ad to hide.")
    return
  }
  pipAd.hide()
}

Objective-C

- (void)hidePictureInPictureAd {
  // Use the loaded PictureInPictureAd instance.
  if (!self.pipAd) {
    NSLog(@"No ad to hide.");
    return;
  }
  [self.pipAd hide];
}

Anzeigenressourcen bereinigen

Um Speicherlecks zu vermeiden, sollten Sie die Referenz auf das Anzeigenobjekt löschen, wenn Ihre App die Anzeige nicht mehr verwendet. Das ist beispielsweise der Fall, wenn Ihre App die Anzeige nicht mehr einblendet oder mit ihr interagiert. Bei Anzeigen mit Bildschirmbereich müssen Sie die Referenz löschen, wenn Ihre App den Hostbildschirm aus dem Arbeitsspeicher entfernt. Behalten Sie bei Anzeigen mit App-Umfang die Anzeigenreferenz bei, während der Nutzer zwischen Bildschirmen wechselt, und entfernen Sie die Referenz, wenn der Nutzer die Anzeige schließt:

Swift

private func cleanUpPictureInPictureAd() {
  pipAd?.hide()
  pipAd = nil
}

Objective-C

- (void)cleanUpPictureInPictureAd {
  [self.pipAd hide];
  self.pipAd = nil;
}

Anzeige auf allen Geräten sichtbar halten

Wenn Sie den Präsentationsbereich auf die Anwendung festlegen, bleibt die Bild-im-Bild-Anzeige sichtbar, auch wenn Ihre App den Hosting-Bildschirm aus dem Arbeitsspeicher entfernt. Wenn der Nutzer den Hostbildschirm verlässt, muss Ihre App weiterhin Zugriff auf die Bild-im-Bild-Anzeige haben, damit er mit der Anzeige interagieren oder sie schließen kann. Wir empfehlen, die Anzeige in einem Singleton auf App-Ebene oder in einem gemeinsamen Statusmanager zu speichern und nicht in der Instanzvariablen eines einzelnen Bildschirms.

Beispiele dafür, wie eine Anzeige auf verschiedenen Bildschirmen sichtbar bleibt, finden Sie in den folgenden Beispiel-Apps: