Windows Phone 7 廣告服務應用 - AdMob 篇

前言

在我們的網站上 (或是 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<System.ComponentModel.CancelEventArgs>(MainPage_BackKeyPress);
   }

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

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

[範例檔案下載]

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章