একটি অ্যাপ ওপেন বিজ্ঞাপন লোড করা

ব্যবহারকারী আপনার অ্যাপ খুললে বা অ্যাপে ফিরে এলে অ্যাপ খোলার সাথে সাথে দেখা যায় এমন বিজ্ঞাপন দেখানো হয়। আপনার ব্যবহারকারী যেকোনও সময় অ্যাপ খোলার সাথে সাথে দেখা যায় এমন বিজ্ঞাপন বন্ধ করতে পারবেন। আপনার অ্যাপ লোড স্ক্রিন মনিটাইজ করতে, অ্যাপ খোলার সাথে সাথে দেখা যায় এমন বিজ্ঞাপন ব্যবহার করুন। বিস্তারিত জানতে, দেখুন

অ্যাপ খোলার সাথে সাথে দেখা যায় এমন বিজ্ঞাপন সংক্রান্ত নির্দেশিকা ও পেশাদার পদ্ধতি।

এই নির্দেশিকা থেকে জানতে পারবেন যে কীভাবে 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;
  }
}

বিজ্ঞাপন ইভেন্ট শুনুন

বিজ্ঞাপন দেখানোর আগে, লোড করা AppOpenAd ইনস্ট্যান্সে adEventCallback লিসেনার সেট করুন। এই লিসেনার বিজ্ঞাপন লাইফসাইকেল ইভেন্টের কলব্যাক পায়, যেমন স্ক্রিনে বিজ্ঞাপন দেখানো বা ব্যবহারকারীর বিজ্ঞাপনে ট্যাপ করা। উপলভ্য কলব্যাকের জন্য, 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. 'change' ইভেন্টের জন্য AppState লিসনার রেজিস্টার করুন।
  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>
  );
}

পরবর্তী ধাপ

অ্যাপ খোলার সাথে সাথে দেখা যায় এমন বিজ্ঞাপন ইন্টিগ্রেট করার পরে, নিম্নলিখিত বিষয়গুলি এক্সপ্লোর করুন: