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

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

راهنمایی و روال‌های مطلوب آگهی در صفحه باز شدن برنامه.

این راهنما نحوه ادغام آگهی‌های باز شدن برنامه را در برنامه React Native توضیح می‌دهد.

پیش‌نیازها

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

Android 

ca-app-pub-3940256099942544/9257395921

iOS 

ca-app-pub-3940256099942544/5575463023

بار کردن آگهی

برای بار کردن آگهی در صفحه باز شدن برنامه، روش load را فراخوانی کنید.

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

export async function loadAppOpenAd(
  adUnitId: string,
): Promise<AppOpenAd | null> {
  try {
    const ad = await AppOpenAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load app open ad:', loadError.message);
    return null;
  }
}

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

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

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

export function registerAdEvents(ad: AppOpenAd) {
  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log('App open ad showed full screen content.');
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log('App open ad dismissed full screen content.');
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error('Failed to show app open ad:', error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('App open ad recorded an impression.');
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('App open ad was clicked.');
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `App open ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
      );
    },
  };
}

این نمونه همچنین از روش destroy زمانی که کاربر آگهی را می‌بندد یا زمانی که آگهی نمایش داده نمی‌شود استفاده می‌کند. این فرایند منابعی را که آگهی استفاده کرده است آزاد می‌کند.

نمایش آگهی

برای نمایش آگهی در صفحه باز شدن برنامه، روش show را فراخوانی کنید:

export function showAppOpenAd(ad: AppOpenAd) {
  ad.show();
}

مدیریت آگهی‌ها با مدیر سطح برنامه

توصیه می‌کنیم آگهی‌های در صفحه باز شدن برنامه را در مدیر سطح برنامه خارج از درخت مؤلفه React مدیریت کنید. چون آگهی‌های در صفحه باز شدن برنامه وقتی کاربر برنامه را باز می‌کند یا به آن برمی‌گردد به‌طور سراسری نمایش داده می‌شود، مدیر سطح برنامه آگهی‌ها را از میانای کاربر جدا نگه می‌دارد.

نمونه زیر یک نمونه SingleLoadAppOpenAdManager ایجاد می‌کند که یک آگهی را بار می‌کند، رویدادهای آگهی را گوش می‌دهد، و دردسترس بودن آگهی را بررسی می‌کند:

export class SingleLoadAppOpenAdManager {
  private ad: AppOpenAd | null = null;
  private loadTime = 0;
  private isShowingAd = false;

  async loadAd(adUnitId: string) {
    // Avoid re-loading if an ad is already loaded or showing.
    if (this.ad) {
      return;
    }
    try {
      this.ad = await AppOpenAd.load({adUnitId});
      this.loadTime = Date.now();
      this.ad.adEventCallback = {
        onAdDismissedFullScreenContent: () => {
          this.ad?.destroy();
          this.ad = null;
          this.isShowingAd = false;
          // Preload the next ad for future foreground transitions.
          this.loadAd(adUnitId);
        },
        onAdFailedToShowFullScreenContent: () => {
          // An ad object that fails to present is consumed and cannot be reused.
          // Clean up native resources and preload a new ad for future events.
          this.ad?.destroy();
          this.ad = null;
          this.isShowingAd = false;
          this.loadAd(adUnitId);
        },
      };
    } catch (error) {
      console.error('Failed to load app open ad:', error);
    }
  }

  showAdIfAvailable() {
    if (!this.ad || !this.isAdAvailable()) {
      console.warn(
        'App open ad cannot be shown: ad is not loaded or has expired.',
      );
      return;
    }
    if (this.isShowingAd) {
      console.warn('App open ad cannot be shown: an ad is already displaying.');
      return;
    }

    this.ad.show();
    this.isShowingAd = true;
  }

  isAdAvailable(): boolean {
    // App Open ads expire after 4 hours per Google Mobile Ads policy.
    const FOUR_HOURS_IN_MS = 4 * 60 * 60 * 1000;
    return this.ad !== null && Date.now() - this.loadTime < FOUR_HOURS_IN_MS;
  }
}

مدیر سطح برنامه به شما کمک می‌کند کارهای زیر را انجام دهید:

  • وضعیت آگهی را مستقل از پیمایش صفحه و چرخه‌های حیات مؤلفه نگه دارید.
  • وضعیت ارائه آگهی را در رویدادهای رشته بومی ردگیری کنید.
  • انتقال‌های پیش‌زمینه برنامه را مدیریت کنید تا از نمایش آگهی‌های تکراری جلوگیری شود.
  • آگهی‌ها را در پس‌زمینه پیش‌بارگیری کنید تا آگهی‌ها هنگام باز شدن برنامه‌تان دردسترس باشند.
  • برای جلوگیری از نمایش آگهی‌های منقضی‌شده، محدودیت انقضای آگهی چهار ساعته را بررسی کنید.
  • بار کردن، نمایش دادن، و پاک کردن منابع آگهی را ترکیب کنید.

گوش دادن به رویدادهای پیش‌زمینه برنامه

برای نمایش آگهی‌ها هنگام بازگشت برنامه به پیش‌نما، از ماژول AppState برای گوش دادن به تغییرات وضعیت برنامه در ریشه برنامه، مثلاً در فایل App.tsx، استفاده کنید. کارهای زیر را انجام دهید:

  1. شنونده AppState را برای رویداد 'change' ثبت کنید.
  2. وقتی وضعیت به وضعیت 'active' تغییر می‌کند، روش showAdIfAvailable را در نمونه مدیر آگهی فراخوانی کنید.

نمونه زیر به رویدادهای پیش‌زمینه برنامه گوش می‌دهد و درصورت دردسترس بودن، آگهی نشان می‌دهد:

export function setupAppOpenAdForegroundListener(adManager: {
  showAdIfAvailable: () => void;
}): NativeEventSubscription {
  return AppState.addEventListener('change', (nextAppState: AppStateStatus) => {
    if (nextAppState === 'active') {
      adManager.showAdIfAvailable();
    }
  });
}

با شروع سرد و صفحه‌های بار کردن آشنا شوید

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

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

راه‌اندازی صفحه آزمایشی

برای آزمایش تعاملی آگهی‌ها یا نمایش آگهی‌ها در صفحه‌ای خاص، نمونه آگهی را در وضعیت مؤلفه مدیریت کنید.

مثال زیر آگهی در صفحه باز شدن برنامه را با قلاب پاک‌سازی useEffect در مؤلفه React Native ادغام می‌کند. اگر مؤلفه قبل‌از نمایش آگهی جدا شود، این قلاب منابع بومی را آزاد می‌کند.

export function AppOpenSingleLoadScreen() {
  const [ad, setAd] = useState<AppOpenAd | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [status, setStatus] = useState<string>('Idle');

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

  const handleLoad = async () => {
    setStatus('Loading App Open ad...');
    const loadedAd = await loadAppOpenAd(APP_OPEN_AD_UNIT_ID);
    if (loadedAd) {
      registerAdEvents(loadedAd);
      const onDismiss =
        loadedAd.adEventCallback?.onAdDismissedFullScreenContent;
      loadedAd.adEventCallback = {
        ...loadedAd.adEventCallback,
        onAdDismissedFullScreenContent: () => {
          onDismiss?.();
          setStatus('Ad dismissed.');
        },
      };
      setAd((prevAd) => {
        prevAd?.destroy();
        return loadedAd;
      });
      setIsLoaded(true);
      setStatus('App Open ad loaded!');
    } else {
      setStatus('Failed to load App Open ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showAppOpenAd(ad);
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>App Open Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Ad" onPress={handleLoad} />
        <View style={styles.spacerSmall} />
        <Button title="Show Ad" onPress={handleShow} disabled={!isLoaded} />
      </View>
    </View>
  );
}

مراحل بعدی

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