Home / Developer  / Angularjs  / การใส่ Admob ในแอพพลิเคชัน ionic framework

การใส่ Admob ในแอพพลิเคชัน ionic framework

บทความนี้จะเป็นตัวอย่างในการนำป้ายโฆษณา Admob ของ Google ไปติดไว้ในแอพพลิเคชันที่พัฒนาด้วย ionic framework ของเราสำหรับสร้างรายได้

ก่อนจะเริ่มต้นในการทำตามตัวอย่างบทนี้ อยากให้ทุกคนไปศึกษาการพัฒนาแอพพลิเคชันด้วย ionic framework กันก่อนที่บทเรียนย้อนหลัง ที่นี่ บทเรียน ionic framework และ angularjs

หากว่าเข้าใจเนื้อหาและ การพัฒนาเบื้องต้นไปจนประยุกต์ใช้ได้แล้วล่ะก็มาเริ่มบทเรียนนี้กันเลยครับ บทเรียนนี้จะเริ่มที่การมีบัญชี Google และ บัญชี Admob ก่อนหากยังไม่มีให้ไปสมัครและศึกษาการสร้าง รหัส โฆษณาของ Admob ก่อนที่เว็บไซต์ https://www.google.com/admob/

ทำตามขั้นตอนจนกว่าจะได้รหัสป้ายโฆษณาที่ขึ้นต้นด้วย ca-xxxx-xxxx มา ตามภาพ

Screen Shot 2559-04-18 at 10.58.48 PM

ต่อมาให้เรารันคำสั่งต่อไปนี้สำหรับสร้าง แอพพลิเคชันของเราครับ (ก็คำสั่งเดิมๆ) บน Terminal หรือ Command Prompt

เราจะได้แอพพลิเคชันที่เป็น Template แบบเมนูสไลด์ด้านข้างมา (Side Menu) ให้เราทำการเพิ่ม Platform ของ Android หรือ iOS ก็ได้ลงไปครับ พร้อมกับเพิ่ม Cordova Plugin ที่ชื่อ ngCordova ด้วย โดยการรันคำสั่ง

เมื่อเสร็จเรียบร้อยแล้วไปที่โฟลเดอร์ “www/index.html” ให้เพิ่ม คำสั่งต่อไปนี้ลงไปในส่วนของ <head>

ขั้นตอนต่อไปจะเป็นการเพิ่ม Cordova Plugin ส่วนของ Admob ลงไปในแอพพลิเคชันของเรา ให้รันคำสั่งต่อไปนี้ใน Terminal หรือ Command Prompt

หมายเหตุหากไม่ได้ให้ไป Clone หรือ Download ที่ https://github.com/appfeel/admob-google-cordova โดยดาวน์โหลดให้ทำการคัดลอก Copy ไปไว้ที่โฟลเดอร์ “www/lib/”

ทำการเพิ่มคำสั่งต่ไปนี้ลงไปในส่วนของ <head> ที่ index.html เช่นกัน

เปิดไฟล์ “www/js/app.js” ขึ้นมาเาจะทำการตั้งค่าบางอย่างเล็กน้อยส่วนของ .config และ .run ให้แก้ไขส่วนของ Module ก่อนโดยการเพิ่มคำสั่งนี้

เพิ่มส่วนของ ‘ngCordova’ และ ‘admobModule’ เข้าไปใน module หลักของ ionic ของเราที่ชื่อ ‘starter’ ต่อมาให้แก้ไขส่วนของ .config เพิ่มเติมดังนี้

มีการเพิ่ม function หลักเข้าไปคือ เพิ่ม admobSvcProvider เล็กน้อยในตอนเริ่มต้นตั้งค่า

แน่นอนว่าถ้าเป็นคนหัวไวก็จะรู้ว่า ca-pub-xxxxxxx นั้นคือรหัสของ admob ที่เราได้สร้างไว้ให้นำมาใส่ ตามประเภทของ Ads เลยนะครับ ต่อจากนั้นให้เราไปแก้ไขส่วนของ .run ใน app.js ดังนี้

นั่นก็คือการเพิ่ม admobSvc และ $rootScope เข้าไปในส่วนของ function หลัก

และเพิ่มส่วนของการเรียกโฆษณาเล็กน้อยตอนเริ่มเปิดแอพ โดยหน่วงเวลาสัก 0.5 ประมาณนั้นครับ

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

ก่อนจะทดสอบให้เสียบสาย USB เครื่องโทรศัพท์มือถือของเรากับคอมพิวเตอร์เปิด USB Debuging รันคำสั่งต่อไปนี้ครับ

ตำแหน่ง Admob ปรากฏเมื่อใช้งาน

ตำแหน่ง Admob ปรากฏเมื่อใช้งาน

ป้ายโฆษณาขึ้นกวนใจเวลารับชม

ป้ายโฆษณาขึ้นกวนใจเวลารับชม

จะเห็นว่าป้ายโฆษณามันกวนใจชาวบ้านเค้า พลาดจะ Uninstall แอพพลิเคชันของเราทิ้งเสียนี่ แต่คนทำแอพพลิเคชันก็ต้องมีรายได้นี่เนอะครับ Admob คือรายได้หลัก จะทำแอพพลิเคชันแจกฟรีโดยไม่เอากำไรอะไรก็ดูจะเป็นคนดีแต่ไม่มีจะกินเอา ดังนั้น “เดินทางสายกลาง” เพื่อผู้ใช้งาน และ คนที่เห็นใจสนับสนุนปากท้องของเรา เลยต้องบังคับให้มันแสดงบางหน้า และไม่แสดงบางหน้าครับ

วิธีคือไปที่ไฟล์ “www/js/controller.js”

แอพพลิเคชันของผมมี controller พื้นฐานของ sidemenu อยู่แล้วคือ PlaylistsCtrl และ PlaylistCtrl ต่างแค่ Playlists แรกมี s อีกตัวไม่มี เป็นการแสดงผล template 2 หน้า PlaylistsCtrl คือหน้าเมนูเลือกรายการ และ PlaylistCtrl คือหน้าดูทีวีที่มี TV Player เล่นแบบเต็มจอ

ให้ไปที่ PlaylistCtrl หน้ารับชมรายการใส่คำสั่งนี้ลงไปตรงไหนก็ได้ครับ เพื่อกำหนดให้ปิดป้ายโฆษณาไม่ให้มันแสดงผลครับ

คือการเพิ่ม function ใน PlaylistCtrl ให้รองรับ admobSvc ก่อนด้วย

แล้วเช็คว่าเมื่อ deviceready คือหน้าจอนี้พร้อมโหลดมาแล้วก็ทำการ destroyBannerView ออกไปเลย

ไม่มีโฆษณากวนใจ ดูเต็มหน้าจอ

ไม่มีโฆษณากวนใจ ดูเต็มหน้าจอ

พอเราดูก็จะไม่มีโฆษณาแล้ว แต่…. พอกด Back กลับไปหน้าแรกปรากฏ Admob มันหายไป ถาวร เลย ทำไงดี! ให้ใช้ ionic Lifecycle ช่วยครับ โดยเพิ่ม ฟังก์ชันส่วนนี้ใน PlaylistCtrl ให้ตรวจสอบเมื่อ Leave หน้าปัจจุบัน ไปหน้าอื่น หรือกลับไปหน้าก่อนหน้า (Previous View โดย ปุ่ม Back)

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

เมื่อเรา Back กลับมาหน้าแรก (หรือออกจากหน้านั้น) ป้ายโฆษณาก็จะกลับมาโดยมีการหน่วงในการแสดงผลประมาณหนึ่ง

Screenshot_2016-04-17-23-54-23-74

จะเห็นว่าแนวทางการนำเอา Admob มาติดกับแอพพลิเคชันที่สร้างด้วย AngularJS, HTML5 อย่าง ionic framework บน Cordova Based นั้นไม่ยากเลย

ทดสอบตัวอย่างของบทเรียนนี้ได้ผ่าน แอพพลิเคชัน IPTV Thai บน Google Plays Store ครับ (แอพที่ API ไปดึง m3u8 ชาวบ้านเค้ามาหมดเลย ใช้ mLab, MongoLabs เป็นฐานข้อมูลอีก ฮ่าๆๆๆๆ)

เพิ่งอัพโหลด สดๆ ร้อนๆ : https://play.google.com/store/apps/details?id=com.thedarkdev.iptvthai

Screen Shot 2559-04-18 at 11.41.47 PM

Comments

POST TAGS:

daydevthailand@gmail.com

<p>อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์<br /> ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)</p>

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.

%d bloggers like this: