คู่มือนี้จะแสดงวิธีใช้ Google Mobile Ads SDK for React Native เพื่อโหลดและแสดงโฆษณาจาก maio โดยใช้สื่อกลาง ซึ่งครอบคลุมการผสานรวม Waterfall โดยจะครอบคลุมวิธีเพิ่ม maio ลงในการกำหนดค่าสื่อกลางของหน่วยโฆษณา และวิธีผสานรวม SDK และอะแดปเตอร์ของ maio เข้ากับแอป React Native
อินเทอร์เฟซแดชบอร์ดของ maio ใช้ข้อความภาษาญี่ปุ่นสำหรับป้ายกำกับ ปุ่ม และคำอธิบาย และภาพหน้าจอในคู่มือนี้ยังไม่ได้แปล อย่างไรก็ตาม ในคำอธิบายและวิธีการที่นี่ ป้ายกำกับและปุ่มจะอ้างอิงตามภาษาอังกฤษที่เทียบเท่า "URL スキーム," for example, is "URL Scheme,".
การผสานรวมและรูปแบบโฆษณาที่รองรับ
อะแดปเตอร์สื่อกลางสำหรับ maio มีความสามารถดังต่อไปนี้
| การผสานรวม | |
|---|---|
| การเสนอราคา | |
| การแสดงวิดีโอตามลำดับขั้น | |
| รูปแบบ | |
| โฆษณาเปิดแอป | |
| แบนเนอร์ | |
| โฆษณาคั่นระหว่างหน้า | |
| ได้รับรางวัลแล้ว | |
| โฆษณาคั่นระหว่างหน้าที่มีการให้รางวัล | |
| เนทีฟ | |
ข้อกำหนดเบื้องต้น
โปรดตรวจสอบสิ่งต่อไปนี้ก่อนดำเนินการต่อ
- Google Mobile Ads SDK for React Native เวอร์ชันล่าสุด
- เฟรมเวิร์ก React Native เวอร์ชัน 0.85.0 ขึ้นไป
- วิธีติดตั้งใช้งานใน Android
- Android API ระดับ 24 ขึ้นไป
- วิธีติดตั้งใช้งานใน iOS
- เป้าหมายการติดตั้งใช้งาน iOS เวอร์ชัน 15.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 ของ maio
ก่อนอื่น ให้ลงชื่อสมัครใช้หรือเข้าสู่ระบบบัญชี maio คลิกปุ่มการจัดการแอปพลิเคชันในแถบด้านข้างทางซ้าย แล้วคลิกแอปใหม่

เลือกแท็บที่ตรงกับประเภทโฆษณาที่ต้องการ
โฆษณาคั่นระหว่างหน้า
ป้อนชื่อแอป เลือกแพลตฟอร์ม และระบุ URL ของแอป เลือกโฆษณาคั่นระหว่างหน้าแบบวิดีโอเป็นประเภทโฆษณา แล้วคลิกอัปเดต
Android

iOS

ได้รับรางวัลแล้ว
ป้อนชื่อแอป เลือกแพลตฟอร์ม และระบุ URL ของแอป เลือกรางวัลจากวิดีโอเป็นประเภทโฆษณา แล้วคลิกอัปเดต
Android

iOS

ในหน้าการจัดการแอปพลิเคชัน ให้จดบันทึกรหัสสื่อไว้ คุณต้องใช้รหัสนี้เพื่อตั้งค่าหน่วยโฆษณา AdMob ในส่วนถัดไป
Android

iOS

ในหน้าการจัดการโซน ให้จดรหัสโซนไว้ นอกจากนี้ คุณยังต้องใช้รหัสนี้เพื่อตั้งค่าหน่วยโฆษณา AdMob ในส่วนถัดไป
Android

iOS


ขั้นตอนที่ 2: ตั้งค่าดีมานด์ maio ใน UI ของ AdMob
กำหนดการตั้งค่าสื่อกลางสำหรับหน่วยโฆษณา
Android
ดูวิธีการได้ที่ขั้นตอนที่ 2 ในคู่มือสำหรับ Android
iOS
ดูวิธีการได้ที่ขั้นตอนที่ 2 ในคู่มือสำหรับ iOS
ขั้นตอนที่ 3: นำเข้า SDK และอะแดปเตอร์ maio
ในไดเรกทอรีรากของโปรเจ็กต์ ให้ติดตั้งGoogle Mobile Ads SDK for React Native อะแดปเตอร์สื่อกลางสำหรับ maio ดำเนินการต่อไปนี้ให้เสร็จสมบูรณ์
คัดลอกไฟล์ tar ของอะแดปเตอร์ Google Mobile Ads SDK for React Native จากไดเรกทอรี
gma-sdk-react-native/adapters/maio/ไปยังไดเรกทอรีlocal_packages/ของโปรเจ็กต์ หากไม่มีโฟลเดอร์adaptersโปรดดูข้อกำหนดเบื้องต้นmkdir -p local_packages cp EXTRACT_DIR/gma-sdk-react-native/adapters/maio/gma-mediation-maio-0.1.0.tgz local_packages/แทนที่ EXTRACT_DIR ด้วยเส้นทางไปยังไดเรกทอรีที่คุณแตกไฟล์เก็บถาวร
ติดตั้งแพ็กเกจอะแดปเตอร์โดยใช้เครื่องมือจัดการแพ็กเกจที่ต้องการ ดังนี้
npm
npm install ./local_packages/gma-mediation-maio-0.1.0.tgzไหมพรม
yarn add ./local_packages/gma-mediation-maio-0.1.0.tgzหากคุณกำลังสร้างสำหรับ Android ให้เพิ่มที่เก็บต่อไปนี้ลงในไฟล์
build.gradleในไดเรกทอรีandroidของโปรเจ็กต์repositories { google() mavenCentral() maven { url = uri("https://imobile-maio.github.io/maven") } }
ขั้นตอนที่ 4: เพิ่มโค้ดที่จำเป็น
Android
ไม่จำเป็นต้องใช้โค้ดเพิ่มเติมสำหรับการผสานรวม maio
iOS
การผสานรวม SKAdNetwork
ทำตามเอกสารประกอบของ maio เพื่อเพิ่มตัวระบุ SKAdNetwork ลงในไฟล์ Info.plist ของโปรเจ็กต์
ขั้นตอนที่ 5: ทดสอบการติดตั้งใช้งาน
เปิดใช้โฆษณาทดสอบ
ตรวจสอบว่าคุณได้ลงทะเบียนอุปกรณ์ทดสอบสำหรับ AdMob แล้ว
ผู้เผยแพร่โฆษณาที่ใช้ Google Mobile Ads SDK for React Native เวอร์ชัน 7.26.0 ขึ้นไปจะได้รับโฆษณาทดสอบจาก maio โดยอัตโนมัติในโทรศัพท์และแท็บเล็ตที่ลงทะเบียนเป็นอุปกรณ์ทดสอบเมื่อส่งคำขอ
ยืนยันโฆษณาทดสอบ
หากต้องการยืนยันว่าคุณได้รับโฆษณาทดสอบจาก maio ให้เปิดใช้การทดสอบแหล่งที่มาของโฆษณาแหล่งเดียว ในเครื่องมือตรวจสอบโฆษณาโดยใช้แหล่งที่มาของโฆษณา maio (Waterfall)
รหัสข้อผิดพลาด
หากอะแดปเตอร์ไม่ได้รับโฆษณาจาก maio ผู้เผยแพร่โฆษณาสามารถตรวจสอบข้อผิดพลาดที่สำคัญจากการตอบกลับโฆษณาได้โดยใช้ ResponseInfo ในคลาสต่อไปนี้
Android
| รูปแบบ | ชื่อประเภท |
|---|---|
| โฆษณาคั่นระหว่างหน้า | jp.maio.sdk.android.mediation.admob.adapter.Interstitial |
| ได้รับรางวัลแล้ว | jp.maio.sdk.android.mediation.admob.adapter.Rewarded |
iOS
| รูปแบบ | ชื่อประเภท |
|---|---|
| โฆษณาคั่นระหว่างหน้า | GADMMaioInterstitialAdapter |
| ได้รับรางวัลแล้ว | GADMMaioRewardedAdapter |
ต่อไปนี้คือรหัสและข้อความที่แสดงโดยอะแดปเตอร์ maio เมื่อโหลดโฆษณาไม่สำเร็จ
Android
| รหัสข้อผิดพลาด | เหตุผล |
|---|---|
| 0-10 | maio แสดงข้อผิดพลาดเฉพาะ SDK ดูรายละเอียดเพิ่มเติมได้ที่โค้ดและเอกสารประกอบของ maio |
| 101 | Maio ไม่มีโฆษณาที่พร้อมใช้งาน |
| 102 | พารามิเตอร์เซิร์ฟเวอร์ไม่ถูกต้อง (เช่น ไม่มีรหัสตำแหน่งโฆษณา) |
| 103 | บริบทที่ใช้ในการโหลดโฆษณาไม่ใช่ `Activity` อินสแตนซ์ |
iOS
| รหัสข้อผิดพลาด | เหตุผล |
|---|---|
| 0-10 | maio แสดงข้อผิดพลาดเฉพาะ SDK ดูรายละเอียดเพิ่มเติมได้ที่โค้ดของ maio |
| 101 | maio ยังไม่มีโฆษณาที่พร้อมใช้งาน |
| 102 | พารามิเตอร์เซิร์ฟเวอร์ไม่ถูกต้อง (เช่น ไม่มีรหัสตำแหน่งโฆษณา) |
| 103 | อะแดปเตอร์ maio ไม่รองรับรูปแบบโฆษณาที่ขอ |
| 104 | มีการโหลดโฆษณาสำหรับการกำหนดค่าเครือข่ายนี้แล้ว |
เวอร์ชัน 0.1.0
- การเผยแพร่ครั้งแรก