Configura funciones nativas avanzadas

Los anuncios nativos proporcionan las siguientes funciones avanzadas que te permiten personalizar la integración de tus anuncios:

  • Controles de reproducción de video: Personaliza el comportamiento de la reproducción de video y escucha los eventos del ciclo de vida del video.
  • Ubicación del ícono de AdChoices: Personaliza la ubicación del ícono de AdChoices.
  • Gestos de deslizamiento personalizados: Configura gestos de deslizamiento como acciones de clic.

En esta guía, te mostramos cómo usar las funciones avanzadas de los anuncios nativos con Google Mobile Ads SDK for React Native.

Requisitos previos

Antes de continuar, haz lo siguiente:

Administra la reproducción de videos y los eventos

Cuando solicites anuncios nativos que contengan recursos de video, personaliza las opciones de inicio de la reproducción de video, escucha los eventos del ciclo de vida del video y controla la reproducción de video.

Configura las opciones de solicitud de video

Para personalizar el comportamiento inicial del video, establece la propiedad videoOptions en el objeto NativeAdRequest con un objeto VideoOptions.

En el siguiente ejemplo, se configura el video para que se inicie silenciado cuando comience la reproducción:

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

Después de que se carga el anuncio, en este ejemplo también se verifica si el anuncio contiene un recurso de video, se registran los metadatos del video y se devuelve el anuncio cargado. Si se produce un error, el ejemplo registra un mensaje de error.

Para obtener más información sobre las propiedades de los metadatos de video, como la relación de aspecto, la hora actual y la duración, consulta MediaContent.

Escucha los eventos de video

Para escuchar los eventos del ciclo de vida del video, como cuando un video comienza o finaliza, pasa las devoluciones de llamada de eventos de la interfaz VideoControllerEventProps al componente NativeAdMediaView.

En el siguiente ejemplo, se pasan devoluciones de llamada para registrar eventos del ciclo de vida del video y se renderizan botones personalizados para controlar la reproducción de video:

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

Cuando habilitas los controles personalizados, puedes controlar la reproducción de video adjuntando la propiedad ref del tipo NativeAdMediaViewMethods al componente NativeAdMediaView. El tipo NativeAdMediaViewMethods tiene un alias de la interfaz VideoControllerMethods, que expone los métodos playVideo, pauseVideo, stopVideo y setVideoMuted en el objeto ref.

Configura la posición de AdChoices

Para personalizar la ubicación del ícono de AdChoices, especifica la propiedad adChoicesPlacement en el objeto NativeAdRequest con el objeto AdChoicesPlacement.

En el siguiente ejemplo, se configura la posición del ícono de AdChoices en la esquina superior izquierda de la solicitud de anuncio:

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

En este ejemplo, también se devuelve el anuncio cargado si se realiza correctamente y se registra un mensaje de error si falla.

Configura gestos de clic personalizados

Configura los gestos de deslizamiento como acciones de clic en los anuncios nativos con las propiedades customClickGestureDirection y customClickGestureAllowTaps del objeto NativeAdRequest.

En el siguiente ejemplo, se configura la dirección del gesto como un deslizamiento hacia la derecha y se permiten los toques cuando se carga un anuncio:

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

En este ejemplo, también se verifica si los gestos de clic personalizados están habilitados, se devuelve el anuncio cargado si se realiza correctamente y se registra un error si falla.

Después de cargar el anuncio, verifica la propiedad ad.isCustomClickGestureEnabled para comprobar si los gestos de clic personalizados están activos para ese anuncio.

Próximos pasos

Después de configurar las funciones avanzadas de los anuncios nativos, puedes obtener información sobre lo siguiente: