Définir des fonctionnalités natives avancées

Les annonces natives fournissent les fonctionnalités avancées suivantes, qui vous permettent de personnaliser l'intégration de vos annonces :

  • Commandes de lecture vidéo : personnalisez le comportement de lecture vidéo et écoutez les événements de cycle de vie de la vidéo.
  • Emplacement de l'icône Choisir sa pub : personnalisez l'emplacement de l'icône Choisir sa pub.
  • Gestes de clic personnalisés : configurez des gestes de balayage comme actions de clic.

Ce guide vous explique comment utiliser les fonctionnalités avancées des annonces natives avec Google Mobile Ads SDK for React Native.

Prérequis

Avant de continuer, procédez comme suit :

Gérer la lecture et les événements vidéo

Lorsque vous demandez des annonces natives contenant des composants vidéo, personnalisez les options de démarrage de la lecture vidéo, écoutez les événements de cycle de vie de la vidéo et contrôlez la lecture vidéo.

Configurer les options de demande de vidéo

Pour personnaliser le comportement initial de la vidéo, définissez la propriété videoOptions sur l'objet NativeAdRequest à l'aide d'un objet VideoOptions.

L'exemple suivant configure la vidéo pour qu'elle démarre sans le son :

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

Une fois l'annonce chargée, cet exemple vérifie également si elle contient un composant vidéo, consigne les métadonnées de la vidéo et renvoie l'annonce chargée. En cas d'échec, l'exemple consigne un message d'erreur.

Pour en savoir plus sur les propriétés des métadonnées vidéo, telles que le format, l'heure actuelle et la durée, consultez MediaContent.

Écouter les événements vidéo

Pour écouter les événements du cycle de vie d'une vidéo, par exemple lorsqu'une vidéo démarre ou se termine, transmettez les rappels d'événements de l'interface VideoControllerEventProps au composant NativeAdMediaView.

L'exemple suivant transmet des rappels pour consigner les événements de cycle de vie de la vidéo et affiche des boutons personnalisés pour contrôler la lecture de la vidéo :

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

Lorsque vous activez les commandes personnalisées, contrôlez la lecture de la vidéo en associant la propriété ref du type NativeAdMediaViewMethods au composant NativeAdMediaView. Le type NativeAdMediaViewMethods est un alias de l'interface VideoControllerMethods, qui expose les méthodes playVideo, pauseVideo, stopVideo et setVideoMuted sur l'objet ref.

Configurer l'emplacement de Choisir sa pub

Pour personnaliser l'emplacement de l'icône Choisir sa pub, spécifiez la propriété adChoicesPlacement sur l'objet NativeAdRequest à l'aide de l'objet AdChoicesPlacement.

L'exemple suivant configure l'emplacement de l'icône Choisir sa pub dans l'angle supérieur gauche de la demande d'annonce :

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

Cet exemple renvoie également l'annonce chargée en cas de réussite et consigne un message d'erreur en cas d'échec.

Configurer des gestes de clic personnalisés

Configurez les gestes de balayage comme des actions de clic sur les annonces natives à l'aide des propriétés customClickGestureDirection et customClickGestureAllowTaps de l'objet NativeAdRequest.

L'exemple suivant configure la direction du geste comme un balayage vers la droite et autorise les appuis lors du chargement d'une annonce :

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

Cet exemple vérifie également si les gestes de clic personnalisés sont activés, renvoie l'annonce chargée en cas de réussite et consigne une erreur en cas d'échec.

Après avoir chargé l'annonce, vérifiez la propriété ad.isCustomClickGestureEnabled pour vérifier si les gestes de clic personnalisés sont actifs pour cette annonce.

Étapes suivantes

Après avoir configuré les fonctionnalités avancées des annonces au format natif avancé, vous pouvez en savoir plus sur les points suivants :