Erweiterte native Funktionen festlegen

Native Anzeigen bieten die folgenden erweiterten Funktionen, mit denen Sie die Anzeigenintegration anpassen können:

  • Wiedergabesteuerung: Sie können das Verhalten der Videowiedergabe anpassen und auf Lifecycle-Events für Videos warten.
  • Platzierung des Datenschutzinfo-Symbols: Passen Sie die Platzierung des Datenschutzinfo-Symbols an.
  • Benutzerdefinierte Klickgesten: Sie können Wischgesten als Klickaktionen konfigurieren.

In diesem Leitfaden erfahren Sie, wie Sie die erweiterten Funktionen nativer Anzeigen mit Google Mobile Ads SDK for React Native verwenden.

Vorbereitung

Bevor Sie fortfahren, führen Sie die folgenden Schritte aus:

Videowiedergabe und ‑ereignisse verwalten

Wenn Sie native Anzeigen mit Video-Assets anfordern, können Sie die Startoptionen für die Videowiedergabe anpassen, auf Lifecycle-Events für Videos warten und die Videowiedergabe steuern.

Optionen für Videoanfragen konfigurieren

Wenn Sie das anfängliche Videoverhalten anpassen möchten, legen Sie die Property videoOptions für das NativeAdRequest-Objekt mit einem VideoOptions-Objekt fest.

Im folgenden Beispiel wird das Video so eingestellt, dass es bei Beginn der Wiedergabe stummgeschaltet ist:

export async function loadNativeVideoAd(
  adUnitId: string,
): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({
      adUnitId,
      videoOptions: {
        // Autoplay video with sound muted.
        startMuted: true,
      },
    });

    // Inspect video metadata if the ad contains video content.
    if (ad.mediaContent.hasVideoContent) {
      console.log('Video duration in seconds:', ad.mediaContent.duration);
      console.log('Video aspect ratio:', ad.mediaContent.aspectRatio);
    }

    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native video ad:', loadError.message);
    return null;
  }
}

Nachdem die Anzeige geladen wurde, wird in diesem Beispiel auch geprüft, ob die Anzeige ein Video-Asset enthält. Die Videometadaten werden protokolliert und die geladene Anzeige wird zurückgegeben. Im Falle eines Fehlers wird im Beispiel eine Fehlermeldung protokolliert.

Weitere Informationen zu Videometadatenattributen wie Seitenverhältnis, aktuelle Zeit und Dauer finden Sie unter MediaContent.

Auf Videoereignisse warten

Wenn Sie auf Video-Lifecycle-Events warten möchten, z. B. wenn ein Video gestartet oder beendet wird, übergeben Sie Ereignis-Callbacks von der VideoControllerEventProps-Schnittstelle an die NativeAdMediaView-Komponente.

Im folgenden Beispiel werden Callbacks übergeben, um Video-Lifecycle-Events zu protokollieren, und benutzerdefinierte Schaltflächen zur Steuerung der Videowiedergabe gerendert:

export function NativeAdWithVideoControls({ad}: {ad: NativeAd}) {
  const mediaViewRef = useRef<NativeAdMediaViewMethods>(null);

  return (
    <NativeAdView ad={ad}>
      {/* Video lifecycle callbacks */}
      <NativeAdMediaView
        ref={mediaViewRef}
        // Called when video playback starts.
        onVideoStart={() => {
          console.log('Video playback started.');
        }}
        // Called when video playback resumes or plays.
        onVideoPlay={() => {
          console.log('Video is playing.');
        }}
        // Called when video playback pauses.
        onVideoPause={() => {
          console.log('Video playback paused.');
        }}
        // Called when video playback completes.
        onVideoEnd={() => {
          console.log('Video playback finished.');
        }}
        // Called when the video mute state changes.
        onVideoMute={(isMuted: boolean) => {
          console.log(`Video mute state changed: ${isMuted}`);
        }}
      />

      {/* Custom playback controls (Ad Manager customControlsRequested only) */}
      <View>
        {/* Plays or resumes the video. */}
        <Button
          title="Play"
          onPress={() => mediaViewRef.current?.playVideo()}
        />
        {/* Pauses video playback. */}
        <Button
          title="Pause"
          onPress={() => mediaViewRef.current?.pauseVideo()}
        />
        {/* Stops video playback and resets the playback position to the beginning. */}
        <Button
          title="Stop"
          onPress={() => mediaViewRef.current?.stopVideo()}
        />
        {/* Mutes or unmutes audio. */}
        <Button
          title="Mute"
          onPress={() => mediaViewRef.current?.setVideoMuted(true)}
        />
        <Button
          title="Unmute"
          onPress={() => mediaViewRef.current?.setVideoMuted(false)}
        />
      </View>
    </NativeAdView>
  );
}

Wenn Sie benutzerdefinierte Steuerelemente aktivieren, können Sie die Videowiedergabe steuern, indem Sie das Attribut ref des Typs NativeAdMediaViewMethods an die Komponente NativeAdMediaView anhängen. Der Typ NativeAdMediaViewMethods ist ein Alias für die Schnittstelle VideoControllerMethods, die die Methoden playVideo, pauseVideo, stopVideo und setVideoMuted für das Objekt ref bereitstellt.

Platzierung der Datenschutzinfos konfigurieren

Wenn Sie die Platzierung des Datenschutzinfo-Symbols anpassen möchten, geben Sie die Property adChoicesPlacement für das Objekt NativeAdRequest mit dem Objekt AdChoicesPlacement an.

Im folgenden Beispiel wird die Platzierung des Datenschutzinfo-Symbols in der oberen linken Ecke der Anzeigenanfrage konfiguriert:

export async function loadNativeAdWithAdChoicesPlacement(
  adUnitId: string,
): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({
      adUnitId,
      // Render the AdChoices icon in the top-left corner.
      adChoicesPlacement: AdChoicesPlacement.TOP_LEFT,
    });
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native ad:', loadError.message);
    return null;
  }
}

In diesem Beispiel wird bei Erfolg auch die geladene Anzeige zurückgegeben und bei einem Fehler eine Fehlermeldung protokolliert.

Benutzerdefinierte Klickgesten konfigurieren

Wischgesten können als Klickaktionen für native Anzeigen konfiguriert werden. Verwenden Sie dazu die Properties customClickGestureDirection und customClickGestureAllowTaps des Objekts NativeAdRequest.

Im folgenden Beispiel wird die Gestenrichtung als Wischen nach rechts konfiguriert und das Tippen beim Laden einer Anzeige zugelassen:

export async function loadNativeAdWithCustomClick(
  adUnitId: string,
): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({
      adUnitId,
      // Require a right swipe gesture for clicks while allowing standard taps.
      customClickGestureDirection: SwipeGestureDirection.RIGHT,
      customClickGestureAllowTaps: true,
    });

    if (ad.isCustomClickGestureEnabled) {
      console.log('Custom click gestures are enabled for this ad.');
    }

    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native ad:', loadError.message);
    return null;
  }
}

In diesem Beispiel wird auch geprüft, ob benutzerdefinierte Klickgesten aktiviert sind. Bei Erfolg wird die geladene Anzeige zurückgegeben und bei einem Fehler wird ein Fehler protokolliert.

Prüfen Sie nach dem Laden der Anzeige die Property ad.isCustomClickGestureEnabled, um festzustellen, ob benutzerdefinierte Klickgesten für diese Anzeige aktiv sind.

Nächste Schritte

Nachdem Sie die erweiterten Funktionen für native Anzeigen konfiguriert haben, können Sie sich über Folgendes informieren: