ผสานรวม i-mobile กับสื่อกลาง AdMob

เลือกแพลตฟอร์ม: Android iOS Unity Flutter React Native Android (เดิม)

คู่มือนี้จะแสดงวิธีใช้ Google Mobile Ads SDK for React Native เพื่อโหลดและแสดงโฆษณาจาก i-mobile โดยใช้สื่อกลาง ซึ่งครอบคลุมการผสานรวม Waterfall โดยจะครอบคลุมวิธีเพิ่ม i-mobile ลงในการกำหนดค่าสื่อกลางของหน่วยโฆษณา และวิธีผสานรวม i-mobile SDK และอะแดปเตอร์เข้ากับแอป React Native

อินเทอร์เฟซแดชบอร์ดของ i-mobile ใช้ข้อความภาษาญี่ปุ่นสำหรับป้ายกำกับ ปุ่ม และคำอธิบาย ภาพหน้าจอในคู่มือนี้ไม่ได้แปลเป็นภาษาไทย อย่างไรก็ตาม ในคำอธิบายและวิธีการของคู่มือนี้ ป้ายกำกับและปุ่มต่างๆ จะได้รับการแปลเป็นภาษาอังกฤษที่เทียบเท่าในวงเล็บ

การผสานรวมและรูปแบบโฆษณาที่รองรับ

อะแดปเตอร์สื่อกลาง AdMob สำหรับ i-mobile มีความสามารถดังต่อไปนี้

การผสานรวม
การเสนอราคา
การแสดงวิดีโอตามลำดับขั้น
รูปแบบ
โฆษณาเปิดแอป
แบนเนอร์
โฆษณาคั่นระหว่างหน้า
ได้รับรางวัลแล้ว
โฆษณาคั่นระหว่างหน้าที่มีการให้รางวัล
เนทีฟ

ข้อกำหนดเบื้องต้น

โปรดตรวจสอบสิ่งต่อไปนี้ก่อนดำเนินการต่อ

• Google Mobile Ads SDK for React Native เวอร์ชันล่าสุด
• เฟรมเวิร์ก React Native เวอร์ชัน 0.85.0 ขึ้นไป
• วิธีติดตั้งใช้งานใน Android
  • Android API ระดับ 24 ขึ้นไป
• วิธีติดตั้งใช้งานใน iOS
  • เป้าหมายการติดตั้งใช้งาน iOS เวอร์ชัน 13.0 ขึ้นไป
• โปรเจ็กต์ React Native ที่ใช้งานได้ซึ่งกำหนดค่าด้วย Google Mobile Ads SDK for React Native ดูรายละเอียดได้ที่ตั้งค่า Google Mobile Ads SDK for React Native
  • ตรวจสอบว่าคุณได้ดาวน์โหลดและแตกโฟลเดอร์ adapters จากโฟลเดอร์ gma-sdk-react-native แล้ว หากไม่มีโฟลเดอร์ adapters ให้ทำตามขั้นตอนที่ 1, 2 และ 3 ในหัวข้อติดตั้ง Google Mobile Ads SDK for React Native
• ตั้งค่าสื่อกลาง AdMob

ขั้นตอนที่ 1: ตั้งค่าการกำหนดค่าใน UI ของ i-mobile

ลงชื่อสมัครใช้หรือเข้าสู่ระบบบัญชี i-mobile

เพิ่มแอปของคุณลงในแดชบอร์ด i-mobile โดยคลิกแท็บ サイト／アプリ管理 (การจัดการเว็บไซต์/แอปพลิเคชัน) และปุ่มสำหรับแพลตฟอร์มของแอป

Android

iOS

กรอกแบบฟอร์ม แล้วคลิกปุ่ม 新規登録 (ลงชื่อสมัครใช้)

Android

iOS

หมายเหตุ: i-mobile ต้องอนุมัติการลงทะเบียนของคุณ เมื่อได้รับอนุมัติแล้ว คุณจะสร้างสปอตโฆษณาได้

หากต้องการสร้างสปอตโฆษณาใหม่ ให้เลือกแอปในแท็บ サイト／アプリ管理 (Site/Application Management)

Android

iOS

ไปที่แท็บ 広告スポット管理 (Ad Spot Management) แล้วคลิกปุ่ม 新規広告スポット (New Ad Spot)

จากนั้นกรอกแบบฟอร์มโดยระบุ 広告スポット名 (ชื่อสปอตโฆษณา), 広告スポットサイズ (ขนาดสปอตโฆษณา) และรายละเอียดอื่นๆ จากนั้นคลิกปุ่ม 新規登録 (ลงชื่อสมัครใช้)

สปอตโฆษณาใหม่พร้อมใช้งานแล้ว หากต้องการดูรายละเอียดการผสานรวม ให้คลิกปุ่ม アプリ設定取得 (Get App settings)

จดบันทึก パブリッシャーID (รหัสผู้เผยแพร่โฆษณา), メディアID (รหัสสื่อ) และ スポットID (รหัสสปอต) คุณจะต้องใช้พารามิเตอร์เหล่านี้ในภายหลังเมื่อกำหนดค่า i-mobile สำหรับสื่อกลางใน UI ของ AdMob

Android

iOS

อัปเดต app-ads.txt

ผู้ขายที่ได้รับอนุญาตสำหรับแอปหรือ app-ads.txt เป็นความคิดริเริ่มของ IAB Tech Lab ที่ช่วยตรวจสอบว่าคุณจะขายพื้นที่โฆษณาในแอปผ่านช่องทางที่คุณได้รับอนุญาตเท่านั้น คุณจะต้องใช้ไฟล์ app-ads.txt เพื่อป้องกันไม่ให้เสียรายได้จากโฆษณาเป็นจำนวนมาก หากยังไม่ได้ดำเนินการ ให้สร้างไฟล์ app-ads.txt สำหรับแอป

หากต้องการใช้ app-ads.txt สำหรับ i-mobile โปรดดูคำถามที่พบบ่อย

ขั้นตอนที่ 2: ตั้งค่าดีมานด์ i-mobile ใน UI ของ AdMob

กำหนดการตั้งค่าสื่อกลางสำหรับหน่วยโฆษณา

Android

ดูวิธีการได้ที่ขั้นตอนที่ 2 ในคู่มือสำหรับ Android

iOS

ดูวิธีการได้ที่ขั้นตอนที่ 2 ในคู่มือสำหรับ iOS

ขั้นตอนที่ 3: นำเข้า SDK และอะแดปเตอร์ i-mobile

หมายเหตุ: การไม่ผสานรวม i-mobile และ Google Mobile Ads SDK เวอร์ชันที่เข้ากันได้อาจทำให้เกิดปัญหาในการสร้าง

ติดตั้งGoogle Mobile Ads SDK for React Nativeอะแดปเตอร์สื่อกลางสำหรับ i-mobile ในไดเรกทอรีรากของโปรเจ็กต์ ดำเนินการต่อไปนี้ให้เสร็จสมบูรณ์

1. คัดลอกไฟล์ tar ของอะแดปเตอร์ Google Mobile Ads SDK for React Native จากไดเรกทอรี gma-sdk-react-native/adapters/imobile/ ไปยังไดเรกทอรี local_packages/ ของโปรเจ็กต์ หากไม่มีโฟลเดอร์ adapters โปรดดูข้อกำหนดเบื้องต้น

   mkdir -p local_packages
   cp EXTRACT_DIR/gma-sdk-react-native/adapters/imobile/gma-mediation-imobile-0.1.0.tgz local_packages/
   

   แทนที่ EXTRACT_DIR ด้วยเส้นทางไปยังไดเรกทอรีที่คุณแตกไฟล์เก็บถาวร

2. ติดตั้งแพ็กเกจอะแดปเตอร์โดยใช้เครื่องมือจัดการแพ็กเกจที่ต้องการ ดังนี้

   npm

   npm install ./local_packages/gma-mediation-imobile-0.1.0.tgz
   

   ไหมพรม

   yarn add ./local_packages/gma-mediation-imobile-0.1.0.tgz
   

3. หากคุณกำลังสร้างสำหรับ Android ให้เพิ่มที่เก็บต่อไปนี้ลงในไฟล์ build.gradle ในไดเรกทอรี android ของโปรเจ็กต์

   repositories {
       google()
       mavenCentral()
       maven {
           url = uri("https://imobile.github.io/adnw-sdk-android")
       }
   }
   

ขั้นตอนที่ 4: ต้องใช้โค้ดเพิ่มเติม

Android

ไม่จำเป็นต้องใช้โค้ดเพิ่มเติมสำหรับการผสานรวม i-mobile

iOS

การผสานรวม SKAdNetwork

ทำตามเอกสารประกอบของ i-mobile เพื่อเพิ่มตัวระบุ SKAdNetwork ลงในไฟล์ Info.plist ของโปรเจ็กต์

ขั้นตอนที่ 5: ทดสอบการติดตั้งใช้งาน

เปิดใช้โฆษณาทดสอบ

ตรวจสอบว่าคุณได้ลงทะเบียนอุปกรณ์ทดสอบสำหรับ AdMob แล้ว i-mobile มีรหัสสปอต, รหัสสื่อ และรหัสผู้เผยแพร่โฆษณาสำหรับการทดสอบ ซึ่งคุณดูได้ที่นี่

สำคัญ: ปิดใช้โหมดทดสอบสำหรับ AdMob และ i-mobile ก่อนเผยแพร่แอป

ยืนยันโฆษณาทดสอบ

หากต้องการยืนยันว่าคุณได้รับโฆษณาทดสอบจาก i-mobile ให้เปิดใช้การทดสอบแหล่งที่มาของโฆษณาแหล่งเดียว ในเครื่องมือตรวจสอบโฆษณาโดยใช้แหล่งที่มาของโฆษณา i-mobile (Waterfall)

รหัสข้อผิดพลาด

หากอะแดปเตอร์ไม่ได้รับโฆษณาจาก i-mobile ผู้เผยแพร่โฆษณาสามารถตรวจสอบข้อผิดพลาดที่สำคัญจากการตอบกลับโฆษณาได้โดยใช้ ResponseInfo ในคลาสต่อไปนี้

Android

รูปแบบ	ชื่อประเภท
แบนเนอร์	com.google.ads.mediation.imobile.IMobileAdapter
โฆษณาคั่นระหว่างหน้า	com.google.ads.mediation.imobile.IMobileAdapter
เนทีฟ	com.google.ads.mediation.imobile.IMobileMediationAdapter

iOS

รูปแบบ	ชื่อประเภท
แบนเนอร์	IMobileAdapter
โฆษณาคั่นระหว่างหน้า	IMobileAdapter
เนทีฟ	GADMediationAdapterIMobile

ต่อไปนี้คือรหัสและข้อความที่แสดงโดยอะแดปเตอร์ i-mobile เมื่อโหลดโฆษณาไม่สำเร็จ

Android

รหัสข้อผิดพลาด	เหตุผล
0-99	i-mobile SDK แสดงข้อผิดพลาด ดูรายละเอียดเพิ่มเติมได้ที่โค้ด
101	i-mobile ต้องมีบริบท Activity เพื่อโหลดโฆษณา
102	พารามิเตอร์เซิร์ฟเวอร์ i-mobile ที่กำหนดค่าใน UI ของ AdMob ขาดหายไปหรือไม่ถูกต้อง
103	ขนาดโฆษณาที่ขอไม่ตรงกับขนาดแบนเนอร์ที่ i-mobile รองรับ
104	Callback ของการโหลดโฆษณาเนทีฟที่สำเร็จของ i-mobile แสดงรายการโฆษณาเนทีฟที่ว่างเปล่า

iOS

รหัสข้อผิดพลาด	เหตุผล
0-10	i-mobile SDK แสดงข้อผิดพลาด ดูรายละเอียดเพิ่มเติมได้ที่โค้ด
101	พารามิเตอร์เซิร์ฟเวอร์ i-mobile ที่กำหนดค่าใน UI ของ AdMob ขาดหายไปหรือไม่ถูกต้อง
102	ขนาดโฆษณาที่ขอไม่ตรงกับขนาดแบนเนอร์ที่ i-mobile รองรับ
103	i-mobile แสดงโฆษณาไม่สำเร็จ
104	i-mobile แสดงอาร์เรย์โฆษณาเนทีฟที่ว่างเปล่า
105	i-mobile ดาวน์โหลดชิ้นงานโฆษณาเนทีฟไม่สำเร็จ
106	i-mobile ไม่รองรับการขอโฆษณาคั่นระหว่างหน้าหลายรายการโดยใช้รหัสสปอตเดียวกัน

เวอร์ชัน 0.1.0

• การเผยแพร่ครั้งแรก

• รองรับอะแดปเตอร์ i-mobile Android เวอร์ชัน 2.3.2.5
• รองรับอะแดปเตอร์ i-mobile iOS เวอร์ชัน 2.3.4.8