অ্যাপ খোলার সঙ্গে সঙ্গে দেখা যায় এমন বিজ্ঞাপন সেট-আপ করা

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

এই নির্দেশিকা থেকে জানতে পারবেন যে কীভাবে React Native অ্যাপে অ্যাপ খোলার সাথে সাথে দেখা যায় এমন বিজ্ঞাপন ইন্টিগ্রেট করতে হয়।

পূর্বশর্ত

চালিয়ে যাওয়ার আগে, নিম্নলিখিত কাজগুলি করুন:

Android 

ca-app-pub-3940256099942544/9257395921

iOS 

ca-app-pub-3940256099942544/5575463023

বিজ্ঞাপন প্রিলোড করা সম্পর্কে বোঝা

Google Mobile Ads SDK for React Native-এ বিজ্ঞাপন প্রিলোড করার সুবিধা বিজ্ঞাপন লোড ও ক্যাশ করার প্রসেস অটোমেট করে।

বিজ্ঞাপন প্রিলোড করার সুবিধাগুলি হল:

  • রেফারেন্স ম্যানেজমেন্ট: বিজ্ঞাপন দেখানো না হওয়া পর্যন্ত রেফারেন্স বজায় রাখে।
  • অটোমেটিক রিলোড করা: ক্যাশে থেকে কোনও বিজ্ঞাপন ফিরিয়ে আনা হলে, নতুন বিজ্ঞাপন লোড করে।
  • ম্যানেজ করা রিট্রাই: কোনও বিজ্ঞাপন লোড না হলে নতুন বিজ্ঞাপন লোড করে।
  • মেয়াদ শেষ হওয়া ম্যানেজ করা: মেয়াদ শেষ হওয়ার আগে বিজ্ঞাপন রিফ্রেশ করে।
  • ক্যাশ অপ্টিমাইজেশন: সর্বোচ্চ অগ্রাধিকারের বিজ্ঞাপন ডেলিভার করার জন্য ক্যাশ অর্ডার অপ্টিমাইজ করে।

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

প্রিলোড করা শুরু করুন

বিজ্ঞাপন প্রিলোড করা শুরু করতে, AppOpenAdPreloader.start মেথড কল করুন এবং বাফার স্টেট পরিবর্তন মনিটর করতে আপনার preloadId ভ্যালু, কনফিগারেশন সেটিংস এবং ইভেন্ট কলব্যাক পাস করুন:

export function startAppOpenAdPreloader(
  adUnitId: string,
  preloadId: string,
  customPreloadCallback?: PreloadCallback,
): boolean {
  const started = AppOpenAdPreloader.start(
    preloadId,
    {
      request: {adUnitId},
      bufferSize: 2,
    },
    {
      // Called when an ad is preloaded into the buffer.
      onAdPreloaded: (event) => {
        console.log(`App open ad preloaded for ${event.preloadId}`);
        customPreloadCallback?.onAdPreloaded?.(event);
      },
      // Called when an ad fails to preload.
      onAdFailedToPreload: (error: LoadAdError) => {
        console.error('Failed to preload app open ad:', error.message);
        customPreloadCallback?.onAdFailedToPreload?.(error);
      },
      // Called when all preloaded ads in the buffer have been shown.
      onAdsExhausted: () => {
        console.log('App open ad buffer exhausted.');
        customPreloadCallback?.onAdsExhausted?.();
      },
    },
  );
  return started;
}

preloadId হল একটি স্ট্রিং যা অনন্যভাবে একটি বিজ্ঞাপন প্রিলোডিং কনফিগারেশন শনাক্ত করে। আপনার অ্যাপে adUnitId শুধুমাত্র একটি প্রিলোডিং কনফিগারেশনের জন্য ব্যবহার করা হলে, আপনি সেই বিজ্ঞাপন ইউনিট আইডিকে প্রিলোড আইডি হিসেবে ব্যবহার করতে পারবেন। আপনার অ্যাপে একই বিজ্ঞাপন ইউনিট আইডির জন্য একাধিক প্রিলোডার প্রয়োজন হলে, প্রতিটি প্রিলোড আইডির জন্য আলাদা স্ট্রিং পাস করুন।

আপনার অ্যাপ বাফার থেকে প্রিলোড করা বিজ্ঞাপন পোল করলে, Google Mobile Ads SDK for React Native বাফার রিফিল করার জন্য ব্যাকগ্রাউন্ডে রিপ্লেসমেন্ট বিজ্ঞাপনের অনুরোধ করে। বাফারে কোনও প্রিলোড করা বিজ্ঞাপন না থাকলে, Google Mobile Ads SDK for React Native, onAdsExhausted কলব্যাককে ইনভোক করে।

প্রিলোড ক্যাশে সীমা

Google Mobile Ads SDK for React Native প্রিলোড করা বিজ্ঞাপনের মোট সংখ্যার উপর অ্যাপ-ব্যাপী সীমা এনফোর্স করে:

  • ডিফল্ট সীমা: Google মেমরিতে সর্বাধিক ছয়টি প্রিলোড করা বিজ্ঞাপন রাখে।
  • প্রতিটি প্রিলোড আইডির জন্য আমরা বাফার সাইজ দুই রাখার সাজেশন দিই।

আপনার অ্যাপ যদি অ্যাপ-ব্যাপী সীমায় পৌঁছে যায়, তাহলে আগে থেকে লোড করা বিজ্ঞাপনের জন্য ব্যাকগ্রাউন্ড অনুরোধগুলি পজ হয়ে যায় যতক্ষণ না বিদ্যমান বিজ্ঞাপনগুলি পোল করা হয় এবং দেখানো হয় বা ধ্বংস করা হয়।

পোল করুন এবং বিজ্ঞাপনটি দেখান

উপলভ্য প্রিলোড করা বিজ্ঞাপন চেক করতে এবং বিজ্ঞাপনের ইনস্ট্যান্স ফিরিয়ে আনতে, AppOpenAdPreloader.pollAd মেথড কল করুন।

ফুল-স্ক্রিন প্রেজেন্টেশন ইভেন্ট শুনতে, show মেথড কল করার আগে, ফেরত আসা AppOpenAd ইনস্ট্যান্সের adEventCallback প্রপার্টিতে কলব্যাক রেজিস্টার করুন:

export function showPreloadedAppOpenAd(
  preloadId: string,
  customAdEventCallback?: FullScreenAdEventCallback,
) {
  if (!AppOpenAdPreloader.isAdAvailable(preloadId)) {
    console.log('No preloaded app open ad available right now.');
    return;
  }

  const ad = AppOpenAdPreloader.pollAd(preloadId);
  if (!ad) {
    return;
  }

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

  ad.show();
}

মেমরি ও রিসোর্স রিলিজ করতে, ব্যবহারকারী কোনও বিজ্ঞাপন বাতিল করলে বা বিজ্ঞাপন দেখাতে না পারলে, onAdDismissedFullScreenContent এবং onAdFailedToShowFullScreenContent কলব্যাকে ad.destroy মেথড কল করুন।

উত্তরের তথ্য পড়ুন

ক্যাশে থেকে বিজ্ঞাপন না সরিয়ে পরবর্তী প্রিলোড করা বিজ্ঞাপনের বিবরণ খতিয়ে দেখতে, AppOpenAdPreloader.peekAdResponseInfo মেথড কল করুন:

export function peekAppOpenAdResponseInfo(
  preloadId: string,
): ResponseInfo | null {
  const responseInfo = AppOpenAdPreloader.peekAdResponseInfo(preloadId);
  if (responseInfo) {
    console.log('Next preloaded app open ad response info:', responseInfo);
  }
  return responseInfo;
}

অ্যাপ-লেভেল ম্যানেজারের মাধ্যমে অ্যাপ খোলার সাথে সাথে দেখা যায় এমন বিজ্ঞাপন ম্যানেজ করা

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

অ্যাপ-লেভেল ম্যানেজার ব্যবহার করলে বেশ কিছু গুরুত্বপূর্ণ সুবিধা পাওয়া যায়:

  • প্রিলোডার স্টেটকে স্বতন্ত্র স্ক্রিন নেভিগেশন এবং কম্পোনেন্ট লাইফসাইকেল থেকে আলাদা রাখে।
  • আপনার অ্যাপ জুড়ে একটি শেয়ার করা ইনস্ট্যান্সে বিজ্ঞাপন ইভেন্ট কলব্যাক, স্টেট ট্র্যাকিং এবং ক্লিনআপ কেন্দ্রীভূত করে।
  • ফোরগ্রাউন্ড ইভেন্ট কখন শোনা হবে তা নিয়ন্ত্রণ করে, বিজ্ঞাপন বাতিল করার সময় ডুপ্লিকেট প্রেজেন্টেশন প্রতিরোধ করে।

নিম্নলিখিত উদাহরণে AppOpenAdPreloader অবজেক্ট ব্যবহার করে অ্যাপ-লেভেল ম্যানেজার প্রয়োগ করা হয়েছে:

export class AppOpenAdManager {
  private adUnitId: string;
  private preloadId: string;
  private appStateSubscription?: NativeEventSubscription;
  private startTimeoutId?: ReturnType<typeof setTimeout>;

  constructor(adUnitId: string, preloadId: string) {
    this.adUnitId = adUnitId;
    this.preloadId = preloadId;
  }

  start(): boolean {
    if (!AppOpenAdPreloader.getConfiguration(this.preloadId)) {
      AppOpenAdPreloader.start(
        this.preloadId,
        {
          request: {adUnitId: this.adUnitId},
          bufferSize: 2,
        },
        {
          onAdPreloaded: (event) => {
            console.log(`App open ad preloaded for ${event.preloadId}`);
          },
          onAdFailedToPreload: (error: LoadAdError) => {
            console.error('Failed to preload app open ad:', error.message);
          },
          onAdsExhausted: () => {
            console.log('App open ad buffer exhausted.');
          },
        },
      );
    }

    if (!this.appStateSubscription && !this.startTimeoutId) {
      // Delay attaching the listener to ensure native dismissal transitions complete
      this.startTimeoutId = setTimeout(() => {
        this.startTimeoutId = undefined;
        if (!this.appStateSubscription) {
          this.appStateSubscription = AppState.addEventListener(
            'change',
            (nextAppState: AppStateStatus) => {
              if (nextAppState === 'active') {
                this.showAdIfAvailable();
              }
            },
          );
        }
      }, APP_STATE_LISTENER_DELAY_MS);
    }

    return true;
  }

  pause(): void {
    if (this.startTimeoutId) {
      clearTimeout(this.startTimeoutId);
      this.startTimeoutId = undefined;
    }
    this.appStateSubscription?.remove();
    this.appStateSubscription = undefined;
  }

  stop(): void {
    this.pause();
    AppOpenAdPreloader.destroy(this.preloadId);
  }

  showAdIfAvailable() {
    if (!AppOpenAdPreloader.isAdAvailable(this.preloadId)) {
      console.log('App open ad is not preloaded or available right now.');
      return;
    }

    const ad = AppOpenAdPreloader.pollAd(this.preloadId);
    if (!ad) {
      return;
    }

    // Pause listener while presenting the ad
    this.pause();

    ad.adEventCallback = {
      onAdShowedFullScreenContent: () => {
        console.log('Preloaded app open ad showed full screen content.');
      },
      onAdDismissedFullScreenContent: () => {
        console.log('Preloaded app open ad dismissed full screen content.');
        ad.destroy();
        this.start();
      },
      onAdFailedToShowFullScreenContent: (error) => {
        console.error('Failed to show preloaded app open ad:', error);
        ad.destroy();
        this.start();
      },
    };

    ad.show();
  }
}

অ্যাপের ফোরগ্রাউন্ডিং ইভেন্ট শুনুন

আপনার অ্যাপ ফোরগ্রাউন্ডে ফিরে এলে বিজ্ঞাপন দেখাতে, আপনার অ্যাপের রুট কম্পোনেন্টে AppState মডিউলে একটি change লিসেনার রেজিস্টার করুন, যেমন App.tsx। স্ট্যাটাস active-এ পরিবর্তিত হলে চেক করুন। যেমন, App.tsx কম্পোনেন্টে আপনার অ্যাড ম্যানেজার ইনস্ট্যান্সে start মেথড কল করুন।

বিজ্ঞাপনের ওভারলে বা ল্যান্ডিং পৃষ্ঠা দেখানো, যেমন ফুল-স্ক্রিন বিজ্ঞাপন দেখানো বা ব্যানার বিজ্ঞাপনে ট্যাপ করা, আপনার অ্যাপ্লিকেশনকে ব্যাকগ্রাউন্ডে ঠেলে দেয়। ব্যবহারকারী আপনার অ্যাপ্লিকেশনে ফিরে এলে, আপনার অ্যাপ একটি নতুন active স্টেট ইভেন্ট পায়। কোনও বিজ্ঞাপন থেকে ফিরে আসার সময় ক্যাশে থেকে অ্যাপ খোলার সাথে সাথে দেখা যায় এমন বিজ্ঞাপন দেখানোর মতো অনিচ্ছাকৃত বিজ্ঞাপন প্রেজেন্টেশন বা লুপ আটকানোর জন্য, নিম্নলিখিত ধাপগুলি অনুসরণ করুন:

  1. ফুল-স্ক্রিন বিজ্ঞাপন দেখানোর আগে AppState ইভেন্ট লিসেনার সরিয়ে দিন।
  2. ব্যবহারকারী বিজ্ঞাপন বাতিল করলে বা বিজ্ঞাপন দেখাতে না পারলে, onAdDismissedFullScreenContent এবং onAdFailedToShowFullScreenContent কলব্যাকে আবার AppState ইভেন্ট লিসেনার যোগ করুন।

ফোরগ্রাউন্ড ইভেন্ট লিসনার কখন পজ ও আবার চালু করা হবে তা নিয়ন্ত্রণ করার সম্পূর্ণ উদাহরণ দেখতে, AppOpenAdManager ইমপ্লিমেন্টেশন দেখুন।

কোল্ড স্টার্ট ও লোডিং স্ক্রিন সম্পর্কে জানুন

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

বিজ্ঞাপনের অনুরোধে দেরি হওয়ার কারণে, বিজ্ঞাপন দেখানোর আগে ব্যবহারকারী আপনার অ্যাপের সাথে ইন্টার‍্যাক্ট করতে পারেন। অ্যাপ অ্যাসেট লোড হওয়ার সময়, শুধুমাত্র লোডিং স্ক্রিন থেকে কোল্ড স্টার্টে অ্যাপ খোলার সাথে সাথে দেখা যায় এমন বিজ্ঞাপন দেখান। অ্যাসেট লোড হওয়া সম্পূর্ণ হলে এবং বিজ্ঞাপন লোড হওয়ার আগেই ব্যবহারকারী মূল কন্টেন্টে পৌঁছে গেলে, বিজ্ঞাপন দেখাবেন না।

রিসোর্স ক্লিন-আপ করুন

কোনও স্ক্রিন বা বিজ্ঞাপন ইউনিট আইডির জন্য প্রিলোড করার আর প্রয়োজন না থাকলে, যেমন বিজ্ঞাপন প্রিলোড করে এমন স্ক্রিন থেকে অন্য কোথাও নেভিগেট করার সময়, AppOpenAdPreloader.destroy মেথড কল করুন যাতে প্রিলোডার রিসোর্স রিলিজ করা যায় এবং মেমরিতে অব্যবহৃত বিজ্ঞাপন অবজেক্ট হোল্ড করা আটকানো যায়:

export function destroyAppOpenAdPreloader(preloadId: string) {
  AppOpenAdPreloader.destroy(preloadId);
}

প্রিলোডার কিউ ধ্বংস করার পাশাপাশি, ব্যবহারকারী কোনও বিজ্ঞাপন বাতিল করলে বা বিজ্ঞাপন দেখাতে না পারলে, পোল করা বিজ্ঞাপনের প্রতিটি ইনস্ট্যান্স ধ্বংস করতে ভুলবেন না। বিস্তারিত জানতে, পোল করুন এবং বিজ্ঞাপন দেখান লিঙ্কে দেখুন।

সম্পূর্ণ উদাহরণ দেখুন

নিম্নলিখিত উদাহরণ কম্পোনেন্ট মাউন্টে প্রিলোড করা শুরু করে, উপলভ্য বিজ্ঞাপনের সংখ্যা ট্র্যাক করে এবং প্রিলোড করা অ্যাপ খোলার সাথে সাথে দেখা যায় এমন বিজ্ঞাপন দেখানোর জন্য কন্ট্রোল প্রদান করে:

export function AppOpenScreen() {
  const [numAdsAvailable, setNumAdsAvailable] = useState<number>(0);
  const [status, setStatus] = useState<string>('Preloader idle.');

  const refreshAdCount = () => {
    const count = AppOpenAdPreloader.getNumAdsAvailable(PRELOAD_ID);
    setNumAdsAvailable(count);
  };

  useEffect(() => {
    // Start preloading ads on component mount
    const started = startAppOpenAdPreloader(APP_OPEN_AD_UNIT_ID, PRELOAD_ID, {
      onAdPreloaded: () => {
        refreshAdCount();
        setStatus('App open ad preloaded into buffer.');
      },
      onAdFailedToPreload: (error) => {
        setStatus(`Failed to preload app open ad: ${error.message}`);
      },
      onAdsExhausted: () => {
        refreshAdCount();
        setStatus('Preload buffer exhausted for app open ads.');
      },
    });
    if (started) {
      setStatus('Preloader started.');
    }

    // Clean up preloader resources on component unmount
    return () => {
      destroyAppOpenAdPreloader(PRELOAD_ID);
    };
  }, []);

  const handleShowAd = () => {
    setStatus('Showing preloaded ad...');
    showPreloadedAppOpenAd(PRELOAD_ID, {
      onAdDismissedFullScreenContent: () => {
        setStatus('Ad dismissed.');
      },
      onAdFailedToShowFullScreenContent: (error) => {
        setStatus(`Failed to show preloaded ad: ${error.message}`);
      },
    });
    refreshAdCount();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Preload App Open Ads</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <Text style={styles.status}>Ads Available: {numAdsAvailable}</Text>
      <View style={styles.buttonGroup}>
        <Button
          title="Show Preloaded Ad"
          onPress={handleShowAd}
          disabled={numAdsAvailable === 0}
        />
      </View>
    </View>
  );
}

নিম্নলিখিতগুলি পরিবর্তন করুন:

  • APP_OPEN_AD_UNIT_ID-এর জায়গায় আপনার বিজ্ঞাপন ইউনিট আইডি লিখুন।
  • আপনার প্রিলোডার আইডি সহ PRELOAD_ID।

পরবর্তী ধাপ

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