試議WindowsPhone廣告服務(wù)應(yīng)用

1、刖言在我們的網(wǎng)站上（或是blog）通常我們會(huì)加入一些由廣告服務(wù)商提供的廣告來(lái)源，進(jìn)而增加一些網(wǎng)站的收益，那么在WindowsPhone 7 上,我們是不是也可以用類似的方式來(lái)增加收益呢？答案是可以的，接下在本篇會(huì)介紹該如何在您的應(yīng)用程序中加入這樣的功能。在開(kāi)始之前，如果您還沒(méi)有下載過(guò)Windows Phone 7開(kāi)發(fā)工具，那么您可以立刻前往下載，Windows Phone 7是一個(gè)嶄新的平臺(tái)，而且開(kāi)發(fā)工具是完全免費(fèi)的，任何人都可以開(kāi)發(fā)Windows Phone 7的應(yīng)用程序。下載的地址在下面這邊那么應(yīng)該要怎么幫應(yīng)用程序的加入這樣的功能呢？步驟大致如下 申請(qǐng)發(fā)布商ID （賬號(hào)）二 下載應(yīng)用程序使

2、用的組件（或是自行開(kāi)發(fā)）3 將功能加入你的應(yīng)用程序中接下來(lái)，正式開(kāi)始介紹如何在您的應(yīng)用程序中加入admob的功能。申請(qǐng)發(fā)布商ID （賬號(hào)）admob的網(wǎng)站，位置是首先我們必須要先申請(qǐng)一個(gè)發(fā)布商的賬號(hào)，先進(jìn)到在第一次使用時(shí)，必須要建立一個(gè)新的賬號(hào)，點(diǎn)擊立即注冊(cè)的按鈕進(jìn)行注冊(cè)（如果您看到的網(wǎng)站是英文接口， 您可以在網(wǎng)站頁(yè)面 的最下方找到語(yǔ)言調(diào)整的選項(xiàng)）接下來(lái)會(huì)進(jìn)到注冊(cè)頁(yè)面，如下圖的樣子，輸入您個(gè)人的相關(guān)數(shù)據(jù)，要注意粗體字的字段都是必填的；而由于注冊(cè)之后，系統(tǒng)會(huì) 寄發(fā)一封驗(yàn)證的 Email給您，請(qǐng)務(wù)必要確認(rèn) Email地址的正確性。接下來(lái)，您會(huì)收到由admob寄發(fā)的一圭寸通知email，其中會(huì)有驗(yàn)證

3、的連結(jié)，如下圖上J«YmaK«在這個(gè)畫(huà)面中，請(qǐng)選擇 ”新增您的第一個(gè)網(wǎng)站”（如下圖所示的位置）接下來(lái)會(huì)進(jìn)到選取應(yīng)用程序類型的畫(huà)面；在這個(gè)畫(huà)面中是選取平臺(tái)的項(xiàng)目，由于Windows Phone 7是新的平臺(tái)，在這邊還看不到這個(gè)項(xiàng)目，不過(guò)沒(méi)關(guān)系，我們可以用”移動(dòng)電話網(wǎng)絡(luò)”這個(gè)項(xiàng)目來(lái)做，像是下圖admob點(diǎn)選之后，在下方會(huì)出現(xiàn)細(xì)節(jié)的數(shù)據(jù)要您填寫(xiě)，這邊做個(gè)簡(jiǎn)單的范例如下圖邊的興趣。按下”繼續(xù)”的按鈕之后，會(huì)進(jìn)入到網(wǎng)站程序代碼的畫(huà)面,名稱的地方輸入您網(wǎng)站的名稱，而網(wǎng)站 URL的地方筆者是輸入 blog的網(wǎng)址來(lái)替代，類別是選擇”社群”；而網(wǎng)站說(shuō)明的地方,可以填入您網(wǎng)站的簡(jiǎn)介或是流量等信

4、息，讓要刊登廣告的客戶能比較了解您網(wǎng)站的性質(zhì)以及流量，提高客戶將廣告放置在您這新哺尉洶/矽口程貳1 敢毎苗理遠(yuǎn) yiwfc* riHHtllilT加MUI式*注：由于實(shí)際使用時(shí)，程序代碼中是利用 WebClient對(duì)服務(wù)端發(fā)出要求提取響應(yīng)之后由程序代碼來(lái)做相關(guān)的顯示，所以可以利用”移動(dòng)電話網(wǎng)絡(luò)”的方式來(lái)做前往網(wǎng)站鷹用程式這個(gè)部分是要將廣告放置在網(wǎng)站上面時(shí)會(huì)使用的，這邊我們*（注）不會(huì)用到，直接點(diǎn)擊最下面的按鈕到下一個(gè)步驟。*注：如果您想要自行開(kāi)發(fā)存取admob的功能也可以參考這邊的程序代碼接下來(lái)會(huì)看到成功建立網(wǎng)站的訊息，由于還沒(méi)有使用（點(diǎn)擊）紀(jì)錄的關(guān)系，這邊看到的都會(huì)是0;在這個(gè)地方，比較重要

5、的是要先取得我們的發(fā)布商ID，那ID在什么地方呢？請(qǐng)依照下圖提示的位置，點(diǎn)選”管理設(shè)定”的按鈕Ulif vv1疋已朋m3蜒1吻總«$0.00$0.00l/g剛 L KMfQ.» CW|A號(hào) E 8= £ 嗆14 uO之后便會(huì)看到發(fā)布商ID 了，這個(gè)要趕緊紀(jì)錄起來(lái)，在應(yīng)用程序開(kāi)發(fā)的時(shí)候，都會(huì)需要用到的到這邊，基本的設(shè)定已經(jīng)完成，也取得發(fā)布商ID 了，但是還有一個(gè)步驟需要做，那就是設(shè)定我們收取款項(xiàng)的相關(guān)信息了；請(qǐng)先選擇”帳戶”菜單的”付款詳細(xì)數(shù)據(jù)”，如下圖付款詳紬資料FW9沖翼眄胃強(qiáng)佈虎的帆再賞1FI 更押配印，之后會(huì)進(jìn)入各項(xiàng)設(shè)定的畫(huà)面，請(qǐng)依照您申請(qǐng)的類型作填寫(xiě)，下圖

6、所示是筆者的填寫(xiě)范例到這邊相關(guān)的賬戶設(shè)定就到一段落了，其他網(wǎng)站設(shè)定中還可以設(shè)定過(guò)濾的關(guān)鍵詞等功能，這邊筆者就不再介紹了；接下來(lái)需要下載組件來(lái)使用了V下載應(yīng)用程序使用的組件 (或是自行開(kāi)發(fā)) 在之前申請(qǐng)賬號(hào)的過(guò)程中，會(huì)看到相關(guān)的程序代碼，如果您想要自行開(kāi)發(fā)，可以參考范例程序代碼來(lái)實(shí)作；而網(wǎng)絡(luò)上也有熱心的朋友已經(jīng)做好相關(guān)的功能，提供給大家使用，并且提供了原始碼下載；筆者這邊介紹由Jacob Gable所提供的原始碼以及范例。首先請(qǐng)到下面網(wǎng)站下載需要的組件以及范例程序代碼或是位于CodePlex的這邊將項(xiàng)目下載回來(lái)之后，解開(kāi)壓縮，之后先開(kāi)啟項(xiàng)目檔NameMoAdsMoAds_Cu5t<j<

7、;nAd$<rvi«SftrMoJlxfc.iuo之后在方案總管(Solution Explorer)的窗口中會(huì)看到三個(gè)項(xiàng)目各項(xiàng)目的用途如下 MoAds :控件的源代碼MoAds.CustomAdServiceSite : MVC的網(wǎng)站，是原作者用來(lái)提供自定義廣告訊息的訊息來(lái)源*注：若您使用的開(kāi)發(fā)工具是 Express版本，由于其中沒(méi)有支持 MVC相關(guān)的開(kāi)發(fā)，您可以將這部分的項(xiàng)目移除，只要留MoAds 與MoAds.Example項(xiàng)目就可以了，只是會(huì)看不到自定義廣告的效果* MoAds.Example : Windows Phone 7 的范例程序代碼在MoAds.Exampl

8、e的項(xiàng)目中，點(diǎn)選MainPage就可以看到范例的程序代碼；在第一次點(diǎn)選的時(shí)候，您可能會(huì)跟筆者一樣，出現(xiàn)一堆錯(cuò)誤訊息不過(guò)不要緊，這不是真的錯(cuò)誤，是還沒(méi)有建置 (Build)過(guò)的關(guān)系，首先在方案總管中，先建置組件的項(xiàng)目之后建置MVC項(xiàng)目最后建置Example的項(xiàng)目，像下圖、二ri BuildPergnvbitRebuildDeployCleanRun Code AnalysisCakulatr Code MetricsOptn in Expression 樹(shù)encL+接下來(lái)在設(shè)計(jì)畫(huà)面中，點(diǎn)選重載，就可以看到畫(huà)面能夠正常顯示了Right CrickRefereinc«AppjcmlAppl

9、icationlcon pngBackgrQiind.png MainPagenril SplashSc rcenlmag e.j pg接下來(lái)，在范例程序中，XAML的部分，可以看到 Resource的地方定義了兩種樣式，例如下圖Style的Key名稱這是原作者提供的兩種樣式，可供使用的時(shí)候根據(jù)環(huán)境自由選擇，下面是兩種 TextOnlyAdMobStyle :純文本的顯示方式 AnimationAdMobStyle :包含動(dòng)畫(huà)的顯示方式接下來(lái)，再往下看，會(huì)看到控件的使用方式，例如<moad:AdDisplayHeight="70"VerticalAlignment=&

10、quot;Top"Foreground="White"RefreshSeconds="30"><moad:AdDisplay.AdAdapter><moad:AdMobAdapterPublisherld="YourPublisherlD"CookieString="YourCookieString"AdKeywords="Boston"UseTestMode="True"/>v/moad:AdDisplay.AdAdapter>

11、</moad:AdDisplay>這是控件在XAML的使用方式范例；而下面第二個(gè)使用范例可以看到原作者套用了Style，例如下面這樣 <moad:AdDisplayStyle="StaticResource TextOnlyAdMobStyle"VerticalAlignment="Center"Foreground="White"RefreshSeconds="30"><moad:AdDisplay.AdAdapter><moad:AdMobAdapterPublishe

12、rld="YourPublisherlD"CookieString="YourCookieString"AdKeywords="Boston"UseTestMode="True"/>v/moad:AdDisplay.AdAdapter></moad:AdDisplay>從這邊可以看出，如果沒(méi)有指定樣式(Style)的話，預(yù)設(shè)的行為是會(huì)使用AnimationAdMobStyle的樣式的。而在最下面的地方，會(huì)看到一個(gè)客制的控件<!- Custom Ad Service example -&

13、gt;<moad:AdDisplayStyle="StaticResource AnimationAdMobStyle"VerticalAlignment="Bottom"Foreground="White"RefreshSeconds="5"><moad:AdDisplay.AdAdapter><local:CustomAdAdapterPublisherId="SomePubId"ClientId="SomeClientId"/><

14、;/moad:AdDisplay.AdAdapter></moad:AdDisplay>這是原作者實(shí)作了一個(gè)CustomAdAdapter，來(lái)對(duì)自定義的廣告數(shù)據(jù)源(也就是范例程序代碼中的CustomAdServiceSite項(xiàng)目)網(wǎng)站提出要求，之后取得自定義的廣告訊息；在范例程序代碼中(CustomAdAdapterCustomAdAdapter.c9可以看到宣告了一個(gè)CustomAdService， 這是主要處理數(shù)據(jù)的 類別，CustomAdService (CustomAdAdapter' CustomAdService.c 是 繼承自 BaseJsonServi

15、ce從這邊可以看出傳遞的資料是Json的格式，如果您有類似的需求可以參考這樣的方式下去進(jìn)行相關(guān)的開(kāi)發(fā)，就可以利用Moads提供的功能來(lái)顯示自定義的廣告內(nèi)容了。這邊特別提一下，如果您要直接執(zhí)行范例程序來(lái)看看效果的話，由于CustomAdAdapter會(huì)向MVC網(wǎng)站提出要求，所以執(zhí)行時(shí)必須要讓兩個(gè)項(xiàng)目同時(shí)執(zhí)行起來(lái)，這可以在項(xiàng)目屬性中設(shè)定好，了解了相關(guān)的使用方式之后，可以開(kāi)始將相關(guān)的功能加到我們的應(yīng)用程序中了。將功能加入你的應(yīng)用程序中首先，由于我們需要用到 Moads (先前下載的范例程序)所提供的相關(guān)組件，因此我們必須先將組件加入工具箱中， 以方便使用; 還記得先前我們有建置過(guò)組件的項(xiàng)目嗎？建置完

16、成后，在文件夾中會(huì)有組件檔案產(chǎn)生，位置會(huì)在bin文件夾下，或是您可以直接加入下載回來(lái)已經(jīng)建置好的組件檔案，位置大致上像下面這樣 你的范例程序位置 MoAds-Binaries_Source-v1.0'Binaries接下來(lái)在工具箱空白的地方點(diǎn)選鼠標(biāo)右鍵，之后選擇新增項(xiàng)目之后會(huì)出現(xiàn)選擇項(xiàng)目的對(duì)話框，這個(gè)時(shí)候請(qǐng)切換到先前下載的范例程序代碼組件位置，并找到Moads.dll的檔案，如下圖之后選擇開(kāi)啟，就會(huì)在工具箱中看到AdDisplay的新項(xiàng)目了；接下來(lái)可以拖拉一個(gè)AdDisplay項(xiàng)目到設(shè)計(jì)畫(huà)面上，并調(diào)整到適當(dāng)?shù)拇笮?接下來(lái)，我們觀察一下XAML 的變化，首先是在PhoneApplicat

17、ionPage的部分會(huì)多了一個(gè) xmlns，xmlns:my="clr-namespace:MoAds;assembly=MoAds"這是在拖拉組件時(shí)，Visual Studio自動(dòng)幫我們加入的相關(guān)組件的參考，在下面的ContentGrid也會(huì)多出相關(guān)的 XAML Code<my:AdDisplay Height="70" HorizontalAlignment="Left"Margin="0,222,0,0" Name="adDisplay1"VerticalAlignment=&quo

18、t;Top" Width="456" />在這里可以發(fā)現(xiàn)依照預(yù)設(shè)是沒(méi)有加入任何的AdAdapter，所以必須要修改一下XAML的設(shè)定，加入 Adapter的部分（Adapter的作用是向廣告來(lái)源要求以及處理數(shù)據(jù)），修改之后的XAML會(huì)像下面這樣<my:AdDisplayStyle="StaticResource AnimationAdMobStyle"Height="70" Name="adDisplay1"RefreshSeconds="30"VerticalAlignm

19、ent="Top"><my:AdDisplay.AdAdapter><my:AdMobAdapterPublisherld="YourPublisherld"CookieString="YourCookieString"AdKeywords="Game"UseTestMode="True"/>v/my:AdDisplay.AdAdapter>v/my:AdDisplay>這個(gè)時(shí)候您會(huì)發(fā)現(xiàn)，在StaticResource AnimationAdMobSty

20、l的部分會(huì)出現(xiàn)錯(cuò)誤，這是由于我們尚未加入相關(guān)的 Style設(shè)定的關(guān) 系；您可以參考下載回來(lái)的范例程序代碼，將相關(guān)的Style設(shè)定加入到 PhoneApplicationPage.Resource區(qū)塊中（這部分由于程序代碼較多，筆者就不一一列岀，您可以參考范例程序代碼的內(nèi)容）。接下來(lái)，AdDisplayer有幾個(gè)重要的屬性需要設(shè)定 PublisherID :發(fā)布商的ID，這邊要填入我們申請(qǐng)來(lái)的發(fā)布商ID CookieString:這邊輸入的值使用來(lái)協(xié)助admob來(lái)辨別是不是重復(fù)的使用者點(diǎn)擊，以增進(jìn)分析的功能以及準(zhǔn)確性，這個(gè)設(shè)定是建議要有，以目前使用上來(lái)說(shuō)，沒(méi)有輸入也是可以的 AdKeywords

21、 :這里是輸入廣告搜尋的相關(guān)關(guān)鍵詞，您可以輸入跟您應(yīng)用程序相關(guān)的類型例如sport, money等等，各關(guān)鍵詞請(qǐng)用空白隔開(kāi) UseTestMode：是否使用測(cè)試模式，在應(yīng)用程序測(cè)試過(guò)程中，這個(gè)值會(huì)設(shè)定為T(mén)rue，當(dāng)發(fā)出要求時(shí) Admob網(wǎng)站會(huì)提供一個(gè)測(cè)試的廣告內(nèi)容；而 當(dāng)您測(cè)試完成在發(fā)布應(yīng)用程序之前，記得要將其設(shè)定為False,這樣才會(huì)取得實(shí)際的廣告內(nèi)容。接下來(lái)就可以執(zhí)行應(yīng)用程序來(lái)測(cè)試看看了，按下偵錯(cuò)按鈕后可以看到應(yīng)用程序順利的被執(zhí)行起來(lái)，沒(méi)有意外的話，您會(huì)看到跟筆者一樣的畫(huà)面*注1:請(qǐng)注意在Publishers的部分要替換成您申請(qǐng)到的ID，不然會(huì)看不到效果喔*注2：當(dāng)UseTestMode的

22、參數(shù)設(shè)定為 False時(shí)，在仿真器上是看不出結(jié)果的，要使用實(shí)機(jī)才能看到廣告顯示，這部分要特別 留意如果您需要更詳細(xì)的相關(guān)設(shè)定方式（或是您是自行開(kāi)發(fā)組件來(lái)使用），您可以到下面網(wǎng)站來(lái)取得更多的開(kāi)發(fā)相關(guān)信息另外，這邊有個(gè)部分需要再留意一下，加入AdDisplayer與相關(guān)的Style設(shè)定之后，你會(huì)發(fā)現(xiàn)不論是在Visual Studio中或是Blend中，都無(wú)法去變更背景顏色，那萬(wàn)一我的畫(huà)面不是使用黑色的，整體的樣子看起來(lái)會(huì)很怪，怎么會(huì)這樣呢？這是由于范例程序代碼中Style的設(shè)定將Background設(shè)定好了，沒(méi)有綁到相關(guān)的屬性上的緣故，例如下面這一段Style的設(shè)定（請(qǐng)留意紅字的部分）<St

23、yle x:Key="A nimatio nAdMobStyle" TargetType=''my:AdDisplay"><Setter Property="Foregrou nd" Value="White"/>一八"/><Setter Property="Fo ntSize" Value="<Setter Property="Width" Value="480"/><Setter

24、 Property="Height" Value="70"/><Setter Property="Backgrou nd" Value="#FF1F1F1F"/><Setter Property="Template"><Setter.Value><Con trolTemplate TargetType="my:AdDisplay"><Gridx:Name="PART_AdRoot"Height=&

25、quot;TemplateBinding Height"Width="TemplateBinding Width"<Grid.Background>vLinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="#FF252525" Offset="0.103"/><GradientStop Color="#F6010108" Offset

26、="0.832"/></LinearGradientBrush>v/Grid.Background>我們可以修改在 Grid.Background的XAML設(shè)定，將其設(shè)定到相關(guān)的屬性上面，例如下面的程序代碼vStyle x:Key="AnimationAdMobStyle" TargetType="my:AdDisplay">vSetter Property="Foreground" Value="White"/>vSetter Property="

27、FontSize" Value="一八"/>vSetter Property="Width" Value="480"/>vSetter Property="Height" Value="70"/>vSetter Property="Background" Value="#FF1F1F1F"/>vSetter Property="Template">vSetter.Value>vControl

28、Template TargetType="my:AdDisplay">vGridx:Name="PART_AdRoot"Height="TemplateBinding Height"Width="TemplateBinding Width"Background="TemplateBinding Background"這樣就可以利用 Visual Studio或是Blend的接口來(lái)設(shè)定背景顏色了。EULA到這邊，整個(gè)動(dòng)作大致上就完成了；但由于獲取廣告內(nèi)容時(shí)，實(shí)際上都是會(huì)透過(guò)網(wǎng)絡(luò)來(lái)進(jìn)行數(shù)據(jù)的取

29、得，依照用戶網(wǎng)絡(luò)設(shè)定的 不同可能必需要支付額外的連接費(fèi)用，因此我們也必須盡到提醒的義務(wù)；那么接下來(lái)就將原先的程序做一下調(diào)整，加入 的畫(huà)面，來(lái)尋求使用者的同意，筆者這邊做了一個(gè)簡(jiǎn)單的提示頁(yè)面，如下圖所示而XAML的部分大致如下（下面只列出ContentGrid的部分）v!-C onten tPa nel - place additi onal content here->vGrid x:Name="Co nten tGrid" Grid.Row="1">vTextBlock Height="440" HorizontalAl

30、ignment="Left"Margi n="24,46,0,0" Name="textBlock1"Text="TextBlock" VerticalAlig nmen t="Top"Width="426" TextWrapp in g="Wrap" Fo ntSize="32" />vButton Content="同意"Height="82" HorizontalAlignment=&

31、quot;Left"Margi n="0,529,0,0" Name="bt nOK"VerticalAlignment="Top" Width="199"Click="btnOK Click" />Margin="269,529,0,0" Name="btnCancel"VerticalAlignment="Top" Width="199"Click="btnCancel_Click" /></Grid>當(dāng)使用者點(diǎn)選同意之后，我們才會(huì)進(jìn)入到軟件主要的畫(huà)面，帶到下一頁(yè)面的程序代碼會(huì)像下面所示private void btnO K_Click(object sen der, RoutedEve ntArgs e)NavigationService.Navigate(new Uri("/主要頁(yè)面的名稱.xaml", UriKind.Relative);而當(dāng)使用者點(diǎn)選不同意的