教你在WP7上掛廣告:Windows Phone 7 廣告服務應用

文章目錄

• [範例檔案下載]

在我們的網站上 (或是 blog) 通常我們會加入一些由廣告服務商提供的廣告來源，進而增加一些網站的收益，那麼在 Windows Phone 7 上，我們是不是也可以用類似的方式來增加收益呢？答案是可以的，接下在本篇會介紹該如何在您的應用程式中加入這樣的功能。

在開始之前，如果您還沒有下載過 Windows Phone 7 開發工具，那麼您可以立刻前往下載，Windows Phone 7 是一個嶄新的平台，而且開發工具是完全免費的，任何人都可以開發 Windows Phone 7 的應用程式。 下載的地址在下面這邊 http://www.microsoft.com/downloads/en/details.aspx?FamilyID=04704acf-a63a-4f97-952c-8b51b34b00ce&displaylang=en

那麼應該要怎麼幫應用程式的加入這樣的功能呢？步驟大致如下

1. 申請發布商 ID (帳號)
2. 下載應用程式使用的組件 (或是自行開發)
3. 將功能加入你的應用程式中

接下來，正式開始介紹如何在您的應用程式中加入 admob 的功能。

申請發布商 ID (帳號)

首先我們必須要先申請一個發布商的帳號，先進到 admob 的網站，位置是 http://zhtw.admob.com/

在第一次使用時，必須要建立一個新的帳號，點擊立即註冊的按鈕進行註冊 (如果您看到的網站是英文介面，您可以在網站頁面的最下方找到語言調整的選項)

接下來會進到註冊頁面，如的樣子，輸入您個人的相關資料，要注意粗體字的欄位都是必填的；而由於註冊之後，系統會寄發一封驗證的 Email 給您，請務必要確認 Email 地址的正確性。

接下來，您會收到由 admob 寄發的一封通知 email，其中會有驗證的連結，如

點擊驗證的連結之後，會自動的連到 admob 網站，並且啟動您的帳號，這時候會看到如下的驗證成功畫面

在這個畫面中，請選擇 ”新增您的第一個網站” (如所示的位置)

接下來會進到選取應用程式類型的畫面；在這個畫面中是選取平台的項目，由於 Windows Phone 7 是新的平台，在這邊還看不到這個項目，不過沒關係，我們可以用 ”行動電話通訊網路” 這個項目來做，像是

*註：由於實際使用時，程式碼中是利用WebClient對服務端發出要求提取響應之後由程式碼來做相關的顯示，所以可以利用”行動電話通訊網路”的方式來做

 

點選之後，在下方會出現細節的資料要您填寫，這邊做個簡單的範例如

名稱的地方輸入您網站的名稱，而網站 URL 的地方筆者是輸入 blog 的網址來替代，類別是選擇 ”社群”；而網站說明的地方，可以填入您網站的簡介或是流量等資訊，讓要刊登廣告的客戶能比較瞭解您網站的性質以及流量，提高客戶將廣告放置在您這邊的興趣。

按下 ”繼續” 的按鈕之後，會進入到網站程式碼的畫面，

這個部分是要將廣告放置在網站上面時會使用的，這邊我們 *(注) 不會用到，直接點擊最下面的按鈕到下一個步驟。

*註：如果您想要自行開發存取 admob 的功能也可以參考這邊的程式碼

 

接下來會看到成功建立網站的訊息，由於還沒有使用 (點擊) 紀錄的關係，這邊看到的都會是 0；在這個地方，比較重要的是要先取得我們的發布商 ID，那 ID 在什麼地方呢？請依照提示的位置，點選 ”管理設定” 的按鈕

之後便會看到發布商 ID 了，這個要趕緊紀錄起來，在應用程式開發的時候，都會需要用到的。

到這邊，基本的設定已經完成，也取得發布商 ID 了，但是還有一個步驟需要做，那就是設定我們收取款項的相關資訊了；請先選擇”帳戶”菜單的 ”付款詳細資料”，如

之後會進入各項設定的畫面，請依照您申請的類型作填寫，所示是筆者的填寫範例

到這邊相關的賬戶設定就到一段落了，其他網站設定中還可以設定過濾的關鍵詞等功能，這邊筆者就不再介紹了；接下來需要下載組件來使用了

下載應用程式使用的組件 (或是自行開發)

在之前申請帳號的過程中，會看到相關的程式碼，如果您想要自行開發，可以參考範常式序代碼來實作；而網路上也有熱心的朋友已經做好相關的功能，提供給大家使用，並且提供了原始碼下載；筆者這邊介紹由 Jacob Gable 所提供的原始碼以及範例。

首先請到下面網站下載需要的組件以及範常式序代碼 http://jacob4u2.blogspot.com/2010/08/moads-custom-win-phone-7-ad-control.html

或是位於 CodePlex 的這邊 http://moads.codeplex.com/

將項目下載回來之後，解開壓縮，之後先開啟項目檔

之後在方案總管 (Solution Explorer) 的視窗中會看到三個項目，各項目的用途如下

• MoAds：控制項的原始碼
• MoAds.CustomAdServiceSite：MVC 的網站，是原作者用來提供自訂廣告訊息的訊息來源*註：若您使用的開發工具是 Express 版本，由於其中沒有支援 MVC 相關的開發，您可以將這部分的項目移除，只要留 MoAds 與 MoAds.Example 項目就可以了，只是會看不到自訂廣告的效果

   

• MoAds.Example：Windows Phone 7 的範常式序代碼

在 MoAds.Example 的項目中，點選 MainPage 就可以看到範例的程式碼；在第一次點選的時候，您可能會跟筆者一樣，出現一堆錯誤訊息

不過不要緊，這不是真的錯誤，是還沒有建置 (Build) 過的關係，首先在方案總管中，先建置組件的項目

之後建置 MVC 項目

最後建置 Example 的項目，像

接下來在設計畫面中，點選重載，就可以看到畫面能夠正常顯示了

接下來，在範常式序中，XAML 的部分，可以看到 Resource 的地方定義了兩種樣式，例如

這是原作者提供的兩種樣式，可供使用的時候根據環境自由選擇，下面是兩種 Style 的 Key 名稱

• TextOnlyAdMobStyle：純文字的顯示方式
• AnimationAdMobStyle：包含動畫的顯示方式

接下來，再往下看，會看到控制項的使用方式，例如

<moad:AdDisplay Height="70" VerticalAlignment="Top" Foreground="White" RefreshSeconds="30"> <moad:AdDisplay.AdAdapter> <moad:AdMobAdapter PublisherId="YourPublisherID" CookieString="YourCookieString" AdKeywords="Boston" UseTestMode="True"/> </moad:AdDisplay.AdAdapter> </moad:AdDisplay>

 

這是控制項在 XAML 的使用方式範例；而下面第二個使用範例可以看到原作者套用了 Style，例如下面這樣

<moad:AdDisplay Style="{StaticResource TextOnlyAdMobStyle}" VerticalAlignment="Center" Foreground="White" RefreshSeconds="30"> <moad:AdDisplay.AdAdapter> <moad:AdMobAdapter PublisherId="YourPublisherID" CookieString="YourCookieString" AdKeywords="Boston" UseTestMode="True"/> </moad:AdDisplay.AdAdapter> </moad:AdDisplay>

 

從這邊可以看出，如果沒有指定樣式 (Style) 的話，預設的行為是會使用 AnimationAdMobStyle 的樣式的。而在最下面的地方，會看到一個客制的控制項

<!-- Custom Ad Service example --> <moad:AdDisplay Style="{StaticResource AnimationAdMobStyle}" VerticalAlignment="Bottom" Foreground="White" RefreshSeconds="5"> <moad:AdDisplay.AdAdapter> <local:CustomAdAdapter PublisherId="SomePubId" ClientId="SomeClientId"/> </moad:AdDisplay.AdAdapter> </moad:AdDisplay>

 

這是原作者實作了一個 CustomAdAdapter，來對自訂的廣告資料來源 (也就是範常式序代碼中的 CustomAdServiceSite 項目) 網站提出要求，之後取得自訂的廣告訊息；在範常式序代碼中 (CustomAdAdapter\CustomAdAdapter.cs) 可以看到宣告了一個 CustomAdService，這是主要處理資料的類別，CustomAdService (CustomAdAdapter\ CustomAdService.cs) 是繼承自 BaseJsonService，從這邊可以看出傳遞的資料是 Json 的格式，如果您有類似的需求可以參考這樣的方式下去進行相關的開發，就可以利用 Moads 提供的功能來顯示自訂的廣告內容了。

這邊特別提一下，如果您要直接執行範常式序來看看效果的話，由於 CustomAdAdapter 會向 MVC 網站提出要求，所以執行時必須要讓兩個項目同時執行起來，這可以在項目屬性中設定

好，瞭解了相關的使用方式之後，可以開始將相關的功能加到我們的應用程式中了。

將功能加入你的應用程式中

首先，由於我們需要用到 Moads (先前下載的範常式序) 所提供的相關組件，因此我們必須先將組件加入工具箱中，以方便使用；還記得先前我們有建置過組件的項目嗎？建置完成後，在檔案夾中會有組件檔案產生，位置會在 bin 檔案夾下，或是您可以直接加入下載回來已經建置好的組件檔案，位置大致上像下面這樣

你的範常式序位置\MoAds-Binaries_Source-v1.0\Binaries

接下來在工具箱空白的地方點選滑鼠右鍵，之後選擇新增項目

之後會出現選擇項目的對話方塊，這個時候請切換到先前下載的範常式序程式碼群組件位置，並找到 Moads.dll 的檔案，如

之後選擇開啟，就會在工具箱中看到 AdDisplay 的新項目了；接下來可以拖拉一個 AdDisplay 項目到設計畫面上，並調整到適當的大小

接下來，我們觀察一下 XAML 的變化，首先是在 PhoneApplicationPage 的部分會多了一個 xmlns，

xmlns:my="clr-namespace:MoAds;assembly=MoAds"

 

這是在拖拉組件時，Visual Studio 自動幫我們加入的相關組件的參考，在下面的 ContentGrid 也會多出相關的 XAML Code

<my:AdDisplay Height="70" HorizontalAlignment="Left" Margin="0,222,0,0" Name="adDisplay1" VerticalAlignment="Top" Width="456" />

 

在這裡可以發現依照預設是沒有加入任何的 AdAdapter，所以必須要修改一下 XAML 的設定，加入 Adapter 的部分 (Adapter 的作用是向廣告來源要求以及處理資料)，修改之後的 XAML 會像下面這樣

<my:AdDisplay Style="{StaticResource AnimationAdMobStyle}" Height="70" Name="adDisplay1" RefreshSeconds="30" VerticalAlignment="Top"> <my:AdDisplay.AdAdapter> <my:AdMobAdapter PublisherId="YourPublisherId" CookieString="YourCookieString" AdKeywords="Game" UseTestMode="True"/> </my:AdDisplay.AdAdapter> </my:AdDisplay>

 

這個時候您會發現，在 StaticResource AnimationAdMobStyle 的部分會出現錯誤，這是由於我們尚未加入相關的 Style 設定的關係；您可以參考下載回來的範常式序代碼，將相關的 Style 設定加入到 PhoneApplicationPage.Resource 區塊中 (這部分由於程式碼較多，筆者就不一一列出，您可以參考範常式序代碼的內容)。

接下來，AdDisplayer 有幾個重要的屬性需要設定

• PublisherID：發布商的 ID，這邊要填入我們申請來的發布商 ID
• CookieString：這邊輸入的值使用來協助 admob 來辨別是不是重複的使用者點擊，以增進分析的功能以及準確性，這個設定是建議要有，以目前使用上來說，沒有輸入也是可以的
• AdKeywords：這裡是輸入廣告搜尋的相關關鍵詞，您可以輸入跟您應用程式相關的類型例如 sport，money 等等，各關鍵詞請用空白隔開
• UseTestMode：是否使用測試模式，在應用程式測試過程中，這個值會設定為 True，當發出要求時 Admob 網站會提供一個測試的廣告內容；而當您測試完成在發布應用程式之前，記得要將其設定為 False，這樣才會取得實際的廣告內容。

接下來就可以執行應用程式來測試看看了，按下偵錯按鈕後可以看到應用程式順利的被執行起來，沒有意外的話，您會看到跟筆者一樣的畫面

*注1：請注意在 PublisherID 的部分要替換成您申請到的 ID，不然會看不到效果喔 *注2：當 UseTestMode 的參數設定為 False 時，在模擬器上是看不出結果的，要使用實機才能看到廣告顯示，這部分要特別留意

 

如果您需要更詳細的相關設定方式 (或是您是自行開發組件來使用)，您可以到下面網站來取得更多的開發相關資訊 http://developer.admob.com/wiki/Requests

另外，這邊有個部分需要再留意一下，加入 AdDisplayer 與相關的 Style 設定之後，你會發現不論是在 Visual Studio 中或是 Blend 中，都無法去變更背景顏色，那萬一我的畫面不是使用黑色的，整體的樣子看起來會很怪，怎麼會這樣呢？

這是由於範常式序代碼中 Style 的設定將 Background 設定好了，沒有綁到相關的屬性上的緣故，例如下面這一段 Style 的設定 (請留意紅字的部分)

<Style x:Key="AnimationAdMobStyle" TargetType="my:AdDisplay"> <Setter Property="Foreground" Value="White"/> <Setter Property="FontSize" Value="18" /> <Setter Property="Width" Value="480"/> <Setter Property="Height" Value="70"/> <Setter Property="Background" Value="#FF1F1F1F"/> <Setter Property="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" StartPoint="0.5,0"> <GradientStop Color="#FF252525" Offset="0.103"/> <GradientStop Color="#F6010108" Offset="0.832"/> </LinearGradientBrush> </Grid.Background>

 

我們可以修改在 Grid.Background 的 XAML 設定，將其設定到相關的屬性上面，例如下面的程式碼

<Style x:Key="AnimationAdMobStyle" TargetType="my:AdDisplay"> <Setter Property="Foreground" Value="White"/> <Setter Property="FontSize" Value="18" /> <Setter Property="Width" Value="480"/> <Setter Property="Height" Value="70"/> <Setter Property="Background" Value="#FF1F1F1F"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="my:AdDisplay"> <Grid x:Name="PART_AdRoot" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Background="{TemplateBinding Background}">

 

這樣就可以利用 Visual Studio 或是 Blend 的介面來設定背景顏色了。

到這邊，整個動作大致上就完成了；但由於擷取廣告內容時，實際上都是會透過網路來進行資料的取得，依照使用者網路設定的不同可能必需要支付額外的串連費用，因此我們也必須盡到提醒的義務；那麼接下來就將原先的程式做一下調整，加入EULA的畫面，來尋求使用者的同意，筆者這邊做了一個簡單的提示頁面，如所示

而 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="textBlock1" Text="TextBlock" VerticalAlignment="Top" Width="426" TextWrapping="Wrap" FontSize="32" /> <Button Content="同意" Height="82" HorizontalAlignment="Left" Margin="0,529,0,0" Name="btnOK" 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)); }

 

而當使用者點選不同意的時候，我們就關閉應用程式，不再繼續往下執行；而這個時候發生了一個有趣的問題，當使用者按下”返回鍵”會自動的關閉應用程式，而我們該怎麼由程式碼去關閉應用程式呢？我們只好繞路一下；在 Silverlight 的應用程式中，如果發生了 ”未處理的例外狀況”，這個時候應用程式就會 (您也可以自訂相關的例外類別來達到這樣的功能) private void btnCancel_Click(object sender, RoutedEventArgs e) {     NavigationService.Navigate(new Uri("/NotExistPage", UriKind.Relative)); }

借用這樣的方式來離開應用程式，這樣就可以做出我們想要的效果了。

*註：有關 Exit 的問題您可以參考 Exiting a Windows Phone Application 的說明

 

而接下來會遭遇第二個問題，當使用者點選 ”同意” 之後，應用程式會導向第二個頁面，這沒有問題，但是在第二個頁面中，如果使用者點選了 ”返回鍵”，這個時候 Windows Phone 7 預設的行為會轉回前一個頁面，也就是 EULA 的頁面，這不是我們想要的，要處理這個問題，我們可以用類似的方式，我們在主要頁面中，處理當使用者按下了 ”返回鍵” 的事件，發生時就直接將應用程式關閉，於是程式碼大致會像下面所示 public partial class MainPage : PhoneApplicationPage { // Constructor public MainPage() { InitializeComponent(); this.BackKeyPress += new EventHandler(MainPage_BackKeyPress); }

void MainPage_BackKeyPress(object sender, System.ComponentModel.CancelEventArgs e) { NavigationService.Navigate(new Uri(“/NotExistPage”, UriKind.Relative)); e.Cancel = true; } }

 

這樣，相當簡單的，我們就可以將廣告的功能加到我們的應用程式中了，是不是很有趣呢？馬上動手來試試看吧！

[範例檔案下載]

• Admob_sample.zip