Gelişmiş yerel özellikleri ayarlama

Doğal reklamlar, reklam entegrasyonunuzu özelleştirmenize olanak tanıyan aşağıdaki ileri seviye özellikleri sunar:

  • Video oynatma kontrolleri: Video oynatma davranışını özelleştirin ve video yaşam döngüsü olaylarını dinleyin.
  • Reklam Seçenekleri simgesi yerleşimi: Reklam Seçenekleri simgesinin yerleşimini özelleştirin.
  • Özel tıklama hareketleri: Kaydırma hareketlerini tıklama işlemleri olarak yapılandırın.

Bu kılavuzda, Google Mobile Ads SDK for React Native ile doğal reklamların ileri seviye özelliklerini nasıl kullanacağınız gösterilmektedir.

Ön koşullar

Devam etmeden önce şunları yapın:

Video oynatmayı ve etkinlikleri yönetme

Video öğeleri içeren doğal reklamlar isterken video oynatma başlatma seçeneklerini özelleştirin, video yaşam döngüsü olaylarını dinleyin ve video oynatmayı kontrol edin.

Video isteği seçeneklerini yapılandırma

İlk video davranışını özelleştirmek için VideoOptions nesnesini kullanarak NativeAdRequest nesnesinde videoOptions özelliğini ayarlayın.

Aşağıdaki örnekte, video oynatılmaya başladığında sesinin kapalı olması ayarlanmaktadır:

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

Reklam yüklendikten sonra bu örnek, reklamın bir video öğesi içerip içermediğini de kontrol eder, video meta verilerini günlüğe kaydeder ve yüklenen reklamı döndürür. Başarısız olursa örnek, bir hata mesajı kaydeder.

En-boy oranı, geçerli zaman ve süre gibi video meta veri özellikleri hakkında daha fazla bilgi için MediaContent sayfasını inceleyin.

Video etkinliklerini dinleme

Bir videonun başlaması veya bitmesi gibi video yaşam döngüsü olaylarını dinlemek için VideoControllerEventProps arayüzünden NativeAdMediaView bileşenine etkinlik geri çağırmaları iletin.

Aşağıdaki örnekte, video yaşam döngüsü olaylarını günlüğe kaydetmek için geri çağırmalar iletilir ve video oynatmayı kontrol etmek için özel düğmeler oluşturulur:

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

Özel kontrolleri etkinleştirdiğinizde, NativeAdMediaViewMethods türünün ref özelliğini NativeAdMediaView bileşenine ekleyerek video oynatmayı kontrol edin. NativeAdMediaViewMethods türü, ref nesnesinde playVideo, pauseVideo, stopVideo ve setVideoMuted yöntemlerini gösteren VideoControllerMethods arayüzünün takma adıdır.

Reklam Seçenekleri yerleşimini yapılandırma

Reklam Seçenekleri simgesinin yerleşimini özelleştirmek için AdChoicesPlacement nesnesini kullanarak NativeAdRequest nesnesinde adChoicesPlacement mülkünü belirtin.

Aşağıdaki örnekte, reklam isteğinde Reklam Seçenekleri simgesinin yerleşimi sol üst köşeye ayarlanmıştır:

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

Bu örnekte de işlem başarılı olduğunda yüklenen reklam döndürülür ve başarısız olduğunda bir hata mesajı kaydedilir.

Özel tıklama hareketlerini yapılandırma

NativeAdRequest nesnesindeki customClickGestureDirection ve customClickGestureAllowTaps özelliklerini kullanarak kaydırma hareketlerini doğal reklamlarda tıklama işlemleri olarak yapılandırın.

Aşağıdaki örnekte, hareket yönü sağa kaydırma olarak yapılandırılır ve reklam yüklenirken dokunma işlemlerine izin verilir:

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

Bu örnekte ayrıca özel tıklama hareketlerinin etkin olup olmadığı kontrol edilir, işlem başarılı olursa yüklenen reklam döndürülür ve başarısız olursa bir hata kaydedilir.

Reklamı yükledikten sonra, özel tıklama hareketlerinin o reklam için etkin olup olmadığını doğrulamak üzere ad.isCustomClickGestureEnabled özelliğini kontrol edin.

Sonraki adımlar

Gelişmiş doğal reklam özelliklerinizi yapılandırdıktan sonra aşağıdakiler hakkında bilgi edinebilirsiniz: