前言
在我們的網站上 (或是 blog) 通常我們會加入一些由廣告服務商提供的廣告來源,進而增加一些網站的收益,那麼在 Windows Phone 7 上,我們是不是也可以用類似的方式來增加收益呢?答案是可以的,接下在本篇會介紹該如何在您的應用程序中加入這樣的功能。
在開始之前,如果您還沒有下載過 Windows Phone 7 開發工具,那麼您可以立刻前往下載,Windows Phone 7 是一個嶄新的平臺,而且開發工具是完全免費的,任何人都可以開發 Windows Phone 7 的應用程序。
那麼應該要怎麼幫應用程序的加入這樣的功能呢?步驟大致如下
- 申請發佈商 ID (賬號)
- 下載應用程序使用的組件 (或是自行開發)
- 將功能加入你的應用程序中
接下來,正式開始介紹如何在您的應用程序中加入 admob 的功能。
申請發佈商 ID (賬號)
首先我們必須要先申請一個發佈商的賬號,先進到 admob 的網站,位置是
http://zhtw.admob.com/
在第一次使用時,必須要建立一個新的賬號,點擊立即註冊的按鈕進行註冊 (如果您看到的網站是英文接口,您可以在網站頁面的最下方找到語言調整的選項)
接下來會進到註冊頁面,如下圖的樣子,輸入您個人的相關數據,要注意粗體字的字段都是必填的;而由於註冊之後,系統會寄發一封驗證的 Email 給您,請務必要確認 Email 地址的正確性。
接下來,您會收到由 admob 寄發的一封通知 email,其中會有驗證的連結,如下圖
點擊驗證的連結之後,會自動的連到 admob 網站,並且啓動您的賬號,這時候會看到如下的驗證成功畫面
在這個畫面中,請選擇 ”新增您的第一個網站” (如下圖所示的位置)
接下來會進到選取應用程序類型的畫面;在這個畫面中是選取平臺的項目,由於 Windows Phone 7 是新的平臺,在這邊還看不到這個項目,不過沒關係,我們可以用 ”移動電話網絡” 這個項目來做,像是下圖
點選之後,在下方會出現細節的數據要您填寫,這邊做個簡單的範例如下圖
名稱的地方輸入您網站的名稱,而網站 URL 的地方筆者是輸入 blog 的網址來替代,類別是選擇 ”社羣”;而網站說明的地方,可以填入您網站的簡介或是流量等信息,讓要刊登廣告的客戶能比較瞭解您網站的性質以及流量,提高客戶將廣告放置在您這邊的興趣。
按下 ”繼續” 的按鈕之後,會進入到網站程序代碼的畫面,
這個部分是要將廣告放置在網站上面時會使用的,這邊我們 *(注) 不會用到,直接點擊最下面的按鈕到下一個步驟。
接下來會看到成功建立網站的訊息,由於還沒有使用 (點擊) 紀錄的關係,這邊看到的都會是 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,這樣纔會取得實際的廣告內容。
接下來就可以執行應用程序來測試看看了,按下偵錯按鈕後可以看到應用程序順利的被執行起來,沒有意外的話,您會看到跟筆者一樣的畫面
*注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));
}
借用這樣的方式來離開應用程序,這樣就可以做出我們想要的效果了。
而接下來會遭遇第二個問題,當使用者點選 ”同意” 之後,應用程序會導向第二個頁面,這沒有問題,但是在第二個頁面中,如果使用者點選了 ”返回鍵”,這個時候 Windows Phone 7 預設的行爲會轉回前一個頁面,也就是 EULA 的頁面,這不是我們想要的,要處理這個問題,我們可以用類似的方式,我們在主要頁面中,處理當使用者按下了 ”返回鍵” 的事件,發生時就直接將應用程序關閉,於是程序代碼大致會像下面所示
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
this.BackKeyPress += new EventHandler<System.ComponentModel.CancelEventArgs>(MainPage_BackKeyPress);
}
void MainPage_BackKeyPress(object sender, System.ComponentModel.CancelEventArgs e)
{
NavigationService.Navigate(new Uri("/NotExistPage", UriKind.Relative));
e.Cancel = true;
}
}
這樣,相當簡單的,我們就可以將廣告的功能加到我們的應用程序中了,是不是很有趣呢?馬上動手來試試看吧!