راه‌اندازی آگهی‌های برنمایی

آگهی‌های برنمایی جایگاه ثابتی را در چیدمان برنامه‌تان اشغال می‌کنند، مثلاً در بالا یا پایین صفحه‌نمایش دستگاه. این آگهی‌ها درحین تعامل کاربران با برنامه‌تان روی صفحه باقی می‌مانند و پس‌از مدت‌زمانی که شما تنظیم می‌کنید بازآوری می‌شوند. بنرهای تطبیقی لنگرانداخته از اندازه آگهی برای هر دستگاه بااستفاده از پهنای آگهی‌ای که شما مشخص می‌کنید استفاده می‌کنند.

این صفحه نحوه ادغام کردن آگهی‌های برنمای تطبیقی لنگرانداخته در برنامه React Native را پوشش می‌دهد.

پیش‌نیازها

پیش‌از ادامه دادن، کارهای زیر را انجام دهید:

Android 

ca-app-pub-3940256099942544/9214589741

iOS 

ca-app-pub-3940256099942544/2435281174

دریافت اندازه آگهی

برای درخواست آگهی برنمای تطبیقی لنگرانداخته، روش AdSize.getLargeAnchoredAdaptiveBannerAdSize را با عرض محفظه آگهی دردسترس به پیکسل مستقل از تراکم (dp) فراخوانی کنید. این روش قولی را برمی‌گرداند که به شیء AdSize تبدیل می‌شود.

مثال زیر اندازه آگهی را برای آگهی برنمای تطبیقی لنگرانداخته دریافت می‌کند و برمی‌گرداند:

export async function getAdaptiveAdSize(width: number): Promise<AdSize> {
  const adSize = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(width);
  return adSize;
}

بار کردن آگهی

پس‌از دریافت شیء AdSize، روش load را در کلاس BannerAd با شناسه واحد آگهی و اندازه آگهی‌تان فراخوانی کنید.

مثال زیر یک آگهی برنمای تطبیقی لنگردار را با اندازه آگهی و شناسه واحد آگهی بار می‌کند، درصورت موفقیت، نمونه BannerAd بارشده را دریافت می‌کند، و درصورت عدم موفقیت، خطا را ثبت می‌کند:

export function loadBannerAd(
  adUnitId: string,
  adSize: AdSize,
  callback?: BannerAdLoadCallback,
): void {
  BannerAd.load(
    {adUnitId, adSize},
    {
      // Called when an ad has finished loading.
      onAdLoaded: (ad) => {
        console.log('Banner ad loaded successfully.');
        callback?.onAdLoaded?.(ad);
      },
      // Called when an ad request fails.
      onAdFailedToLoad: (error: LoadAdError) => {
        console.error('Failed to load banner ad:', error.message);
        callback?.onAdFailedToLoad?.(error);
      },
    },
  );
}

بازآوری آگهی

اگر واحد آگهی‌تان را برای بازآوری پیکربندی کرده‌اید، وقتی آگهی بار نمی‌شود، لازم نیست آگهی دیگری درخواست کنید. Google Mobile Ads SDK for React Native به هر نرخ بازآوری که در AdMob UI مشخص کرده‌اید احترام می‌گذارد. اگر بازآوری را فعال نکرده‌اید، درخواست جدیدی صادر کنید. برای جزئیات بیشتر درباره بازآوری واحد آگهی، مانند تنظیم نرخ بازآوری، به استفاده از بازآوری خودکار برای آگهی‌های برنما مراجعه کنید.

نمایش آگهی برنمایی

برای نمایش نمونه BannerAd بارشده، نمونه آگهی را به ویژگی ad مؤلفه BannerAdView در سلسله‌مراتب نمای خود ارسال کنید.

مثال زیر آگهی‌ای را نشان می‌دهد و وقتی مؤلفه جدا می‌شود، آگهی را ازبین می‌برد:

export function BannerAdViewComponent({ad}: {ad: BannerAd}): React.JSX.Element {
  useEffect(() => {
    // Destroy native resources when the component unmounts.
    return () => {
      ad.destroy();
    };
  }, [ad]);

  return <BannerAdView ad={ad} />;
}

این مثال روش destroy را زمانی فراخوانی می‌کند که جزء جدا می‌شود یا زمانی که نمونه آگهی جایگزین می‌شود. این فرایند حافظه و منابعی را که آگهی استفاده می‌کند آزاد می‌کند.

گوش دادن به رویدادهای آگهی

برای گوش دادن به رویدادهای آگهی، مثل ظهور آگهی و کلیک، فراخوانی‌های برگشتی را در مؤلفه BannerAdView تنظیم کنید. برای همه پاسخ‌های تماس، BannerAdViewProps را ببینید.

مثال زیر فراخوان‌های برگشتی را برای گوش دادن به رویدادهای آگهی برنمایی تنظیم می‌کند:

export function BannerEventsExample({ad}: {ad: BannerAd}): React.JSX.Element {
  return (
    <BannerAdView
      ad={ad}
      // Called when an impression is recorded for an ad.
      onAdImpression={() => {
        console.log('Banner ad recorded an impression.');
      }}
      // Called when a click is recorded for an ad.
      onAdClicked={() => {
        console.log('Banner ad clicked.');
      }}
      // Called when the ad opens an in-app overlay or landing page.
      onAdShowedFullScreenContent={() => {
        console.log('Banner ad opened overlay content.');
      }}
      // Called when the user dismisses the ad overlay.
      onAdDismissedFullScreenContent={() => {
        console.log('Banner ad overlay dismissed.');
      }}
      // Called when the ad is estimated to have earned money.
      onAdPaid={(adValue) => {
        console.log(
          `Banner ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
        );
      }}
      // Called when the ad automatically refreshes.
      onAdRefreshed={() => {
        console.log('Banner ad refreshed.');
      }}
      // Called when the ad fails to automatically refresh.
      onAdFailedToRefresh={(error) => {
        console.error('Banner ad failed to refresh:', error.message);
      }}
    />
  );
}

این نمونه به رویدادهای آگهی، مانند رد کردن آگهی، ظهور، کلیک، ارائه تمام‌صفحه، درآمد تخمینی آگهی، و موفقیت و شکست در بازآوری گوش می‌دهد.

مشاهده مثال کامل

این بخش نمونه کامل ادغام آگهی برنما در مؤلفه React Native را پوشش می‌دهد.

مثال زیر آگهی برنما را در مؤلفه React Native ادغام می‌کند و نمونه آگهی را در حالت مدیریت می‌کند:

export function BannerScreen() {
  const {width} = useWindowDimensions();
  const insets = useSafeAreaInsets();
  const [ad, setAd] = useState<BannerAd | null>(null);
  const [status, setStatus] = useState('Idle');

  useEffect(() => {
    return () => {
      ad?.destroy();
    };
  }, [ad]);

  const handleLoadAd = async () => {
    setStatus('Loading adaptive banner ad...');
    try {
      const adaptiveSize = await getAdaptiveAdSize(width);
      loadBannerAd(BANNER_AD_UNIT_ID, adaptiveSize, {
        onAdLoaded: (loadedAd) => {
          setAd(loadedAd);
          setStatus('Banner ad loaded successfully.');
        },
        onAdFailedToLoad: (error: LoadAdError) => {
          setStatus(`Failed to load banner ad: ${error.message}`);
        },
      });
    } catch (error) {
      setStatus(`Failed to get adaptive ad size: ${error}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Anchored Adaptive Banner Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Banner Ad" onPress={handleLoadAd} />
      </View>
      {ad ? (
        <View style={[styles.bannerContainer, {bottom: insets.bottom}]}>
          <BannerAdView
            ad={ad}
            onAdImpression={() => setStatus('Banner ad recorded impression.')}
            onAdClicked={() => setStatus('Banner ad clicked.')}
            onAdShowedFullScreenContent={() =>
              setStatus('Banner ad showed overlay content.')
            }
            onAdDismissedFullScreenContent={() =>
              setStatus('Banner ad overlay dismissed.')
            }
          />
        </View>
      ) : null}
    </View>
  );
}

BANNER_AD_UNIT_ID را با شناسه واحد آگهی‌تان جایگزین کنید.

مراحل بعدی

پس‌از ادغام آگهی‌های برنمایی، موضوعات زیر را کاوش کنید: