หลังจากที่ผมได้เรียนรู้การพัฒนาแอปบน 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ติ๊ก Microsoft Advertising SDK for XAML

ติ๊ก Microsoft Advertising Universal SDK

แล้วกด OK

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

เพิ่ม Permission

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

เพิ่ม Ad Connected Service

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

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

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

โฆษณาแบบ Banner

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

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

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

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

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

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

xmlns:Universal="using:Microsoft.AdMediator.Universal"

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

<Universal:AdMediatorControl x:Name="ads_banner"
                     Visibility="Visible"
                     Id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                     Margin="0,0,0,0" 
                     VerticalAlignment="Top"  
                     Width="480" Height="80" />

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

<Page
    x:Class="ImmortalTable.Activity.testAds"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ImmortalTable.Activity"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:Universal="using:Microsoft.AdMediator.Universal">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    
    <Universal:AdMediatorControl x:Name="ads_banner"
                     Visibility="Visible"
                     Id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                     Margin="0,0,0,0" 
                     VerticalAlignment="Top"  Width="480" Height="80" />
    </Grid>
</Page>

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

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

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

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

AdMediatorControl banner = new AdMediatorControl();
            banner.Width = 480;
            banner.Height = 80;
            banner.Id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
            grid_root.Children.Add(banner); // add banner on grid.

Event ของโฆษณา

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

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

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

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

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

        private void ads_banner_Loaded(object sender, RoutedEventArgs e)
        {
            Debug.Write("\n\n\nADS BANNER LOADED\n\n\n");
        }

        private void ads_banner_Loading(FrameworkElement sender, object args)
        {
            Debug.Write("\n\n\nADS BANNER LOADING\n\n\n");
        }

        private void ads_banner_AdSdkError(object sender, Microsoft.AdMediator.Core.Events.AdFailedEventArgs e)
        {
            Debug.Write("\n\n\nADS BANNER ERROR " + e.EventName+" , "+e.ErrorDescription+ "\n\n\n");
        }

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

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

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

โฆษณาแบบ Interstitial

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

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

InterstitialAd interstitial_ads = new InterstitialAd();

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

            // init ads.
            var app_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx";
            var unit_id = "xxxxxxxx";
            interstitial_ads.RequestAd(AdType.Video, app_id, unit_id);

            // Add event.
            interstitial_ads.AdReady += Ads_Ready;
            interstitial_ads.ErrorOccurred += Ads_ErrorOccurred;
            interstitial_ads.Completed += Ads_Completed;
            interstitial_ads.Cancelled += Ads_Cancelled;

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

        void Ads_Ready(object sender, object e)
        {
            if ((InterstitialAdState.Ready) == (interstitial_ads.State))
            {
                interstitial_ads.Show();
            }
        }

        void Ads_ErrorOccurred(object sender, AdErrorEventArgs e)
        {
            // error , can not load Ad. 
        }

        void Ads_Completed(object sender, object e)
        {
            // load Ad success,
        }

        void Ads_Cancelled(object sender, object e)
        {
            // ad cancelled
        }

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

using Microsoft.AdMediator.Universal;
using Microsoft.Advertising.WinRT.UI;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace ImmortalTable.Activity
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class testAds : Page
    {
        InterstitialAd interstitial_ads = new InterstitialAd();

        public testAds()
        {
            this.InitializeComponent();

            // init ads.
            var app_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx";
            var unit_id = "xxxxxxxx";
            interstitial_ads.RequestAd(AdType.Video, app_id, unit_id);

            // Add event.
            interstitial_ads.AdReady += Ads_Ready;
            interstitial_ads.ErrorOccurred += Ads_ErrorOccurred;
            interstitial_ads.Completed += Ads_Completed;
            interstitial_ads.Cancelled += Ads_Cancelled;
        }

        void Ads_Ready(object sender, object e)
        {
            if ((InterstitialAdState.Ready) == (interstitial_ads.State))
            {
                interstitial_ads.Show();
            }
        }

        void Ads_ErrorOccurred(object sender, AdErrorEventArgs e)
        {
            // error , can not load Ad. 
        }

        void Ads_Completed(object sender, object e)
        {
            // load Ad success,
        }

        void Ads_Cancelled(object sender, object e)
        {
            // ad cancelled
        }
    }
}

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

จบแล้ว

การทำโฆษณาบน 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