[Review] ติดโฆษณาบน Android App ของเรา ด้วย Vserv.mobi : Part 1 เตรียมความพร้อม

นอกจาก AdMob จาก Google แล้ว Vserv.mobi คือผู้ให้บริการโฆษณาอีกรายหนึ่ง ที่มี SDK หลากหลาย Platform ให้นักพัฒนา App นำไปใช้เพื่อติดโฆษณาสำหรับหารายได้

Vserv.mobi Logo

สำหรับบน Android นั้น ทาง Vserv.mobi ได้เตรียมรูปแบบโฆษณาให้เราไว้ 2 รูปแบบ นั่นคือ Banner และ Billboard (หรือที่เรียกกันว่า Interstitial หรือ Full Screen) นั่นเอง

สำหรับบทความตอนนี้ ผมจะสอนใช้งาน Vserv Android SDK เพื่อแสดงโฆษณาบน App แบบ Step by step เพื่อให้ผู้อ่านที่สนใจ สามารถทำตามได้เลย

โดยผมจะทำบน Eclipse นะครับ สำหรับ Android Studio ก็ลอง ๆ ปรับกันดูเองนะ

 

List of contents

 

สมัคร Vserv.mobi Developer Account

ก่อนอื่น ผู้ที่ยังไม่มี Vserv.mobi Developer Account ให้ไปสมัครก่อน ที่ Get Started นะครับ

สำหรับหน่วยโฆษณาบน Vserv.mobi จะเรียกว่า Zone ID ซึ่งเราจะต้องสร้าง Zone ID ขึ้นมาก่อน ซึ่งจะกล่าวถึงในหัวข้อถัดไป

แต่หากใครยังไม่มี Vserv.mobi Developer Account แต่อยากลองทดสอบ ทาง Vserv.mobi ก็ได้จัดเตรียม Zone ID สำหรับทดสอบไว้ให้ โดยมีค่าดังนี้

 

สร้าง Vserv Zone ID

ทำการ Login เข้าไปยัง Vserv.mobi Dashboard คลิกที่ Tab Inventory [หมายเลข 1] แล้วคลิก Add Zone [หมายเลข 2] ก็จะเข้าสู่หน้าของการเพิ่ม Zone

หน้า Inventory ของ Vserv.mobi
หน้า Inventory ของ Vserv.mobi

ในส่วนของ Basic information สามารถกำหนด Zone Name [หมายเลข 1] Type (ให้เลือกเป็น App) [หมายเลข 2] และ Size [หมายเลข 3] ซึ่งจะมีให้เลือกเป็นแบบ Banner และ Billboard (Full Screen หรือ Interstitial)

ในส่วนอื่น ๆ สามารถกำหนดได้ตามต้องการ (สามารถแก้ไขทีหลังได้)

หลังจากนั้น กดปุ่ม Save Changes [หมายเลข 4]

สำหรับ Name สามารถแก้ไขทีหลังได้ แต่สำหรับ Type และ Size เมื่อ Save แล้ว จะไม่สามารถแก้ไขได้

การเพิ่ม Zone ใหม่ สำหรับ Vserv.mobi
การเพิ่ม Zone ใหม่ สำหรับ Vserv.mobi

เมื่อ Save เรียบร้อย ในหน้า Inventory เราจะเห็น Zone ID ที่ระบบได้ Generate มาให้ ให้จดค่านี้ไว้ เพราะเราจะนำไปกำหนดใน App ของเราต่อไป

 

เพิ่ม Vserv Library Project

ก่อนอื่น ไป Download Vserv Android SDK มาก่อน แล้วทำการแตกไฟล์ออกมา จะพบกับ 2 โฟลเดอร์ (ตัวอย่าง App และ Project Library) และ 1 ไฟล์ (คู่มือ) ดังรูป

ในบทความนี้ อ้างอิงที่ Version 2.2.2

ข้างในไฟล์ Vserv Android SDK
ข้างในไฟล์ Vserv Android SDK

ทำการ Import Project Library จากโฟลเดอร์ AndroidV2SDKLibrary เข้าสู่ Eclipse โดยการคลิกขวา ที่ Package Explorer (หรือที่เมนู File ก็ได้) แล้วเลือกเมนู Import…

Import Project Library บน Eclipse
Import Project Library บน Eclipse

ใน Import Dialog เลือก Android > Existing Android Code Into Workspace [หมายเลข 1] แล้วคลิกปุ่ม Next > [หมายเลข 2]

Import Dialog ของ Eclipse
Import Dialog ของ Eclipse

ทำการ Browse… ไปยัง Folder ที่วาง AndroidV2SDKLibrary ไว้อยู่ [หมายเลข 1] แล้วติ๊กถูกที่ AndroidV2SDKLibrary [หมายเลข 2]

ส่วนตัวเลือก Copy projects into workspace หากต้องการ Copy ทั้ง Project ไปไว้ที่ workspace ให้ติ๊กถูกไว้ [หมายเลข 3]

และที่กลุ่ม Working sets ติ๊กถูกที่ Add project to working sets หากต้องการให้ Project อยู่ภายใต้ Working sets ที่ต้องการ (ในตัวอย่าง ได้สร้าง Working sets สำหรับ Android Lib ต่าง ๆ ไว้อยู่แล้ว) [หมายเลข 4]

เมื่อกำหนดค่าต่าง ๆ เรียบร้อย คลิกปุ่ม Finish [หมายเลข 5] ได้เลย

เพิ่ม Vserv Library Project
เพิ่ม Vserv Library Project

 

ตั้งค่า Vserv Library Project

เนื่องจาก Vserv Library Project มีการใช้งาน Google Play Services library อยู่ด้วย เพราะฉะนั้น เราต้องทำการ Import Google Play Services library project ไว้ด้วย จึงต้องมีการตั้งค่าให้กับ Vserv Library Project ดังนี้

คลิกขวา ที่ Vserv Library Project [หมายเลข 1] เลือก Properties [หมายเลข 2]

คลิกขวาที่ Project เลือกเมนู Properties เพื่อเปิด Properties Dialog
คลิกขวาที่ Project เลือกเมนู Properties เพื่อเปิด Properties Dialog

ที่ Properties Dialog ของ Vserv Library Project ในส่วนของ Android [หมายเลข 1] ว่ามีการตั้งค่าไว้ถูกต้องหรือไม่ ซึ่ง Default จะกำหนดค่า Project Build Target เป็น API Level 19 [หมายเลข 2], กำหนดให้ Vserv Library Project เป็น Library [หมายเลข 3], Reference ไปยัง Google Play Services library [หมายเลข 4]

หากว่าไม่ได้ค่าตามนี้ ต้องกำหนดค่าให้ถูกต้องเองนะครับ เช่นหากว่ามีการ Reference Google Play Services library โดยใช้ชื่ออื่น ก็ทำการ Reference ใหม่เอง

เรียบร้อยแล้ว กดปุ่ม OK [หมายเลข 5]

ตั้งค่า Vserv Library Project ให้เป็น Library และ Reference ไปยัง Google Play Services library
ตั้งค่า Vserv Library Project ให้เป็น Library และ Reference ไปยัง Google Play Services library

 

สำหรับ App ที่ไม่มีการใช้งาน Google Play Services library อยู่ก่อน ให้ข้ามไปอ่านหัวข้อต่อไปได้เลยครับ

 

แต่สำหรับ App ที่มีการใช้งาน Google Play Services library อยู่ก่อนแล้ว ให้ทำการแก้ไขไฟล์ AndroidManifest.xml ของ Vserv Library Project [หมายเลข 1] ในมุมมอง XML [หมายเลข 2] ทำการเลือกส่วนของ tag meta-data [หมายเลข 3] แล้วคลิกขวา ทำการ Comment ส่วนนี้ทิ้งไป [หมายเลข 4] ทำการเซฟให้เรียบร้อย

หรือจะลบทิ้งไปเลยก็ได้นะ…

สาเหตุที่ไม่ใช้ค่า meta-data ในส่วนนี้ เนื่องจากว่า Project ที่จะมาใช้ Vserv Library Project ที่มีการใช้งาน Google Play Services library มีการกำหนด meta-data ส่วนนี้อยู่แล้วนั่นเอง

แก้ไขไฟล์ AndroidManifest.xml ของ Vserv Library Project
แก้ไขไฟล์ AndroidManifest.xml ของ Vserv Library Project

หลังจาก Comment meta-data ทิ้งแล้ว ไฟล์ AndroidMenifest.xml จะกลายเป็นดังนี้

 

เพิ่ม Reference Vserv Library Project ให้กับ Project ของ App

ที่ Project Properties ของ App ทำการเพิ่ม Reference Vserv Library Project ลงไป [หมายเลข 1] แล้วกดปุ่ม OK [หมายเลข 2]

ทำการ Reference Vserv Library Project เข้าสู่ App ที่ต้องการใช้งาน
ทำการ Reference Vserv Library Project เข้าสู่ App ที่ต้องการใช้งาน

แล้วเปิดไฟล์ project.properties ของ App [หมายเลข 1] ขึ้นมา เพิ่มคำสั่งต่อไปนี้ลงไป [หมายเลข 2]

คำสั่งดังกล่าว เป็นการกำหนดให้ทำการรวมค่าต่าง ๆ ของไฟล์ AndroidManifest.xml จาก Library Project ที่เรา Reference ไว้ เข้ากับ AndroidMenifest.xml ของเรา เป็นเหตุผลที่เราต้อง Comment meta-data ทิ้ง ในขั้นตอนที่แล้ว สำหรับ App ที่มีการใช้งาน Google Play Services library อยู่ก่อนแล้ว

กำหนดค่าในไฟล์ project.properties เพิ่มเติม
กำหนดค่าในไฟล์ project.properties เพิ่มเติม

 

ได้เวลาเขียน Code กันแล้ววววว…

 

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


อ้างอิง : 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.