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

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

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

3、 寄發(fā)的一封通知 email，其中會有驗證的連結(jié)，如下圖點擊驗證的連結(jié)之后，會自動的連到 admob 網(wǎng)站，并且啟動您的賬號，這時候會看到如下的驗證成功畫面在這個畫面中，請選擇 ”新增您的第一個網(wǎng)站” (如下圖所示的位置)接下來會進到選取應(yīng)用程序類型的畫面；在這個畫面中是選取平臺的項目，由于 Windows Phone 7 是新的平臺，在這邊還看不到這個項目，不過沒關(guān)系，我們可以用 ”移動電話網(wǎng)絡(luò)” 這個項目來做，像是下圖*注：由于實際使用時，程序代碼中是利用WebClient對服務(wù)端發(fā)出要求提取響應(yīng)之后由程序代碼來做相關(guān)的顯示，所以可以利用”移動電話網(wǎng)絡(luò)”的方式來做 點選之后，在下方會出現(xiàn)細

4、節(jié)的數(shù)據(jù)要您填寫，這邊做個簡單的范例如下圖名稱的地方輸入您網(wǎng)站的名稱，而網(wǎng)站 URL 的地方筆者是輸入 blog 的網(wǎng)址來替代，類別是選擇 ”社群”；而網(wǎng)站說明的地方，可以填入您網(wǎng)站的簡介或是流量等信息，讓要刊登廣告的客戶能比較了解您網(wǎng)站的性質(zhì)以及流量，提高客戶將廣告放置在您這邊的興趣。按下 ”繼續(xù)” 的按鈕之后，會進入到網(wǎng)站程序代碼的畫面，這個部分是要將廣告放置在網(wǎng)站上面時會使用的，這邊我們 *(注) 不會用到，直接點擊最下面的按鈕到下一個步驟。*注：如果您想要自行開發(fā)存取 admob 的功能也可以參考這邊的程序代碼 接下來會看到成功建立網(wǎng)站的訊息，由于還沒有使用 (點擊) 紀錄的關(guān)系，這邊

5、看到的都會是 0；在這個地方，比較重要的是要先取得我們的發(fā)布商 ID，那 ID 在什么地方呢？請依照下圖提示的位置，點選 ”管理設(shè)定” 的按鈕之后便會看到發(fā)布商 ID 了，這個要趕緊紀錄起來，在應(yīng)用程序開發(fā)的時候，都會需要用到的。到這邊，基本的設(shè)定已經(jīng)完成，也取得發(fā)布商 ID 了，但是還有一個步驟需要做，那就是設(shè)定我們收取款項的相關(guān)信息了；請先選擇”帳戶”菜單的 ”付款詳細數(shù)據(jù)”，如下圖之后會進入各項設(shè)定的畫面，請依照您申請的類型作填寫，下圖所示是筆者的填寫范例到這邊相關(guān)的賬戶設(shè)定就到一段落了，其他網(wǎng)站設(shè)定中還可以設(shè)定過濾的關(guān)鍵詞等功能，這邊筆者就不再介紹了；接下來需要下載組件來使用了 下載應(yīng)

6、用程序使用的組件 (或是自行開發(fā))在之前申請賬號的過程中，會看到相關(guān)的程序代碼，如果您想要自行開發(fā)，可以參考范例程序代碼來實作；而網(wǎng)絡(luò)上也有熱心的朋友已經(jīng)做好相關(guān)的功能，提供給大家使用，并且提供了原始碼下載；筆者這邊介紹由 Jacob Gable 所提供的原始碼以及范例。首先請到下面網(wǎng)站下載需要的組件以及范例程序代碼或是位于 CodePlex 的這邊將項目下載回來之后，解開壓縮，之后先開啟項目檔之后在方案總管 (Solution Explorer) 的窗口中會看到三個項目，各項目的用途如下· MoAds：控件的源代碼MoAds.CustomAdServiceSite：MVC 的網(wǎng)站，

7、是原作者用來提供自定義廣告訊息的訊息來源*注：若您使用的開發(fā)工具是 Express 版本，由于其中沒有支持 MVC 相關(guān)的開發(fā)，您可以將這部分的項目移除，只要留 MoAds 與 MoAds.Example 項目就可以了，只是會看不到自定義廣告的效果 · MoAds.Example：Windows Phone 7 的范例程序代碼在 MoAds.Example 的項目中，點選 MainPage 就可以看到范例的程序代碼；在第一次點選的時候，您可能會跟筆者一樣，出現(xiàn)一堆錯誤訊息不過不要緊，這不是真的錯誤，是還沒有建置 (Build) 過的關(guān)系，首先在方案總管中，先建置組件的項目之后建置 M

8、VC 項目最后建置 Example 的項目，像下圖接下來在設(shè)計畫面中，點選重載，就可以看到畫面能夠正常顯示了接下來，在范例程序中，XAML 的部分，可以看到 Resource 的地方定義了兩種樣式，例如下圖這是原作者提供的兩種樣式，可供使用的時候根據(jù)環(huán)境自由選擇，下面是兩種 Style 的 Key 名稱· TextOnlyAdMobStyle：純文本的顯示方式· AnimationAdMobStyle：包含動畫的顯示方式接下來，再往下看，會看到控件的使用方式，例如<moad:AdDisplay Height="70" VerticalAlignme

9、nt="Top" Foreground="White" RefreshSeconds="30"> <moad:AdDisplay.AdAdapter> <moad:AdMobAdapter PublisherId="YourPublisherID" CookieString="YourCookieString" AdKeywords="Boston" UseTestMode="True"/> </moad:AdDispl

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

11、oad:AdMobAdapter PublisherId="YourPublisherID" CookieString="YourCookieString" AdKeywords="Boston" UseTestMode="True"/> </moad:AdDisplay.AdAdapter></moad:AdDisplay>從這邊可以看出，如果沒有指定樣式 (Style) 的話，預(yù)設(shè)的行為是會使用 AnimationAdMobStyle 的樣式的。而在最下面的地方，會看到一個客制的控

12、件<!- Custom Ad Service example -><moad:AdDisplay Style="StaticResource AnimationAdMobStyle" VerticalAlignment="Bottom" Foreground="White" RefreshSeconds="5"> <moad:AdDisplay.AdAdapter> <local:CustomAdAdapter PublisherId="SomePubId&quo

13、t; ClientId="SomeClientId"/> </moad:AdDisplay.AdAdapter></moad:AdDisplay>這是原作者實作了一個 CustomAdAdapter，來對自定義的廣告數(shù)據(jù)源 (也就是范例程序代碼中的 CustomAdServiceSite 項目) 網(wǎng)站提出要求，之后取得自定義的廣告訊息；在范例程序代碼中 (CustomAdAdapterCustomAdAdapter.cs) 可以看到宣告了一個 CustomAdService，這是主要處理數(shù)據(jù)的類別，CustomAdService (Custom

14、AdAdapter CustomAdService.cs) 是繼承自 BaseJsonService，從這邊可以看出傳遞的資料是 Json 的格式，如果您有類似的需求可以參考這樣的方式下去進行相關(guān)的開發(fā)，就可以利用 Moads 提供的功能來顯示自定義的廣告內(nèi)容了。這邊特別提一下，如果您要直接執(zhí)行范例程序來看看效果的話，由于 CustomAdAdapter 會向 MVC 網(wǎng)站提出要求，所以執(zhí)行時必須要讓兩個項目同時執(zhí)行起來，這可以在項目屬性中設(shè)定好，了解了相關(guān)的使用方式之后，可以開始將相關(guān)的功能加到我們的應(yīng)用程序中了。 將功能加入你的應(yīng)用程序中首先，由于我們需要用到 Moads (先前下載的范例

15、程序) 所提供的相關(guān)組件，因此我們必須先將組件加入工具箱中，以方便使用；還記得先前我們有建置過組件的項目嗎？建置完成后，在文件夾中會有組件檔案產(chǎn)生，位置會在 bin 文件夾下，或是您可以直接加入下載回來已經(jīng)建置好的組件檔案，位置大致上像下面這樣你的范例程序位置MoAds-Binaries_Source-v1.0Binaries接下來在工具箱空白的地方點選鼠標右鍵，之后選擇新增項目之后會出現(xiàn)選擇項目的對話框，這個時候請切換到先前下載的范例程序代碼組件位置，并找到 Moads.dll 的檔案，如下圖之后選擇開啟，就會在工具箱中看到 AdDisplay 的新項目了；接下來可以拖拉一個 AdDispl

16、ay 項目到設(shè)計畫面上，并調(diào)整到適當?shù)拇笮?接下來，我們觀察一下 XAML 的變化，首先是在 PhoneApplicationPage 的部分會多了一個 xmlns，xmlns:my="clr-namespace:MoAds;assembly=MoAds"這是在拖拉組件時，Visual Studio 自動幫我們加入的相關(guān)組件的參考，在下面的 ContentGrid 也會多出相關(guān)的 XAML Code<my:AdDisplay Height="70" HorizontalAlignment="Left" Margin="

17、0,222,0,0" Name="adDisplay1" VerticalAlignment="Top" Width="456" />在這里可以發(fā)現(xiàn)依照預(yù)設(shè)是沒有加入任何的 AdAdapter，所以必須要修改一下 XAML 的設(shè)定，加入 Adapter 的部分 (Adapter 的作用是向廣告來源要求以及處理數(shù)據(jù))，修改之后的 XAML 會像下面這樣<my:AdDisplay Style="StaticResource AnimationAdMobStyle" Height="70&

18、quot; Name="adDisplay1" RefreshSeconds="30" VerticalAlignment="Top"> <my:AdDisplay.AdAdapter> <my:AdMobAdapter PublisherId="YourPublisherId" CookieString="YourCookieString" AdKeywords="Game" UseTestMode="True"/> <

19、;/my:AdDisplay.AdAdapter></my:AdDisplay>這個時候您會發(fā)現(xiàn)，在 StaticResource AnimationAdMobStyle 的部分會出現(xiàn)錯誤，這是由于我們尚未加入相關(guān)的 Style 設(shè)定的關(guān)系；您可以參考下載回來的范例程序代碼，將相關(guān)的 Style 設(shè)定加入到 PhoneApplicationPage.Resource 區(qū)塊中 (這部分由于程序代碼較多，筆者就不一一列出，您可以參考范例程序代碼的內(nèi)容)。接下來，AdDisplayer 有幾個重要的屬性需要設(shè)定· PublisherID：發(fā)布商的 ID，這邊要填入我們申請

20、來的發(fā)布商 ID· CookieString：這邊輸入的值使用來協(xié)助 admob 來辨別是不是重復(fù)的使用者點擊，以增進分析的功能以及準確性，這個設(shè)定是建議要有，以目前使用上來說，沒有輸入也是可以的· AdKeywords：這里是輸入廣告搜尋的相關(guān)關(guān)鍵詞，您可以輸入跟您應(yīng)用程序相關(guān)的類型例如 sport，money 等等，各關(guān)鍵詞請用空白隔開· UseTestMode：是否使用測試模式，在應(yīng)用程序測試過程中，這個值會設(shè)定為 True，當發(fā)出要求時 Admob 網(wǎng)站會提供一個測試的廣告內(nèi)容；而當您測試完成在發(fā)布應(yīng)用程序之前，記得要將其設(shè)定為 False，這樣才會取得實

21、際的廣告內(nèi)容。接下來就可以執(zhí)行應(yīng)用程序來測試看看了，按下偵錯按鈕后可以看到應(yīng)用程序順利的被執(zhí)行起來，沒有意外的話，您會看到跟筆者一樣的畫面*注1：請注意在 PublisherID 的部分要替換成您申請到的 ID，不然會看不到效果喔*注2：當 UseTestMode 的參數(shù)設(shè)定為 False 時，在仿真器上是看不出結(jié)果的，要使用實機才能看到廣告顯示，這部分要特別留意 如果您需要更詳細的相關(guān)設(shè)定方式 (或是您是自行開發(fā)組件來使用)，您可以到下面網(wǎng)站來取得更多的開發(fā)相關(guān)信息另外，這邊有個部分需要再留意一下，加入 AdDisplayer 與相關(guān)的 Style 設(shè)定之后，你會發(fā)現(xiàn)不論是在 Visual

22、Studio 中或是 Blend 中，都無法去變更背景顏色，那萬一我的畫面不是使用黑色的，整體的樣子看起來會很怪，怎么會這樣呢？這是由于范例程序代碼中 Style 的設(shè)定將 Background 設(shè)定好了，沒有綁到相關(guān)的屬性上的緣故，例如下面這一段 Style 的設(shè)定 (請留意紅字的部分)<Style x:Key="AnimationAdMobStyle" TargetType="my:AdDisplay"> <Setter Property="Foreground" Value="White"/

23、> <Setter Property="FontSize" Value="一八" /> <Setter Property="Width" Value="480"/> <Setter Property="Height" Value="70"/> <Setter Property="Background" Value="#FF1F1F1F"/> <Setter Property=&

24、quot;Template"> <Setter.Value> <ControlTemplate TargetType="my:AdDisplay"> <Grid x:Name="PART_AdRoot" Height="TemplateBinding Height" Width="TemplateBinding Width"> <Grid.Background> <LinearGradientBrush EndPoint="0.5,1&

25、quot; StartPoint="0.5,0"> <GradientStop Color="#FF252525" Offset="0.103"/> <GradientStop Color="#F6010108" Offset="0.832"/> </LinearGradientBrush> </Grid.Background>我們可以修改在 Grid.Background 的 XAML 設(shè)定，將其設(shè)定到相關(guān)的屬性上面，例如下面的程序代碼&l

26、t;Style x:Key="AnimationAdMobStyle" TargetType="my:AdDisplay"> <Setter Property="Foreground" Value="White"/> <Setter Property="FontSize" Value="一八" /> <Setter Property="Width" Value="480"/> <Sette

27、r Property="Height" Value="70"/> <Setter Property="Background" Value="#FF1F1F1F"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="my:AdDisplay"> <Grid x:Name="PART_AdRoot" He

28、ight="TemplateBinding Height" Width="TemplateBinding Width" Background="TemplateBinding Background">這樣就可以利用 Visual Studio 或是 Blend 的接口來設(shè)定背景顏色了。到這邊，整個動作大致上就完成了；但由于獲取廣告內(nèi)容時，實際上都是會透過網(wǎng)絡(luò)來進行數(shù)據(jù)的取得，依照用戶網(wǎng)絡(luò)設(shè)定的不同可能必需要支付額外的連接費用，因此我們也必須盡到提醒的義務(wù)；那么接下來就將原先的程序做一下調(diào)整，加入EULA的畫面，來尋求使用者的同意

29、，筆者這邊做了一個簡單的提示頁面，如下圖所示而 XAML 的部分大致如下 (下面只列出 ContentGrid 的部分)<!-ContentPanel - place additional content here-><Grid x:Name="ContentGrid" Grid.Row="1"> <TextBlock Height="440" HorizontalAlignment="Left" Margin="24,46,0,0" Name="text

30、Block1" Text="TextBlock" VerticalAlignment="Top" Width="426" TextWrapping="Wrap" FontSize="32" /> <Button Content="同意" Height="82" HorizontalAlignment="Left" Margin="0,529,0,0" Name="btnOK"

31、 VerticalAlignment="Top" Width="199" Click="btnOK_Click" /> <Button Content="不同意" Height="82" HorizontalAlignment="Left" Margin="269,529,0,0" Name="btnCancel" VerticalAlignment="Top" Width="199" Click="btnCancel_Click" /></Grid>當使用者點選同意之后，我們才會進入到軟件主要的畫面，帶到下一頁面的程序代碼會像下面所示private void btnOK_Click(object sender, RoutedEventArgs e) NavigationService.Navigate(new Uri("/主要頁面的名稱.xaml", UriKind.Relative);而當使用者點選不同意的時候，我們就關(guān)閉應(yīng)用程序，不再繼續(xù)往下執(zhí)行；而這個時候發(fā)生了一個有趣的問題，當使用者按下”