Konfigurowanie zaawansowanych funkcji reklam natywnych

Reklamy natywne oferują te funkcje zaawansowane, które umożliwiają dostosowanie integracji reklam:

  • Elementy sterujące odtwarzaniem wideo: dostosuj zachowanie odtwarzania wideo i nasłuchuj zdarzeń cyklu życia filmu.
  • Miejsce docelowe ikony Informacja: dostosuj miejsce docelowe ikony Informacja.
  • Gesty kliknięć niestandardowych: skonfiguruj gesty przesunięcia jako działania kliknięcia.

Z tego przewodnika dowiesz się, jak korzystać z funkcji zaawansowanych reklam natywnych w Google Mobile Ads SDK for React Native.

Wymagania wstępne

Zanim przejdziesz dalej, wykonaj te czynności:

Zarządzanie odtwarzaniem filmów i zdarzeniami

Podczas wysyłania żądań reklam natywnych zawierających komponenty wideo możesz dostosować opcje uruchamiania odtwarzania filmu, nasłuchiwać zdarzeń cyklu życia filmu i sterować odtwarzaniem filmu.

Konfigurowanie opcji żądania wideo

Aby dostosować początkowe zachowanie filmu, ustaw właściwość videoOptions obiektu NativeAdRequest za pomocą obiektu VideoOptions.

W tym przykładzie film jest wyciszony na początku odtwarzania:

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

Po wczytaniu reklamy ten przykład sprawdza też, czy reklama zawiera komponent wideo, rejestruje metadane filmu i zwraca wczytaną reklamę. W przypadku niepowodzenia przykład rejestruje komunikat o błędzie.

Więcej informacji o właściwościach metadanych filmu, takich jak format obrazu, bieżący czas i czas trwania, znajdziesz w MediaContent.

Nasłuchiwanie zdarzeń wideo

Aby nasłuchiwać zdarzeń cyklu życia filmu, takich jak rozpoczęcie lub zakończenie filmu, przekaż wywołania zwrotne zdarzeń z interfejsu VideoControllerEventProps do komponentu NativeAdMediaView.

W tym przykładzie wywołania zwrotne są przekazywane do rejestrowania zdarzeń cyklu życia filmu i renderowania niestandardowych przycisków do sterowania odtwarzaniem filmu:

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

Gdy włączysz niestandardowe elementy sterujące, możesz sterować odtwarzaniem filmu, dołączając właściwość ref typu NativeAdMediaViewMethods do komponentu NativeAdMediaView. Typ NativeAdMediaViewMethods jest aliasem interfejsu VideoControllerMethods, który udostępnia metody playVideo, pauseVideo, stopVideo i setVideoMuted w obiekcie ref.

Konfigurowanie miejsca docelowego reklamy z oznaczeniem Informacja

Aby dostosować umiejscowienie ikony Informacja, określ właściwość adChoicesPlacement w obiekcie NativeAdRequest za pomocą obiektu AdChoicesPlacement.

W poniższym przykładzie ikona Informacja jest umieszczana w lewym górnym rogu żądania reklamy:

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

Ten przykład zwraca też wczytaną reklamę w przypadku powodzenia i rejestruje komunikat o błędzie w przypadku niepowodzenia.

Konfigurowanie gestów kliknięć niestandardowych

Skonfiguruj gesty przesunięcia jako działania kliknięcia w reklamach natywnych, używając właściwości customClickGestureDirection i customClickGestureAllowTaps obiektu NativeAdRequest.

W poniższym przykładzie kierunek gestu jest skonfigurowany jako przesunięcie w prawo, a podczas wczytywania reklamy dozwolone są kliknięcia:

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

Ten przykład sprawdza też, czy niestandardowe gesty kliknięcia są włączone, zwraca wczytaną reklamę w przypadku powodzenia i rejestruje błąd w przypadku niepowodzenia.

Po wczytaniu reklamy sprawdź właściwość ad.isCustomClickGestureEnabled, aby się dowiedzieć, czy niestandardowe gesty kliknięcia są aktywne w przypadku tej reklamy.

Dalsze kroki

Po skonfigurowaniu funkcji zaawansowanych reklam natywnych możesz dowiedzieć się więcej o tych kwestiach: