React Native-এর জন্য Google Mobile Ads SDK সেট-আপ করা

বিজ্ঞাপন দেখাতে এবং উপার্জন করতে, আপনার React Native অ্যাপে Google Mobile Ads SDK for React Native ইন্টিগ্রেট করুন। এই নির্দেশিকায় Google Mobile Ads SDK for React Native ইনস্টল ও শুরু করা এবং বিজ্ঞাপনের ফর্ম্যাট বেছে নেওয়ার ব্যাপারে বলা হয়েছে।

পূর্বশর্ত

এগিয়ে যাওয়ার আগে, নিম্নলিখিতগুলি সংগ্রহ করুন:

  • React Native 0.85.0 বা তার পরবর্তী যেকোনও ভার্সন।
  • একটি AdMob অ্যাকাউন্ট এবং একটি অ্যাপ আইডি। অ্যাপ আইডি পেতে, AdMob-এ অ্যাপ সেট-আপ করুন দেখুন।

  • নিম্নলিখিত Android আইটেম:

    • Android API লেভেল ২৪ বা তার পরবর্তী ভার্সন।
    • Android Studio-এর লেটেস্ট ভার্সন।
    • Android Gradle প্লাগ-ইন (AGP) ভার্সন 8.0 বা তার পরবর্তী যেকোনও ভার্সন।

  • নিম্নলিখিত iOS আইটেম:

    • iOS ভার্সন 13.0 বা তার পরবর্তী যেকোনও ভার্সন।
    • Xcode ভার্সন 16.0 বা তার পরবর্তী যেকোনও ভার্সন এবং কমান্ড-লাইন টুল চালু করা আছে।
    • CocoaPods

Google Mobile Ads SDK for React Native ইনস্টল করুন

Google Mobile Ads SDK for React Native ইনস্টল করতে, নিম্নলিখিত ধাপগুলি অনুসরণ করুন:

  1. Google Drive থেকে gma-sdk-react-native ফোল্ডার ডাউনলোড করুন।

  2. আপনার কাজের প্রোজেক্ট ডিরেক্টরির বাইরে আলাদা একটি ডিরেক্টরিতে জিপ আর্কাইভ এক্সট্র্যাক্ট করুন। এই প্রসেস আপনার প্রোজেক্টের কনফিগারেশন ফাইলের সাথে দ্বন্দ্ব এড়াতে পারে।

  3. আপনার প্রোজেক্ট রুটে, একটি local_packages/ ডিরেক্টরি তৈরি করুন।

  4. এই ডিরেক্টরিতে, mobile-ads-0.1.0.tgz ফাইল কপি করুন:

    mkdir -p local_packages
cp EXTRACT_DIR/gma-sdk-react-native/google-mobile-ads/mobile-ads-0.1.0.tgz local_packages/

    EXTRACT_DIR-এর জায়গায় সেই ডিরেক্টরির পাথ লিখুন যেখানে আপনি আর্কাইভ এক্সট্র্যাক্ট করেছেন।

  5. আপনার পছন্দের প্যাকেজ ম্যানেজারের মাধ্যমে প্যাকেজ ইনস্টল করুন:

    npm

    npm install ./local_packages/mobile-ads-0.1.0.tgz

    তন্তু

    yarn add ./local_packages/mobile-ads-0.1.0.tgz

আপনার অ্যাপ কনফিগার করুন

প্ল্যাটফর্ম ডিপেন্ডেন্সির সাথে আপনার অ্যাপ কনফিগার করতে, আপনার প্রোজেক্ট রুটের app.json ফাইলে AdMob অ্যাপ আইডি যোগ করুন।

পরীক্ষা করার জন্য, নিম্নলিখিত উদাহরণে দেখানো স্যাম্পেল AdMob অ্যাপ আইডি ব্যবহার করুন:

{
  "name": "APP_NAME",
  "displayName": "APP_NAME",
  "googleMobileAds": {
    "android_app_id": "ca-app-pub-3940256099942544~3347511713",
    "ios_app_id": "ca-app-pub-3940256099942544~1458002511"
  }
}

বিল্ড করার সময়, Google Mobile Ads SDK for React Native android_app_id প্রপার্টিকে AndroidManifest.xml ফাইলে এবং ios_app_id প্রপার্টিকে আপনার বিল্ড করা Info.plist ফাইলে GADApplicationIdentifier কী হিসেবে যোগ করে।

প্ল্যাটফর্ম-নির্দিষ্ট বিকল্প বা ম্যানুয়াল কনফিগারেশনের জন্য, নিম্নলিখিত প্ল্যাটফর্মগুলির মধ্যে একটি বেছে নিন:

Android

আপনি একাধিক বিল্ড কনফিগারেশন ম্যানেজ করলে অথবা আগে থেকে আছে এমন Android অ্যাপে React Native ইন্টিগ্রেট করলে, app.json ফাইলের পরিবর্তে আপনার প্রোজেক্টের AndroidManifest.xml ফাইলের <application> এলিমেন্টে আপনার AdMob অ্যাপ আইডি যোগ করুন:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
  <application>
    <!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
    <meta-data
        android:name="com.google.android.gms.ads.APPLICATION_ID"
        android:value="SAMPLE_APP_ID"
        tools:replace="android:value"/>
  </application>
</manifest>

বিল্ড করার সময় Gradle অটোমেটিক Android ডিপেন্ডেন্সি সমাধান করে।

iOS

নিম্নলিখিত ধাপগুলি সম্পূর্ণ করুন:

  1. আপনার প্রোজেক্টের ios/ ডিরেক্টরি থেকে CocoaPods ডিপেন্ডেন্সি ইনস্টল করুন:

    pod install --repo-update

    অন্যথায়, আপনার প্রোজেক্ট রুট ডিরেক্টরি থেকে CocoaPods ডিপেন্ডেন্সি ইনস্টল করুন:

    npx pod-install

    CocoaPods অটো-লিঙ্কিং Xcode বিল্ড ফেজ স্ক্রিপ্ট কনফিগার করে যা আপনার তৈরি করা Info.plist ফাইলে app.json ফাইল থেকে ios_app_id প্রপার্টি যোগ করে।

  2. আপনার অ্যাপের Info.plist ফাইলে, Google cstr6suwn9.skadnetwork-এর জন্য <dict> এলিমেন্টে SKAdNetworkItems কী যোগ করুন এবং থার্ড-পার্টি ক্রেতা বেছে নিন।

    নিচের উদাহরণে একটি সম্পূর্ণ Info.plist ফাইল দেখানো হয়েছে, যেটিতে প্রয়োজনীয় SKAdNetworkItems অ্যারে আছে:

    সম্পূর্ণ উদাহরণ

    <key>SKAdNetworkItems</key>
<array>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>cstr6suwn9.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>4fzdc2evr5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>2fnua5tdw4.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>ydx93a7ass.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>p78axxw29g.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>v72qych5uu.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>ludvb6z3bs.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>cp8zw746q7.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3sh42y64q3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>c6k4g5qg8m.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>s39g8k73mm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>wg4vff78zm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3qy4746246.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>f38h382jlk.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>hs6bdukanm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>mlmmfzh3r3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>v4nxqhlyqp.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>wzmmz9fp6w.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>su67r6k2v3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>yclnxrl5pm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>t38b2kh725.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>7ug5zh24hu.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>gta9lk7p23.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>vutu7akeur.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>y5ghdn5j9k.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>v9wttpbfk9.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>n38lu8286q.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>47vhws6wlr.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>kbd757ywx3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>9t245vhmpl.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>a2p9lx4jpn.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>22mmun2rn5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>44jx6755aq.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>k674qkevps.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>4468km3ulz.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>2u9pt9hc89.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>8s468mfl3y.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>klf5c3l5u5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>ppxm28t8ap.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>kbmxgpxpgc.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>uw77j35x4d.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>578prtvx9j.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>4dzt52r2t5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>tl55sbb4fm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>c3frkrj4fj.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>e5fvkxwrpn.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>8c4e2ghe7u.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3rd42ekr43.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>97r2b46745.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3qcr597p9d.skadnetwork</string>
  </dict>
</array>

Google Mobile Ads SDK for React Native শুরু করুন

বিজ্ঞাপন লোড করার আগে, Google Mobile Ads SDK for React Native শুরু করতে initialize পদ্ধতি কল করুন। অ্যাপ লঞ্চ করার সময় একবার initialize মেথড কল করুন, যেমন আপনার রুট App.tsx কম্পোনেন্টে।

নিম্নলিখিত উদাহরণ Google Mobile Ads SDK for React Native শুরু করে:

import {InitializationStatus, initialize} from '@google/mobile-ads';
import {useEffect, useState} from 'react';
import {Text, View} from 'react-native';

/**
 * Root application component demonstrating Google Mobile Ads SDK initialization.
 */
export function App() {
  const [isInitialized, setIsInitialized] = useState<boolean>(false);

  useEffect(() => {
    // Initialize the Google Mobile Ads SDK.
    initialize({}, (status: InitializationStatus) => {
      console.log('Mobile Ads SDK initialized successfully:', status);
      setIsInitialized(true);
    });
  }, []);

  return (
    <View>
      <Text>
        {isInitialized ? 'Mobile Ads SDK Ready' : 'Initializing SDK...'}
      </Text>
    </View>
  );
}

বিজ্ঞাপনের ফর্ম্যাট বেছে নিন

Google Mobile Ads SDK for React Native শুরু করার পরে, আপনি বিজ্ঞাপন প্রয়োগ করতে পারবেন। AdMob নিম্নলিখিত বিজ্ঞাপন ফর্ম্যাট অফার করে:

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