ตั้งค่า Google Mobile Ads SDK สำหรับ React Native

หากต้องการแสดงโฆษณาและสร้างรายได้ ให้ผสานรวม 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 API ระดับ 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. ดาวน์โหลดโฟลเดอร์ gma-sdk-react-native จาก Google ไดรฟ์

  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

กำหนดค่าแอป

หากต้องการกำหนดค่าแอปด้วยทรัพยากร Dependency ของแพลตฟอร์ม ให้เพิ่มรหัสแอป AdMob ลงในไฟล์ app.json ของรูทโปรเจ็กต์

สำหรับการทดสอบ ให้ใช้รหัสแอป 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

หากคุณจัดการการกำหนดค่าบิลด์หลายรายการหรือกำลังผสานรวม React Native เข้ากับแอป Android ที่มีอยู่ ให้เพิ่มรหัสแอป AdMob ในองค์ประกอบ <application> ของไฟล์ AndroidManifest.xml ของโปรเจ็กต์แทนไฟล์ app.json ดังนี้

<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 จะแก้ไขทรัพยากร Dependency ของ Android โดยอัตโนมัติในระหว่างเวลาบิลด์

iOS

ทำตามขั้นตอนต่อไปนี้ให้ครบถ้วน

  1. ติดตั้งทรัพยากร Dependency ของ CocoaPods จากไดเรกทอรี ios/ ของโปรเจ็กต์โดยทำดังนี้

    pod install --repo-update

    หรือติดตั้งทรัพยากร Dependency ของ CocoaPods จากไดเรกทอรีรากของโปรเจ็กต์โดยทำดังนี้

    npx pod-install

    การลิงก์อัตโนมัติของ CocoaPods จะกำหนดค่าสคริปต์ระยะการสร้าง Xcode ที่เพิ่มพร็อพเพอร์ตี้ ios_app_id จากไฟล์ app.json ในไฟล์ Info.plist ที่สร้างขึ้น

  2. ในไฟล์ Info.plist ของแอป ให้เพิ่มคีย์ SKAdNetworkItems ในองค์ประกอบ <dict> สำหรับ Google cstr6suwn9.skadnetwork และผู้ซื้อบุคคลที่สามบางราย

    ตัวอย่างต่อไปนี้แสดงไฟล์ 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

ก่อนโหลดโฆษณา ให้เรียกใช้เมธอด initialize เพื่อเริ่มต้น Google Mobile Ads SDK for React Native เรียกใช้เมธอด initialize 1 ครั้งเมื่อเปิดแอป เช่น ในคอมโพเนนต์ 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 มีรูปแบบโฆษณาต่อไปนี้

รูปแบบ คำอธิบาย เอกสารประกอบ
โฆษณาเปิดแอป ปรากฏขึ้นเมื่อผู้ใช้เปิดหรือเปลี่ยนกลับไปที่แอปของคุณ โดยวางซ้อนหน้าจอการโหลดหรือหน้าจอเริ่มต้น (Splash Screen) ตั้งค่าโฆษณาเปิดแอป
โฆษณาคั่นระหว่างหน้า โฆษณาแบบเต็มหน้าจอที่ครอบคลุมอินเทอร์เฟซของแอปโฮสต์ โฆษณาเหล่านี้จะปรากฏที่จุดเปลี่ยนตามปกติในขั้นตอนการทำงานของแอป เช่น ระหว่างกิจกรรมหรือระหว่างการหยุดชั่วคราวระหว่างระดับในเกม ตั้งค่าโฆษณาคั่นระหว่างหน้า
ได้รับรางวัลแล้ว โฆษณาแบบเต็มหน้าจอที่ให้รางวัลแก่ผู้ใช้ที่ดูโฆษณาวิดีโอหรือโต้ตอบกับโฆษณาที่เล่นได้ ตั้งค่าโฆษณาที่มีการให้รางวัล
โฆษณาคั่นระหว่างหน้าที่มีการให้รางวัล รูปแบบโฆษณาที่เสนอสิ่งจูงใจซึ่งช่วยให้คุณนำเสนอรางวัลสำหรับโฆษณาที่ปรากฏโดยอัตโนมัติระหว่างจุดเปลี่ยนหน้าตามปกติของแอป ตั้งค่าโฆษณาคั่นระหว่างหน้าที่มีการให้รางวัล