React Native (ตอนพิเศษ) ติดโฆษณาของ Admobให้แอพไ้ว้ทำเงิน

หนึ่งในวิธีหารายได้จาก App คือการติดโฆษณา (Ads) และมักเป็นสิ่งสุดท้าย ที่เราทำหลังจากทำแอพเสร็จแล้ว ซึ่งก็จะเจอปัญหาบ่อยๆ ว่าพอใส่ Ads แล้ว project พังเฉยเลย โดยส่วนใหญ่บน Android จะไม่ค่อยมีปัญหา เพราะรองรับอยู่แล้ว จะมีติดกันนิดหน่อยคือของ iOS บทความนี้จะเน้นที่ App ที่สร้างด้วย React Native CLI ส่วนของ Expo นั้นไม่อยากพูด เพราะ อย่างง่าย ทำตามนี้ได้เลย [ วิธีการใส่ Ads ในแอพที่สร้างด้วย Expo ]

**สาเหตุที่ผมไม่ build app ด้วย Expo คือไฟล์ .apk และ .ipa ค่อนข้างใหญ่ครับ จึงต้อง convert project มาทำผ่าน React Native CLI

ที่มาของบทความนี้ : ไม่อยากกลับไปค้นวิธีบ่อยๆ เพราเป็นของที่ต้องทำประจำในทุกโปรเจ็คเลยทำเป็นบันทึกเก็บไว้ เพราะตอนนี้กำลังเตรียมปั้น App สำหรับสร้างรายได้ชุดใหม่

ทบทวนการสร้างแอพด้วย React Native CLI

ส่วนการสร้าง project ด้วย React Native CLI ตามไปดูได้ [ที่นี่] ครับ หรือสรุปโดยย่อได้ดังนี้

npm install -g react-native-cli

react-native init TestAdsApp

cd TestAdsApp

react-native run-ios

Admob และการ สร้าง Ads Unit ID

ก่อนอื่นต้องสมัครใช้งาน Admob ก่อน โดยใช้ account ของ Gmail ลงทะเบียนสมัครได้ที่ https://admob.google.com/home/ แล้วเริ่มจากการสร้าง แอป แล้วค่อยสร้าง แอปยูนิตไอดี สำหรับนำมาใช้ใน project ของเรา

  • สมัครใช้งาน Admob Publisher
  • สร้าง App
  • สร้าง Ads Unit ID สำหรับ Banner Ads
  • สร้าง Ads Unit ID สำหรับ Popup Ads (Interstitial)

สรุปเป็นรูปขั้นตอนคร่าวๆ ดังนี้

rn-x-01-01

ภาพการเริ่มสร้าง App ID

rn-x-01-02

ภาพการสร้าง App Unit ID สำหรับ Banner

rn-x-01-03

ภาพการสร้าง App Unit ID สำหรับ Popup

rn-x-01-04

ภาพสรุป App Unit ID ที่สร้างขึ้น สำหรับนำมาใช้งานต่อใน Project

 

การติดตั้ง Admob ให้กับ project React Native [Reference]

ติดตั้ง react-native-admob ให้กับ project โดยการรัน 2 คำสั่งนี้

npm install react-native-admob@next –save

react-native link react-native-admob

 

ดาวน์โหลด Google Mobile Ads SDK

ดาวน์โหลดจาก https://developers.google.com/admob/ios/download แล้วแตกไฟล์เก็บไว้ใกล้ๆกับที่อยู่ Project

rn-x-01-09

ภาพการดาวน์โหลด Google Mobile Ads SDK

การเพิ่ม Framework ใน iOS (จำเป็น) [Reference]

เปิด Project คลิ๊กขวา เลือก Add File เลือกไฟล์ที่ดาวน์โหลดแล้วแตกมาชื่อ  GooleMobileAds.framework , คลิก Copy items if need แล้วกด add เพื่อเพิ่ม Google Ads SDK เข้ามาใน project (เปิด project ด้วย XCode)

rn-x-01-05

ภาพการเปิด Project ด้วย XCode สำหรับเพิ่ม Framework

rn-x-01-06

ภาพการเพิ่ม GoogleMobileAds.framework เข้ามาใน project

การเพิ่ม Ads ID ใน Info.plist (สำหรับ iOS)[Reference]

** สำคัญมาก ให้เพิ่มข้อมูลต่อไปนี้ ใน Info.plist ไว้ในส่วนท้าย ก่อน </dic></plist>

  <key>GADIsAdManagerApp</key>

  <true/>

  <key>GADApplicationIdentifier</key>

  <string>ca-app-pub-[รหัส App ที่สร้างมาจากด้านบน]</string>

rn-x-01-08ภาพการเพิ่มข้อมูล 4 บรรทัด ในไฟล์ info.plist

ทดลองเพิ่ม Ads Banner [Reference]


//เพิ่มใน import ด้านบน
import { AdMobBanner } from ‘react-native-admob’
//เพิ่มใน render( ) ใน <View> ที่ต้องการ
<AdMobBanner
adSize=”smartBannerPortrait”
adUnitID=”ca-app-pub-รหัส Ads Unit ID ของ banner
testDevices={[AdMobBanner.simulatorId]}
onAdFailedToLoad={error=>console.error(error)}
/>

รันแอพ เพื่อทดสอบการทำงาน ถ้าทำงานได้ปกติ เมื่อเปิดแอพตัว banner โฆษณาจะแสดงด้านล่างของจอ

ทดลองเพิ่ม Ads แบบ Popup[Reference]

//เพิ่มใน import ด้านบน

import { AdMobInterstitial } from ‘react-native-admob’

//เพิ่มไว้ใต้ class
openAdd() {

   AdMobInterstitial.setAdUnitID(‘ca-app-pub-รหัส Ads Unit ID ของ popup‘);
   AdMobInterstitial.setTestDevices([AdMobInterstitial.simulatorId]);
   AdMobInterstitial.requestAd().then(() =>AdMobInterstitial.showAd());

}

//เพิ่มใน render( ) ใน <View> ที่ต้องการ

<TouchableOpacityonPress={this.openAdd}>
     <Text> Open Ads </Text>
</TouchableOpacity>
 รันแอพ เพื่อทดสอบการทำงาน ถ้าทำงานได้ปกติ เมื่อกดปุ่ม Open Ads ตัว popup จะเลือกโฆษณามาแสดง

rn-x-01-10

ภาพการทดสอบ การแสดงผล Ads

** หมายเหตุ: ควรทดสอบกับเครื่อง มือถือจริงๆ เพื่อความสมบูรณ์ของการทำงาน

อยากรู้อะไร ให้ลงมือทำ ทำแล้วกลัวลืม ให้เขียน เขียนแล้วเห็นว่าเป็นประโยชน์ ให้เผยแพร่ มาทำแอพโกยเงินกันครับ ^^

 

บทความเสริม

  1. การออกแบบ UX/UI ด้วย Adobe XD
  2. พื้นฐานภาษา JavaScript ES6
  3. การใช้งาน Firebase
  4. การติดตั้ง โฆษณาของ AdMob ไว้ทำเงิน

ติดตามทุกตอนของ Series นี้ (กำหนดการคือ อย่างน้อย สัปดาห์ละ 1 ตอน)

  1. การติดตั้งเครื่องมือที่จำเป็น
  2. โครงสร้างการออกแบบ และ คอมโพเน้นพื้นฐาน
  3. การใช้ Style , Font และ Icon
  4. การสร้าง Component แล้วนำกลับมาใช้ใหม่
  5. การใช้งาน Navigation เชื่อมหลายหน้าจอ
  6. การดึงข้อมูลจาก JSON มาใช้งาน และการใช้ Local Storage
  7. การดึงข้อมูลจาก Firebase และเนื้อหาจากเว็ป
  8. การใช้งาน กล้อง การอ่านและแสดง QR-Code
  9. การใช้งาน Link, Share และการโทร
  10. การ build APK เพื่อนำขึ้น Store

ติดตามข้อมูลผ่าน FanPage เข้าไปกด Like ที่: https://www.facebook.com/AjBeeMePage

กับฝากติดตาม FanPage สาขาวิศวกรรมซอฟต์แวร์ @ MFU ที่ https://www.facebook.com/sitsemfu/