[Review] ติดโฆษณาบน Android App ของเรา ด้วย Vserv.mobi : Part 2 การเขียนคำสั่ง

จากความเดิมตอนที่แล้ว [Review] ติดโฆษณาบน Android App ของเรา ด้วย Vserv.mobi : Part 1 เตรียมความพร้อม เราก็พร้อมที่จะเขียน Code เพื่อแสดงโฆษณาของ Vserv.mobi ใน Android App ของเราแล้ว

Vserv.mobi Logo

ใครที่ยังไม่ได้อ่านบทความใน Part 1 ไปอ่านให้จบก่อนนะคร๊าบบบบบ….

ถ้าพร้อมแล้ว มาลุยกันต่อเลยครับ~!!

 

List of contents

 

โฆษณาแบบ Banner

สำหรับการติดโฆษณาแบบ Banner ของ Vserv.mobi นั้น ในส่วนของ Layout จะใช้ FrameLayout เป็น Container ในการแสดง Banner ตัวอย่างด้านล่างนี้ กำหนดให้ FrameLayout อยู่ที่ขอบด้านล่างของหน้าจอเพื่อแสดง Banner

ส่วนของ Activity ก็ประกาศตัวแปรชนิด FrameLayout เพื่ออ้างอิงไปยัง UI

แล้วทำการกำหนดค่าให้เรียบร้อย

สำหรับ Vserv.mobi นั้น จะใช้ Class VservManager ในการจัดการโฆษณาทุกรูปแบบ จึงต้องประกาศตัวแปรชนิด VservManager ดังนี้

เมื่อต้องการใช้งาน ก็แค่กำหนดค่าให้ตัวแปร vservManager ดังนี้

ก่อนจะไปต่อ… ขอให้ตรวจสอบตัวแปร context กันสักหน่อย ว่า context ที่ใส่เข้าไปนั้น มาจากไหน!?

  1. ถ้าใส่ this แล้ว this อยู่ใน class ที่ extends มาจาก Activity (หรือ class อื่น ๆ ที่ extends ต่อจาก Activity) อันนี้ รอด
  2. ถ้าใส่ classname.this แล้ว classname ก็คือชื่อ class ที่ extends มาจาก Activity (เหมือนข้อ 1 นั่นแหล่ะ) อันนี้ก็… รอด
  3. ถ้าใส่ getApplicationContext() หรือ getBaseContext() เพราะมัน return Context ออกมาให้ และตรงกับ Parameter ของ Method getInstance() ของ Class VservManager ละก็… ไม่รอด!!!

เพราะว่า ถึง Method getInstance() ของ Class VservManager ต้องการ Context แต่พบว่าจะเกิด Error ซึ่งอันที่จริงแล้ว Class VservManager ต้องการ Activity นั่นเอง

ก่อนจะทำการแสดง Banner ใน FrameLayout สิ่งหนึ่งที่ควรทำก่อน คือการ Remove ทุกสิ่งอย่าง ภายใน FrameLayout ออกก่อน ดังนี้

หากไม่ Remove ออกก่อน แล้วไปสั่งให้แสดง Banner ซ้ำ จะเกิด ViewNotEmptyException นะ

สำหรับการแสดง Banner นั้น มีอยู่ด้วยกัน 2 วิธี คือ

  1. สั่งให้แสดงขึ้นมาเลย ด้วย Method renderAd()
  2. สั่งให้ดึงข้อมูลมาก่อน ด้วย Method getAd() แล้วค่อยแสดงเมื่อต้องการ

 

วิธีที่ 1 การสั่งให้แสดง Banner ขึ้นมาเลย ด้วยการใช้ Method renderAd() นั้น มีให้ใช้งานรูปแบบเดียว ดังนี้

  • VservController renderAd(String zoneId, ViewGroup group) throws ViewNotEmptyException – ต้องกำหนด Parameter 2 ตัว คือ Zone ID และ ViewGroup (FrameLayout นั่นเอง) โดยมี Return เป็นชนิด VservController และมีโอกาสเกิด ViewNotEmptyException ด้วย

เนื่องจากว่า มี Return เป็นชนิด VservController มาให้ จึงต้องประกาศตัวแปร vservController ไว้ก่อน

แล้วทำการเรียกใช้งาน Method renderAd() ดังนี้

เท่านี้ ก็จะแสดง Banner ได้แล้ว สังเกตุว่า จะมีการแสดง Progress ให้เห็น ก่อนแสดง Banner ด้วย

Vserv.mobi Banner เมื่อเรียกใช้งานด้วย Method renderAd()
Vserv.mobi Banner เมื่อเรียกใช้งานด้วย Method renderAd()

สำหรับ VservController จะมี Method มาให้ใช้ด้วยกัน 4 ตัว ดังนี้

  • void resumeRefresh() – สำหรับกำหนดให้การ Refresh ทำงานต่อ หลังจากถูกหยุด จาก Method stopRefresh() ซึ่งควรใส่คำสั่งนี้ไว้ที่ Method onStart() ของ Activity
  • void setRefresh(int value) – สำหรับกำหนดอัตรา Refresh ของ Banner ซึ่งโดย Default อยู่ที่ 60 วินาที เราสามารถใช้ Method นี้ กำหนดค่าเป็น 0 เพื่อไม่ให้เกิดการ Refresh หรือเปลี่ยนค่า Refresh ได้ โดยกำหนดค่าอยู่ในช่วง 30 – 60 ก็จะทำให้ Banner มีการ Refresh ทุก ๆ 30 – 60 วินาที ตามที่เรากำหนด
  • void setZone(String zoneId) – สำหรับกำหนด Zone ID ใหม่ ใช้สำหรับกรณีต้องการเปลี่ยน Zone ID
  • void stopRefresh() – สำหรับกำหนดให้การ Refresh หยุดชั่วคราว ซึ่งควรใส่คำสั่งนี้ไว้ที่ Method onStop() ของ Activity

ตัวอย่างการใช้งานทั้ง 4 Method ดังนี้

Code ด้านบน ที่บรรทัดที่ 2 เป็นการกำหนดให้การ Refresh Banner เปลี่ยนเป็น 30 วินาที

ส่วนบรรทัดที่ 3 เป็นการกำหนด Zone ID ใหม่

Code ด้านบน ที่บรรทัดที่ 3 เป็นการสั่งให้การ Refresh ทำงานต่อ โดยเขียนคำสั่งไว้ใน Method onStart() ของ Activity

ส่วนบรรทัดที่ 10 เป็นการสั่งให้การ Refresh หยุดชั่วคราว โดยเขียนคำสั่งไว้ใน Method onStop() ของ Activity

 

วิธีที่ 2 การสั่งให้ดึงข้อมูลมาก่อน โดยการใช้ Method getAd() นั้น มีให้ใช้งานด้วยกัน 2 รูปแบบ (Overload) ดังนี้

  • void getAd(String zoneId, AdLoadCallback callback) – ต้องกำหนด Parameter 2 ตัว คือ Zone ID และ AdLoadCallback
  • void getAd(String zoneId, AdOrientation adOrientation, AdLoadCallback callback) – ต้องกำหนด Parameter 3 ตัว คือ Zone ID, AdOrientation และ AdLoadCallback

สำหรับ AdOrientation นั้น สามารถกำหนดได้ 2 แบบ คือ AdOrientation.PORTRAIT หรือ AdOrientation.LANDSCAPE สำหรับแสดงโฆษณาเมื่อ App แสดงอยู่ในแนวตั้ง และแนวนอน ตามลำดับ

ส่วน AdLoadCallback นั้น เป็น Interface ให้เราสามารถ Implement เพื่อรอรับผลการดึงข้อมูล Ad มาก่อน โดยจะมี Callback Method ให้เราใช้งานอยู่ 3 Method คือ

  • void onNoFill() – เมื่อการ Request Ad สำเร็จ แต่ไม่มี Ad ส่งกลับมาให้แสดงผล
  • void onLoadSuccess(VservAd adObject) – เมื่อการ Request Ad สำเร็จ และมี Ad ส่งกลับมาให้แสดงผล โดยจะส่งมาให้ทาง Parameter ชนิด VservAd
  • void onLoadFailure() – เมื่อการ Request Ad ไม่สำเร็จ

เมื่อเกิด onLoadSuccess() เราก็สามารถนำตัวแปร adObject (ชนิด VservAd) ไปสั่งให้แสดงผล ด้วย Method show() โดยมีรูปแบบ ดังนี้

  • void show(Context context, ViewGroup group) throws ViewNotEmptyException – ต้องกำหนด Parameter 2 ตัว คือ Context และ ViewGroup (FrameLayout นั่นเอง) และมีโอกาสเกิด ViewNotEmptyException ด้วย

ตัวอย่างการใช้งาน เช่น

รวม ๆ แล้ว ก็จะได้ Code ดังนี้

ก็จะแสดง Banner ได้แล้ว ซึ่ง Banner ก็จะแสดงขึ้นมาเลย โดยไม่มี Progress เหมือนวิธีที่ 1

Vserv.mobi Banner เมื่อเรียกใช้งานด้วย Method getAd() + show()
Vserv.mobi Banner เมื่อเรียกใช้งานด้วย Method getAd() + show()

 

โฆษณาแบบ Interstitial / Billboard / Full Screen

สำหรับการติดโฆษณาแบบ Billboard ของ Vserv.mobi นั้น จะไม่ต้องทำอะไรกับส่วนของ Layout เลย จะเป็นการเขียน Code อย่างเดียว และจะใช้ Class VservManager เช่นเดียวกับโฆษณาแบบ Banner

สำหรับการแสดง Billboard นั้น มีอยู่ด้วยกัน 2 วิธี คือ

  1. สั่งให้แสดงขึ้นมาเลย ด้วย Method displayAd()
  2. สั่งให้ดึงข้อมูลมาก่อน ด้วย Method getAd() แล้วค่อยแสดงเมื่อต้องการ

 

วิธีที่ 1 การสั่งให้แสดง Billboard ขึ้นมาเลย ด้วยการใช้ Method displayAd() นั้น มีให้ใช้งานด้วยกัน 3 รูปแบบ (Overload) ดังนี้

  • void displayAd(String zoneId) – ต้องกำหนด Parameter 1 ตัว คือ Zone ID
  • void displayAd(String zoneId, AdOrientation adOrientation) – ต้องกำหนด Parameter 2 ตัว คือ Zone ID และ AdOrientation
  • void displayAd(String zoneId, AdType adType) – ต้องกำหนด Parameter 2 ตัว คือ Zone ID และ AdType

สำหรับ AdOrientation นั้น สามารถกำหนดได้ 2 แบบ คือ AdOrientation.PORTRAIT หรือ AdOrientation.LANDSCAPE สำหรับแสดงโฆษณาเมื่อ App แสดงอยู่ในแนวตั้ง และแนวนอน ตามลำดับ

ส่วน AdType นั้น สามารถกำหนดได้ 2 แบบ คือ AdType.INTERSTITIAL หรือ AdType.OVERLAY โดยแบบ AdType.INTERSTITIAL จะแสดงบน Activity ใหม่ ส่วน AdType.OVERLAY จะแสดงบน Dialog หากไม่กำหนด AdType จะแสดง Billboard แบบ AdType.INTERSTITIAL

ตัวอย่างการใช้งาน เช่น

หรือ

หรือ

ซึ่งจะแสดงโฆษณาแบบ Billboard ได้แล้ว…

รูปด้านล่าง ด้านซ้าย แสดงแบบ AdType.INTERSTITIAL ส่วนด้านขวา แสดงแบบ AdType.OVERLAY

Vserv.mobi Billboard เมื่อเรียกใช้งานด้วย Method displayAd()
Vserv.mobi Billboard เมื่อเรียกใช้งานด้วย Method displayAd()

 

วิธีที่ 2 การสั่งให้ดึงข้อมูลมาก่อน โดยการใช้ Method getAd() นั้น มีให้ใช้งานด้วยกัน 2 รูปแบบ (Overload) ซึ่งก็คือแบบเดียวกับ Banner ในหัวข้อก่อนหน้านี้นั่นเอง

ไม่เขียนซ้ำละกันนะ 😛

เมื่อเกิด onLoadSuccess() เราก็สามารถนำตัวแปร adObject (ชนิด VservAd) ไปสั่งให้แสดงผล ด้วย Method overlay() โดยสามารถใช้งานได้ 2 รูปแบบ (Overload) ดังนี้

  • void overlay(Context context) – ต้องกำหนด Parameter 1 ตัว คือ Context
  • void overlay(Context context, AdType mAdType) – ต้องกำหนด Parameter 2 ตัว คือ Context และ AdType

ตัวอย่างการใช้งาน เช่น

หรือ

สำหรับการแสดงโฆษณาแบบ Billboard โดยใช้ AdType.INTERSTITIAL นั้น เนื่องจากว่าเป็นการเปิดโฆษณาบน Activity ใหม่ ทำให้ Activity ที่เราอยู่ เข้าสู่สถานะ Stoped และจะกลับเข้าสู่ Resumed เมื่อผู้ใช้ทำการปิดโฆษณาลง ซึ่ง Vserv.mobi มี Method setShowAt() ของ Class VservManager ให้เรากำหนด ก่อนที่จะแสดงโฆษณาแบบ Billboard โดยมีรูปแบบ ดังนี้

  • void setShowAt(AdPosition adPosition) – ต้องการ Parameter 1 ตัว คือ AdPosition

สำหรับ AdPosition นั้น สามารถกำหนดได้ 3 แบบ คือ AdPosition.START, AdPosition.IN และ AdPosition.END โดยใช้ระบุว่า โฆษณาแบบ Billboard ที่แสดงแบบ AdType.INTERSTITIAL แสดงเมื่อ เข้าสู่ App, อยู่ใน App หรือ ออกจาก App ตามลำดับ หากไม่กำหนด AdPosition จะมีค่าเป็น AdPosition.IN

ตัวอย่างการใช้งาน เช่น

รวม ๆ แล้ว ก็จะได้ Code ดังนี้

 

เมื่อ User ปิดโฆษณาลง จะกลับมายัง Activity ที่เราสั่งให้เปิดโฆษณาขึ้นมา และเกิด Callback มายัง Method onActivityResult() ของ Activity ซึ่งเราสามารถตรวจสอบ requestCode ว่ามีค่าเป็น VservManager.REQUEST_CODE ได้ ทำให้เราทราบว่ามีการปิดโฆษณาลงไปแล้ว และทำการคืน resources ให้กับระบบได้ ดังนี้

เห็นตรงคำว่า “start” ไม๊ครับ เป็นการตรวจสอบว่าเป็นโฆษณาที่แสดงอยู่ใน App เมื่อใด

  • หากเป็นโฆษณาที่แสดงเมื่อเข้าสู่ App (AdPosition.START) ให้กำหนดเป็นคำว่า “start”
  • หากเป็นโฆษณาที่แสดงเมื่ออยู่ภายใน App (AdPosition.IN) ให้กำหนดเป็นคำว่า “mid”
  • หากเป็นโฆษณาที่แสดงเมื่อออกจาก App (AdPosition.END) ให้กำหนดเป็นคำว่า “end”

พิเศษหน่อย สำหรับกรณีออกจาก App ให้ใส่คำสั่งแสดงโฆษณา ไว้ที่ Method finish() ของ Activity ตัวอย่างดังนี้

แล้วไปตรวจสอบที่ Method onActivityResult() ของ Activity เพื่อสั่งให้ finish() แทน ดังนี้

 

VservAd Method อื่น ๆ ที่น่าสนใจ

สำหรับการสั่งให้ดึงข้อมูลโฆษณามาก่อน ไม่ว่าจะเป็น Banner หรือ Billboard ที่เราต้อง Implement Interface AdLoadCallback นั้น ที่ method onLoadSuccess() มีการส่งค่า VservAd มาให้นั้น นอกจาก Method show() และ Method overlay() ของ Class VservAd แล้ว ยังมี Method ให้ใช้งานอีก 2 ตัว ดังนี้

  • void setZoneId(String zoneId) – ต้องการ Parameter 1 ตัว คือ Zone ID สำหรับการเปลี่ยน Zone ID ใหม่
  • String getZoneId() – มี Return เป็นชนิด String สำหรับคืนค่า Zone ID ที่กำหนดไว้อยู่

 

VservManager Method อื่น ๆ ที่น่าสนใจ

และสำหรับ Class VservManager ก็มี Method ให้ใช้งานอีกหลายตัว เพื่อเพิ่มโอกาสที่จะแสดงรูปแบบโฆษณาที่เฉพาะเจาะจงกับผู้ชมโฆษณา ดังนี้

  • void setAge(String age) – ต้องการ Parameter 1 ตัว คือ age สำหรับกำหนดอายุของผู้ชมโฆษณา
  • void setBirthDate(String birthDate) – ต้องการ Parameter 1 ตัว คือ birthDate สำหรับกำหนดวันเกิดของผู้ชมโฆษณา
  • void setCity(String city) – ต้องการ Parameter 1 ตัว คือ city สำหรับกำหนดเมืองของผู้ชมโฆษณา
  • void setCountry(String country) – ต้องการ Parameter 1 ตัว คือ country สำหรับประเทศของผู้ชมโฆษณา
  • void setEmail(String email) – ต้องการ Parameter 1 ตัว คือ email สำหรับกำหนด Email ของผู้ชมโฆษณา
  • void setGender(Gender adGender) – ต้องการ Parameter 1 ตัว คือ Gender สำหรับกำหนดเพศของผู้ชมโฆษณา โดยสามารถกำหนดได้เป็น Gender.MALE หรือ Gender.FEMALE

 

Testing

สำหรับการทดสอบนั้น เราสามารถกำหนด Device ที่ใช้ทดสอบ ได้จาก Method addTestDevice() โดยมีรูปแบบ ดังนี้

  • void addTestDevice(String… Ids) – ต้องการ Parameter อย่างน้อย 1 ตัว

ซึ่งเราหาค่า Device ID ได้จากการ Run app แล้วหาค่า ID จาก LogCat [หมายเลข 1] โดย Search คำว่า tag:vserv [หมายเลข 2] ก็จะพบกับค่า Device ID [หมายเลข 3] ตามรูป

หาค่า Device ID จาก LogCat
หาค่า Device ID จาก LogCat

ตัวอย่างการใช้งาน ดังนี้

 

Code Example

สำหรับ Code ต่อไปนี้ เป็น App ตัวอย่าง ที่ผมทำไว้ สามารถ Copy ไปลองรันดูได้นะครับ

 

สำหรับ Review ติดโฆษณาบน Android App ของเรา ด้วย Vserv.mobi คงจบแค่เพียงเท่านี้นะครับ คิดว่าละเอียดมากพอสำหรับนำไปใช้งานจริงได้แล้ว

 

หากใครที่สงสัย หรือมีคำถามเกี่ยวกับ Vserv.mobi สามารถสอบถามข้อมูลเพิ่มเติม ได้จากกลุ่ม Vserv Thailand บน facebook ได้เลยครับ


อ้างอิง : Vserv.mobi – Knowledge Base : Android SDK Documentation

Leave a Reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.