1、前言 在我们的网站上 (或是 blog) 通常我们会加入一些由广告服务商提供的广告来源,进而增加一些网站的收益,那么在 Windows Phone 7 上,我们是不是也可以用类似的方式来增加收益呢?答案是可以的,接下在本篇会介绍该如何在您的应用程序中加入这样的功能。 在开始之前,如果您还没有下载过 Windows Phone 7 开发工具,那么您可以立刻前往下载,Windows Phone 7 是一个崭新的平台,而且开发工具是完全免费的,任何人都可以开发 Windows Phone 7 的应用程序。 下载的地址在下面这边 那么应该要怎么帮应用程序的加入这样的功能呢?步骤大致如下
2、 1 申请发布商 ID (账号) 2 下载应用程序使用的组件 (或是自行开发) 3 将功能加入你的应用程序中 接下来,正式开始介绍如何在您的应用程序中加入 admob 的功能。 申请发布商 ID (账号) 首先我们必须要先申请一个发布商的账号,先进到 admob 的网站,位置是 在第一次使用时,必须要建立一个新的账号,点击立即注册的按钮进行注册 (如果您看到的网站是英文接口,您可以在网站页面的最下方找到语言调整的选项) 接下来会进到注册页面,如下图的样子,输入您个人的相关数据,要注意粗体字的字段都是必填的;而由于注册之后,系统会寄发一封验证的 Email 给您,请
3、务必要确认 Email 地址的正确性。 接下来,您会收到由 admob 寄发的一封通知 email,其中会有验证的连结,如下图 点击验证的连结之后,会自动的连到 admob 网站,并且启动您的账号,这时候会看到如下的验证成功画面 在这个画面中,请选择 ”新增您的第一个网站” (如下图所示的位置) 接下来会进到选取应用程序类型的画面;在这个画面中是选取平台的项目,由于 Windows Phone 7 是新的平台,在这边还看不到这个项目,不过没关系,我们可以用 ”移动电话网络” 这个项目来做,像是下图 *注:由于实际使用时,程序代码中是利用WebClient对服务端发出要
4、求提取响应之后由程序代码来做相关的显示,所以可以利用”移动电话网络”的方式来做 点选之后,在下方会出现细节的数据要您填写,这边做个简单的范例如下图 名称的地方输入您网站的名称,而网站 URL 的地方笔者是输入 blog 的网址来替代,类别是选择 ”社群”;而网站说明的地方,可以填入您网站的简介或是流量等信息,让要刊登广告的客户能比较了解您网站的性质以及流量,提高客户将广告放置在您这边的兴趣。 按下 ”继续” 的按钮之后,会进入到网站程序代码的画面, 这个部分是要将广告放置在网站上面时会使用的,这边我们 *(注) 不会用到,直接点击最下面的按钮到下一个步骤。 *注:如
5、果您想要自行开发存取 admob 的功能也可以参考这边的程序代码 接下来会看到成功建立网站的讯息,由于还没有使用 (点击) 纪录的关系,这边看到的都会是 0;在这个地方,比较重要的是要先取得我们的发布商 ID,那 ID 在什么地方呢?请依照下图提示的位置,点选 ”管理设定” 的按钮 之后便会看到发布商 ID 了,这个要赶紧纪录起来,在应用程序开发的时候,都会需要用到的。 到这边,基本的设定已经完成,也取得发布商 ID 了,但是还有一个步骤需要做,那就是设定我们收取款项的相关信息了;请先选择”帐户”菜单的 ”付款详细数据”,如下图 之后会进入各项设定的画面,请依照您申请
6、的类型作填写,下图所示是笔者的填写范例 到这边相关的账户设定就到一段落了,其他网站设定中还可以设定过滤的关键词等功能,这边笔者就不再介绍了;接下来需要下载组件来使用了 下载应用程序使用的组件 (或是自行开发) 在之前申请账号的过程中,会看到相关的程序代码,如果您想要自行开发,可以参考范例程序代码来实作;而网络上也有热心的朋友已经做好相关的功能,提供给大家使用,并且提供了原始码下载;笔者这边介绍由 Jacob Gable 所提供的原始码以及范例。 首先请到下面网站下载需要的组件以及范例程序代码 或是位于 CodePlex 的这边 将项目下载回来之后,解开压缩,之后先
7、开启项目档 之后在方案总管 (Solution Explorer) 的窗口中会看到三个项目,各项目的用途如下 · MoAds:控件的源代码 MoAds.CustomAdServiceSite:MVC 的网站,是原作者用来提供自定义广告讯息的讯息来源 *注:若您使用的开发工具是 Express 版本,由于其中没有支持 MVC 相关的开发,您可以将这部分的项目移除,只要留 MoAds 与 MoAds.Example 项目就可以了,只是会看不到自定义广告的效果 · MoAds.Example:Windows Phone 7 的范例程序代码 在 MoAds.Example 的项目
8、中,点选 MainPage 就可以看到范例的程序代码;在第一次点选的时候,您可能会跟笔者一样,出现一堆错误讯息 不过不要紧,这不是真的错误,是还没有建置 (Build) 过的关系,首先在方案总管中,先建置组件的项目 之后建置 MVC 项目 最后建置 Example 的项目,像下图 接下来在设计画面中,点选重载,就可以看到画面能够正常显示了 接下来,在范例程序中,XAML 的部分,可以看到 Resource 的地方定义了两种样式,例如下图 这是原作者提供的两种样式,可供使用的时候根据环境自由选择,下面是两种 Style 的 Key 名称 · TextOnly
9、AdMobStyle:纯文本的显示方式
· AnimationAdMobStyle:包含动画的显示方式
接下来,再往下看,会看到控件的使用方式,例如
10、ookieString="YourCookieString"
AdKeywords="Boston"
UseTestMode="True"/>
11、icalAlignment="Center"
Foreground="White"
RefreshSeconds="30">
12、 AdKeywords="Boston"
UseTestMode="True"/>
14、lay.AdAdapter>
15、资料是 Json 的格式,如果您有类似的需求可以参考这样的方式下去进行相关的开发,就可以利用 Moads 提供的功能来显示自定义的广告内容了。 这边特别提一下,如果您要直接执行范例程序来看看效果的话,由于 CustomAdAdapter 会向 MVC 网站提出要求,所以执行时必须要让两个项目同时执行起来,这可以在项目属性中设定 好,了解了相关的使用方式之后,可以开始将相关的功能加到我们的应用程序中了。 将功能加入你的应用程序中 首先,由于我们需要用到 Moads (先前下载的范例程序) 所提供的相关组件,因此我们必须先将组件加入工具箱中,以方便使用;还记得先前我们有建置过组件的项
16、目吗?建置完成后,在文件夹中会有组件档案产生,位置会在 bin 文件夹下,或是您可以直接加入下载回来已经建置好的组件档案,位置大致上像下面这样 你的范例程序位置\MoAds-Binaries_Source-v1.0\Binaries 接下来在工具箱空白的地方点选鼠标右键,之后选择新增项目 之后会出现选择项目的对话框,这个时候请切换到先前下载的范例程序代码组件位置,并找到 Moads.dll 的档案,如下图 之后选择开启,就会在工具箱中看到 AdDisplay 的新项目了;接下来可以拖拉一个 AdDisplay 项目到设计画面上,并调整到适当的大小 接下来,我们观察一下
17、XAML 的变化,首先是在 PhoneApplicationPage 的部分会多了一个 xmlns,
xmlns:my="clr-namespace:MoAds;assembly=MoAds"
这是在拖拉组件时,Visual Studio 自动帮我们加入的相关组件的参考,在下面的 ContentGrid 也会多出相关的 XAML Code
18、icalAlignment="Top" Width="456" />
在这里可以发现依照预设是没有加入任何的 AdAdapter,所以必须要修改一下 XAML 的设定,加入 Adapter 的部分 (Adapter 的作用是向广告来源要求以及处理数据),修改之后的 XAML 会像下面这样
19、>
20、Style 的部分会出现错误,这是由于我们尚未加入相关的 Style 设定的关系;您可以参考下载回来的范例程序代码,将相关的 Style 设定加入到 PhoneApplicationPage.Resource 区块中 (这部分由于程序代码较多,笔者就不一一列出,您可以参考范例程序代码的内容)。
接下来,AdDisplayer 有几个重要的属性需要设定
· PublisherID:发布商的 ID,这边要填入我们申请来的发布商 ID
· CookieString:这边输入的值使用来协助 admob 来辨别是不是重复的使用者点击,以增进分析的功能以及准确性,这个设定是建议要有,以目前使用上来说 21、没有输入也是可以的
· AdKeywords:这里是输入广告搜寻的相关关键词,您可以输入跟您应用程序相关的类型例如 sport,money 等等,各关键词请用空白隔开
· UseTestMode:是否使用测试模式,在应用程序测试过程中,这个值会设定为 True,当发出要求时 Admob 网站会提供一个测试的广告内容;而当您测试完成在发布应用程序之前,记得要将其设定为 False,这样才会取得实际的广告内容。
接下来就可以执行应用程序来测试看看了,按下侦错按钮后可以看到应用程序顺利的被执行起来,没有意外的话,您会看到跟笔者一样的画面
*注1:请注意在 PublisherID 的部分要替 22、换成您申请到的 ID,不然会看不到效果喔
*注2:当 UseTestMode 的参数设定为 False 时,在仿真器上是看不出结果的,要使用实机才能看到广告显示,这部分要特别留意
如果您需要更详细的相关设定方式 (或是您是自行开发组件来使用),您可以到下面网站来取得更多的开发相关信息
另外,这边有个部分需要再留意一下,加入 AdDisplayer 与相关的 Style 设定之后,你会发现不论是在 Visual Studio 中或是 Blend 中,都无法去变更背景颜色,那万一我的画面不是使用黑色的,整体的样子看起来会很怪,怎么会这样呢?
这是由于范例程序代码中 Styl 23、e 的设定将 Background 设定好了,没有绑到相关的属性上的缘故,例如下面这一段 Style 的设定 (请留意红字的部分)