web analytics

UWP Code : ติดโฆษณาบนแอป UWP ด้วย Microsoft Universal Ad

cover-1

หลังจากที่ผมได้เรียนรู้การพัฒนาแอปบน Windows 10 มาสักพัก พอได้ลองๆทำแล้วสนุกดีครับ ได้เรียนรู้หลายๆอย่าง Microsoft ก็ทำเอกสารดีมากๆ บทความนี้จะพามาทำ การติดโฆษณาบนแอป Windows 10 กัน ซึ่งคล้ายๆกับของ แอนดรอย  Admob หากใครเคยเคยทำบนแอนดรอยมาแล้วจะสบายมากๆ หวังว่าบทความนี้จะมีประโยชน์กับคนที่สนใจแอป Windwos10 ครับ ลุยเลย

 

สมัคร Microsoft Developer Account

ใครยังไม่มี account ก็ต้องสมัครก่อนนะครับ ค่าสมัคร ราวๆ 19 USD เสียครั้งเดียว ใช้ได้ตลอดชีวิต ไม่มีรายปี ถ้าใครมี Dream spark ลองเข้าไปหา Redeem code ดูครับ อาจจะมีแจกอยู่ ถ้ามีก็เอา code มาใส่ในช่อง code ตอนชำระเงินเลย ผม Redeem code ได้จากที่นี่แหละ เลยไม่ต้องเสีย 19 USD สบายกระเป๋า

https://dev.windows.com/programs/join

 

เริ่มต้น

ก่อนอื่นต้องยอมรับก่อนนะครับว่า โฆษณาบนแพลตฟอร์ม Windows 10 เนี่ย ถึงจะเป็น UWP (Universal Windows Platform) ตลาดก็ไม่เท่ากับแอนดรอยหรือ iOS เลย ห่างกันลิบลับ ปี 2016 ส่วนแบ่งตลาดของ Windows 10 mobile ยังไม่ถึง 3% เลยด้วยซ้ำ ดังนั้นรายได้ก็อาจจะเทียบกันไม่ได้นั่นเอง คนใช้น้อยมากๆ ส่วน Windows 10 บน PC แม้จะมีคนใช้เยอะ แต่ว่าแอปบน store ก็ไม่เป็นที่นิยม

หากเรามี account แล้ว ล็อคอินเข้า  dev.windows.com แล้วล็อคอินเข้า Dashboard

https://dev.windows.com/en-us/overview

1

 

โดยหน้าแรก จะมีบอกสถิติหรือเทรน ใน Windows store (3% จากทั้งโลก น้อยมากๆอ่ะ) ซึ่งน่าจะเป็นรายได้รวมทั้งขายแอป ขายโฆษณา

2

 

 

 

 

 

 

 

 

 

 

สร้างโฆษณาให้กับแอป

ทำความข้าใจก่อนนะครับว่า Microsoft มีตัวโฆษณาของตัวเองเลย ดังนั้น ถ้าเราใช้ Microsoft Advertisement (Bing Ads) มันจะเหมือนกับ ผนวกรวมกับเมนูจัดการแอปของเราเลย แต่ก็มีหลายเจ้าให้เลือกนะ อยู่ที่จะ support มัย แตกต่างจากของแอนดรอยด์ใน Android developer console จะไม่มีเมนูรายได้โฆษณา แต่ของ Microsoft จะมีเมนู Monetize with ads อยู่เลยตรงนี้

(ที่น่าเสียใจคือ Admob ไม่ support Windows 10 UWP นะครับ)

 

ให้เราเข้ามาที่แอปของเรา ถ้าไม่มีก็ create app ก่อน  มาที่เมนู Monetization > Monetize with ads

3-1

 

 

เลื่อนลงมาที่เมนู Microsoft advertising ad units กด แสดง options ที่ซ่อนอยู่ จะแสดงช่องให้เราเพิ่ม ad unit ในแอปของเรา ก็ให้ใส่

Ad unit name เป็นชื่อ หน่วยโฆษณา แล้วแต่เราจะตั้งเลยครับ

Ad unit type คือ รูปแบบของโฆษณา มีให้เลือก แบบ Banner เป็นป้าย กับ แบบ Video interstitial  คือ มีวิดีโอขึ้นเต็มหน้า

Device family คือ จะเอาไปแสดงในอุปกรณ์อะไร มีให้เลือกคือ PC/Tablet กับ Mobile

4-1

 

สิ่งสำคัญที่จะได้มา คือ Application ID และ Ad unit ID เดี๋ยวเราจะต้องนำสองอันนี้ไปใช้ครับ

 

ดาวน์โหลด Microsoft Universal Ad Client SDK

จากนั้นไปโหลดไฟล์ SDK ของโฆษณามาติดตั้งในเครื่อง ขนาดไฟล์ประมาณ 21 MB

https://visualstudiogallery.msdn.microsoft.com/401703a0-263e-4949-8f0f-738305d6ef4b

 

5-1

 

แล้วก็ทำการติดตั้งปกติครับ รอจนเสร็จ

5

 

เพิ่ม Reference ของ Ads SDK ให้โปรเจค

เปิดโปรเจคของเราขึ้นมา เป็นโปรเจค Universal app นะ จะ new โปรเจคปล่าวๆก้ได้

ไปที่แถบ Solution Explorer ภายใต้แถบ โปรเจคของเรา คลิกขวาที่ Reference เลือก Add Reference…

6-01

 

มาที่แถบ Universal Windows > Extensions แล้ว

ติ๊ก Microsoft Advertising SDK for XAML

ติ๊ก Microsoft Advertising Universal SDK

แล้วกด OK

7

เท่านี้โปรเจคของเราก็จะมี reference ของโฆษณาเข้ามาแล้ว

 

เพิ่ม Permission

การแสดงโฆษณา แน่นอนว่าจะต้องใช้อินเตอร์เน็ต ดังนั้นก็ต้องไปขอ permission ก่อน ให้ไปที่ Package.appmanifest ไปที่แถบ Capabilities แล้วติ๊ก Internet (Client) แล้วกด save เป็นอันเสร็จเรียบร้อย

8

 

เพิ่ม Ad Connected Service

คลิกขวาที่โปรเจค เลือก Add > Connected Service

6-1

 

ปรากฏหน้าจอ ให้เลือก Ad Mediator

15

 

จากนั้นเลือก Microsoft Advertising แล้วกด OK เป็นอันเสร็จ

16

โฆษณาแบบ Banner

โฆษณาแบบ banner คือเป็นโฆษณาที่จะแสดงบนจอ คล้ายๆวางบน grid โดยเราต้องกำหนดขนาดโฆษณาให้ตรงกับที่กำหนดด้วยนะ ถ้าขนาดผิด กับผิดอุปกรณ์ มันก็จะไม่แสดง ย้ำว่าถ้าขนาดไม่ตรงกับที่กำหนดโฆษณาไม่แสดง

รายละเอียดดูได้ที่ https://msdn.microsoft.com/en-us/library/mt628523.aspx

9

 

ตัวอย่างพื้นที่โฆษณา ขนาด 480 x 80 บน Windows 10 mobile

a

 

ตัวอย่างพื้นที่โฆษณา 300×250 บน Windows 10 (ถ้าทำดีๆ อาจเนียนกลืนไปกับเนื้อหาได้เลย)

b

 

มาลองทำกันครับ เปิดไฟล์ .xaml ขึ้นมาก่อน

เพิ่ม library ไปที่ <Page>

แปะโฆษณาลงไป ใส่ id โฆษณาเราลงไปด้วย

 

MainPage.xaml จะได้ประมาณนี้

 

ลองรันดูครับ จะพบแบรนเนอร์ โฆษณาจะขึ้นเป็นแบรน Microsoft ซึ่งต้องเอาไป deploy ก่อนโฆษณาจริงๆจึงจะมา

10

ลองเปลี่ยนความกว้าง ความสูง แบบ 300×600 ดูบ้าง

11

 

แต่พอเราเปลี่ยนขนาดเป็น ขนาดที่ไม่เป็นไปตามที่กำหนด โฆษณาจะไม่ปรากฏ

 

หรือจะเขียน C# ทำโฆษณาแบรนเนอร์ขึ้นมาก็ได้เช่นกันครับ โดยไปตั้งชื่อ grid ที่ต้องการจะเอาโฆษณาใส่ลงไปก่อน (grid tag ครอบโฆษณา) ผมตั้งชื่อว่า grid_root แล้วค่อย add ลงไป

 

Event ของโฆษณา

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

12

 

ผมจะลองสัก 3 อัน

Loaded คือ โฆษณาโหลดเสร็จแล้ว

Loading คือ กำลังโหลดโฆษณา

AdDskError คือ เกิดข้อผิดพลาดขึ้น

 

ลองรันแอปขึ้นมา แล้วก็ไปสังเกตที่ output

13

 

ลองใส่ขนาดโฆษณาผิด ขนาดที่ไม่ได้เป็นไปตามที่กำหนด เพื่อดู error

มันขึ้นมาด่าว่า ADS BANNER ERROR

14

 

โฆษณาแบบ Interstitial

โฆษณาแบบนี้เป็นโฆษณาแบบเต็มจอ คั้นรหว่างหน้า โดยโฆษณาแบบนี้ ตอนนี้ของ Microsoft Advertisement มีแค่แสดงแบบวิดีโอขึ้นมาเลย (ออกจะโหดไปหน่อยนะ) หลักการของมันคือ จะโหลดก่อนไว้ แล้วพอเราจะแสดงเราค่อยสั่งให้มันแสดง (โหลดไว้เสร็จแล้ว) อันนี้ไม่มีเขียนแบบ XAML ต้อง C# เท่านั้น

 

ประกาศตัวแปรสำคัญ

 

implement ส่วนของโฆษณา ใส่ id ให้มัน ใส่ event ให้มัน

 

ฟังก์ชันการทำงานของ event โดยตัวอย่างนี้ จะให้มันแสดงโฆษณาเลยเมื่อมันโหลดเสร็จ

 

รวมทั้งหมด ไฟล์ testAds.xaml.cs

 

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

17

 

โดยโฆษณารูปแบบนี้จะรองรับเฉพาะประเทศ ต่อไปนี้เท่านั้น ไม่มีประเทศไทย
 Australia , Brazil , Canada, France, Germany, Italy, Japan, Spain, United Kingdom, United States
ไม่แน่ใจว่าถ้านอกเหนือจากประเทศเหล่านี้โฆษณาจะขึ้นรึป่าว คิดว่าน่าจะเช็คจากภูมิภาคของเครื่องที่ตั้งไว้ ส่วนโฆษณาแบบ banner ก็รองรับแทบทุกประเทศในโลก

จบแล้ว

การทำโฆษณาบน Windows 10 ผมคิดว่าคล้ายๆกับ Admob บน android จะแตกต่างกันเล็กน้อย  ความสามารถของ Microsoft Universal Ad อาจจะดูน้อยกว่า เช่น โฆษณาแบบ interstitial แสดงได้แค่แบบวิดีโอ ซึ่งบางทีมันก็ดูน่ารำคาญอยู่บ้าง หวังว่าบทความนี้จะเป็นประโยชน์แก่ผู้อ่านไม่มากก็น้อยครับ

 

ขอบคุณที่ติดตามครับ (:

 

Reference

https://msdn.microsoft.com/en-us/library/mt313199.aspx
https://msdn.microsoft.com/library/mt628522(v=msads.30).aspx
https://msdn.microsoft.com/en-us/library/mt313124(v=msads.30).aspx
https://dev.windows.com/en-us/monetize/ads