React Native के लिए Google Mobile Ads SDK सेट अप करना

विज्ञापन दिखाने और रेवेन्यू जनरेट करने के लिए, Google Mobile Ads SDK for React Native को अपने React Native ऐप्लिकेशन में इंटिग्रेट करें. इस गाइड में, Google Mobile Ads SDK for React Native को इंस्टॉल और शुरू करने के साथ-साथ विज्ञापन फ़ॉर्मैट चुनने के बारे में बताया गया है.

ज़रूरी शर्तें

जारी रखने से पहले, ये काम करें:

  • React Native 0.85.0 या इसके बाद का वर्शन.
  • एक AdMob खाता और एक ऐप्लिकेशन आईडी. ऐप्लिकेशन आईडी पाने के लिए, AdMob में कोई ऐप्लिकेशन सेट अप करना लेख पढ़ें.

  • Android के ये आइटम:

    • Android एपीआई लेवल 24 या इसके बाद का वर्शन.
    • 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. ZIP फ़ॉर्मैट वाले आर्काइव को अपने वर्किंग प्रोजेक्ट की डायरेक्ट्री से बाहर, किसी अलग डायरेक्ट्री में एक्सट्रैक्ट करें. इस प्रोसेस से, आपके प्रोजेक्ट की कॉन्फ़िगरेशन फ़ाइलों के साथ होने वाली समस्याओं से बचा जा सकता है.

  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 AndroidManifest.xml फ़ाइल में android_app_id प्रॉपर्टी जोड़ता है. साथ ही, आपकी बिल्ड की गई Info.plist फ़ाइल में ios_app_id प्रॉपर्टी को 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 में ये विज्ञापन फ़ॉर्मैट उपलब्ध हैं:

फ़ॉर्मैट ब्यौरा दस्तावेज़
ऐप्लिकेशन खोलने पर दिखने वाला विज्ञापन यह विज्ञापन तब दिखता है, जब उपयोगकर्ता आपके ऐप्लिकेशन को खोलते हैं या उस पर वापस आते हैं. यह विज्ञापन, लोड हो रही या स्प्लैश स्क्रीन को ओवरले करता है. ऐप्लिकेशन खोलने पर दिखने वाले विज्ञापन सेट अप करना
मध्यवर्ती ये फ़ुल-स्क्रीन विज्ञापन होते हैं, जो होस्ट ऐप्लिकेशन के इंटरफ़ेस को कवर करते हैं. ये विज्ञापन, ऐप्लिकेशन के फ़्लो में नैचुरल ट्रांज़िशन पॉइंट पर दिखाए जाते हैं. जैसे, अलग-अलग गतिविधियों के बीच में या गेम के अलग-अलग लेवल के बीच में रुकने पर. इंटरस्टीशियल विज्ञापन सेट अप करना
इनाम दिया गया ये फ़ुल-स्क्रीन विज्ञापन होते हैं. इनमें उपयोगकर्ताओं को वीडियो विज्ञापन देखने या गेम खेलने देने वाले विज्ञापनों के साथ इंटरैक्ट करने पर इनाम मिलता है. इनाम वाले विज्ञापन सेट अप करना
इनाम वाला इंटरस्टीशियल विज्ञापन यह एक ऐसा विज्ञापन फ़ॉर्मैट है जिसके ज़रिए उपयोगकर्ताओं को किसी तरह का फ़ायदा दिया जा सकता है. इसकी मदद से, ऐप्लिकेशन में नैचुरल ट्रांज़िशन के दौरान दिखने वाले विज्ञापनों के लिए इनाम दिए जाते हैं. इनाम वाले इंटरस्टीशियल विज्ञापन सेट अप करना