Teach you to advertise on WP7: Windows Phone 7 Advertising Service Application

Document directory

• [Download Sample files]

On our website (or blog), we usually add ad sources provided by advertising service providers to increase the revenue of some websites. On Windows Phone 7, can we also use a similar method to increase revenue? The answer is yes. Next I will introduce how to add this feature to your application.

Before you start, if you have not downloaded the Windows Phone 7 development tool, you can download it immediately. Windows Phone 7 is a brand new platform, and the development tool is completely free of charge, anyone can develop Windows Phone 7 applications. Download address: Http://www.microsoft.com/downloads/en/details.aspx? Familyid = 04704acf-a63a-4f97-952c-8b51b34b00ce & displaylang = en

So how should we add such a function to the application? The steps are as follows:

1. Apply for publisher ID (account)
2. Download the components used by the application (or self-developed)
3. Add features to your application

Next, we will introduce how to add AdMob to your application.

Apply for publisher ID (account)

First, we must first apply for an account of the publisher, first to the AdMob website, the location is Http://zhtw.admob.com/

During the first use, you must create a new account and click Register now to register the account. (If the website you see is an English interface, you can find the language adjustment option at the bottom of the website page)

Next, go to the registration page, as shown in the following figure. Enter your personal data. Note that fields in bold are required, the system will send you a verification email. Make sure that the email address is correct.

Next, you will receive a notification email sent by AdMob, which contains a verification link, such

After you click the verification link, it will automatically connect to the AdMob website and start your account. The following verification success screen will be displayed:

In this screen, select "add your first website" (as shown in)

Next, we will go to the screen for selecting the application type. In this screen, We will select the platform project. Because Windows Phone 7 is a new platform, we cannot see this project here, but it doesn't matter, we can use the "mobile phone network" project, such

* Note: in actual use, the program code uses WebClient to extract the Response Request from the server for relevant display by the program code. Therefore, you can use the "mobile phone network" method.

 

After you click it, the detailed data below will be displayed for you to fill in. Here is a simple example, as shown in

Enter the name of your website, and the URL of the website is replaced by the URL of the blog. the category is "Community, you can enter your website profile or traffic information, so that the customers who want to advertise can better understand the nature and traffic of your website and increase their interest in placing ads on your side.

After you press the "continue" button, the website program code screen is displayed,

This part will be used when placing the advertisement on the website. Here we * (Note) won't use it. Click the bottom button to the next step.

* Note: If you want to develop your own AdMob access function, you can also refer to the program code here.

 

Next, we will see the message of successfully establishing the website. Because there is no (click) record, all the information here will be 0. in this place, it is important to obtain the ID of our publisher first. Where is the ID? Follow the prompts and click the manage Settings button.

Then you will see the ID of the publisher, which must be quickly recorded and used during application development.

Here, the basic settings have been completed and the publisher ID has been obtained. However, there is another step that needs to be done, that is, to set the information about the payment; select "payment details" in the "Account" menu, as shown in figure

The settings will be displayed later. Please fill in the settings according to the type you applied for, as shown in the following example:

The related account settings here have been completed, and other functions such as filter keywords can be set in other website settings. I will not introduce them here. Next I need to download the components to use them.

Download the components used by the application (or self-developed)

The relevant program code will be displayed during the previous account application process. If you want to develop your own program, you can refer to the sample program code for implementation; some enthusiastic friends on the Internet have already provided relevant functions for you to use and download the original code. I will introduce the original code and examples provided by Jacob Gable.

First, download the required components and sample code from the following website. Http://jacob4u2.blogspot.com/2010/08/moads-custom-win-phone-7-ad-control.html

Or on the codeplex side. Http://moads.codeplex.com/

After downloading the project back, uncompress it, and enable the project file first.

Three projects will be displayed in the Solution Explorer window. The purpose of each project is as follows:

• Moads: Control source code
• Moads. customadservicesite: the MVC website is the source of information used by the original author to provide custom ad messages * Note: if the development tool you are using is the express version, because it does not support MVC-related development, you can remove this part of the project, as long as you keep moads and moads. the example project can be used, but the effect of custom advertisements is invisible.

   

• Moads. Example: Sample Code for Windows Phone 7

In the moads. Example project, click mainpage to view the sample program code. When you click it for the first time, you may see a bunch of error messages like the author.

But it doesn't matter. This is not a real error. It is a link that has not been built. First, in the solution manager, build a component project first.

Then create an MVC Project

Finally, build the example project, such

Next, in the Design Screen, Click Reload to see that the screen is properly displayed.

Next, in the sample program, in The XAML section, we can see that the resource defines two styles, for example

These are the two styles provided by the original author, which can be freely selected based on the environment. Below are the key names of the two styles.

• Textonlyadmobstyle: Display Mode of plain text
• Animationadmobstyle: displays an animation.

Next, let's look at the usage of the control, for example

<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>

 

This is an example of how to use the control in XAML. The second example below shows that the original author applies the style, as shown below:

<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>

 

We can see from this that if no style is specified, the default behavior will use the style of animationadmobstyle. At the bottom of the page, you can see a customized control.

<!-- 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>

 

This is a customadadapter implemented by the original author to request the custom AD data source (that is, the madservicesite project in the sample code) and then obtain the custom ad message; in the sample code (Customadadapter \ customadadapter. CS) We can see that a customadservice is declared, which is the main type of data processing, customadservice (Customadadapter \ customadservice. CS) Is inherited from basejsonservice. It can be seen from this that the transmitted data is in JSON format. If you have similar requirements, you can refer to this method for related development, you can use the functions provided by moads to display custom ad content.

If you want to directly execute the sample program to see the effect, the customadadapter will make a request to the MVC website. Therefore, the two projects must be executed simultaneously, this can be set in Project Properties

After learning about the usage, you can add related functions to our application.

Add features to your application

First, because we need to use the relevant components provided by moads (the previously downloaded sample program), we must first add the components to the toolbox for ease of use; do you still remember that we have previously created a component project? After the build is complete, component files will be generated in the folder, and the location will be in the bin folder, or you can directly add and download the created component files, which are similar to the following

Your sample program location \ MoAds-Binaries_Source-v1.0 \ Binaries

Right-click the blank area in the toolbox, and select Add project.

The select project dialog box appears. In this case, switch to the previously downloaded sample code component and find the moads. dll file, as shown in figure

Select "enable" and the new project of addisplay will be displayed in the toolbox. Next, drag an addisplay project to the Design Screen and adjust it to the appropriate size.

Next, let's take a look at the changes in XAML. First, an xmlns is added to the phoneapplicationpage section,

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

 

This is a reference for the relevant components that Visual Studio automatically adds when dragging components. In the following contentgrid, there will be more relevant XAML code

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

 

Here we can find that no adadapter is added according to the preset, so you must modify the XAML settings and add the adapter part (the adapter is used to request the ad source and process data ), the modified XAML will be as follows:

<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>

 

At this time, you will find thatStaticresource animationadmobstyleThe error occurs because we have not added the relevant style settings. You can refer to the sample code downloaded to add the related style settings to phoneapplicationpage. resource block (this part is not listed one by one because of the large number of program codes. You can refer to the sample program code content ).

Next, addisplayer has several important attributes that need to be set.

• Publisherid: ID of the publisher. Enter the ID of the publisher we applied.
• Cookiestring: The value entered here is used to help AdMob identify whether repeated users click to improve the analysis function and accuracy. This setting is recommended, no input is required.
• Adkeywords: Here is the keyword for entering ad search. You can enter the types related to your application, such as sport and money. Separate the keywords with blank spaces.
• Usetestmode: Whether to use the test mode. This value is set to true during application testing. When a request is sent, the AdMob website will provide a test advertisement.Before you release an application, set it to false to obtain the actual advertisement content..

Then you can run the application to test it. After you press the debug button, you can see that the application is successfully executed. If there is no accident, you will see the same picture as the author.

* Note 1: Please note that the publisherid part must be replaced with the ID you applied for, otherwise the effect will not be visible * Note 2: When the usetestmode parameter is set to false, the result is not displayed on the simulator. You must use the real machine to see the advertisement display. Pay special attention to this part.

 

If you need more detailed settings (or if you are using a self-developed component), you can go to the following website to obtain more development-related information. Http://developer.admob.com/wiki/Requests

In addition, you need to pay attention to this part. After adding addisplayer and related style settings, you will find that you cannot change the background color in Visual Studio or blend, so if my screen is not black, it looks strange as a whole. How can this happen?

This is because the style settings in the sample program code have set the background and are not bound to the relevant attributes. For example, the following style settings (please pay attention to the red part)

<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>

 

You can modify the XAML settings of grid. Background to set the settings to relevant attributes, such as the following program code.

<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}">

 

In this way, you can use Visual Studio or the blend interface to set the background color.

Here, the whole operation is almost done. However, as the ad content is obtained, data is actually obtained through the network, according to the user's network settings, additional connection fees may be required, so we must fulfill our reminder obligations. Next, we will make some adjustments to the original program, add the EULA image to seek the user's consent. The author provides a simple prompt page, as shown in

The section of XAML is roughly as follows (only the section of contentgrid is listed below)

<! -- Contentpanel-place additional content here --> <grid X: Name = "contentgrid" grid. row = "1"> <textblock Height = "440" horizontalalignment = "Left" margin = "24,46, 426 "name =" textblock1 "text =" textblock "verticalignment =" TOP "width =" "textwrapping =" Wrap "fontsize =" 32 "/> <button content =" agree "Height =" 82 "Maid =" Left "margin =" 0,529, 199 "name =" btnok "verticalignment =" TOP "width =" "Click =" btnok_click "/> <button content =" disagree "Height =" 82 "horizontalalignment =" left "margin =" 269,529, 199 "name =" btncancel "verticalignment =" TOP "width =" "Click =" btncancel_click "/> </GRID>

 

After the user clicks "agree", we will go to the main screen of the software, and the program code to the next page will be shown below

Private void btnok_click (Object sender, routedeventargs e) {navigationservice. navigate (New uri ("/Name of main vertex. XAML", urikind. Relative ));}

 

However, when the user clicks disagree, we close the application and stop executing it. An interesting problem occurs at this time, when the user presses the "Return key", the application will be automatically closed. How can we use the program code to close the application? We have to make a detour. In the Silverlight application, if "unprocessed exceptions" occur ", at this time, the application will (you can also customize the relevant exception categories to achieve this function) private void btnCancel_Click(object sender, RoutedEventArgs e) {     NavigationService.Navigate(new Uri("/NotExistPage", UriKind.Relative)); }

Use this method to exit the application so that we can achieve the desired effect.

* Note: For exit problems, refer to the description of exiting a Windows Phone application.

 

Next, the second problem will occur. After the user clicks "agree", the application will direct to the second page. This is no problem, but on the second page, if the user clicks "Back key", the default behavior of Windows Phone 7 will be switched back to the previous page, that is, the EULA page. This is not what we want. We need to solve this problem, we can use a similar method. On the main page, when the user presses the "Return key" event, the application is directly closed, the program code is roughly as shown below: 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 ;}}

 

In this way, it is quite simple to add the advertisement function to our application. Isn't it interesting? Try it now!

[Download Sample files]

• Admob_sample.zip