不一定要用admob，大家可以自己选广告。
How to integrate AdMob with Sencha Touch
Posted: 09/08/2011 09:37:01 by Usmaan Dad
Sencha Touch and PhoneGap allow you to create cross platform mobile applications using web technologies such as JavaScript, HTML5 and CSS3. Sencha touch is a JavaScript framework for mobile web development which generates its own DOM based on objects created in JavaScript. PhoneGap is a bridging technology that packages your cross platform web application into native binaries for target devices such as iOS, Android and so on. The result is a deployed app that runs natively on mobile devices. It becomes quite clear that the performance, runtime and feel of the application are almost that of the real thing.
AdMob is the world's largest mobile advertising marketplace. It allows advertisers to reach their customers on the mobile Web and publishers to increase the value of their mobile sites. It provides an API for integrating adverts into native mobile applications.
My question was: how do I integrate AdMob into a HTML5/PhoneGap mobile application?
In this blog post I’m going to talk you through how to include AdMob adverts into a mobile application with Sencha Touch/PhoneGap.
Registering with Admob
- Firstly, sign up for an account on: www.admob.com
- Information such as Name, Address and Email are required.
Create Site/App
- Once registered, click on “Marketplace” in the top left hand corner of the page.
- After, click on Sites & Apps -> Add Site/App.
- From the options given, select Smartphone Web as this will produce the necessary JavaScript for our application. This is the key bit as our application is driven on JavaScript, HTML and CSS.
- By clicking on Smartphone Web, a drop-down menu will appear with relevant information concerning the application. Simply populate these fields respective to your applications attributes.
- The Theme section contains customisable properties such as Text and Background colour.
- Once all of these are populated and customised according to your needs, click on “Continue” at the bottom.
- The page that follows will provide a code script, including a publisher ID that is unique to your account. Keep this code handy as it will be required at a later stage.
Sencha Touch Application
To begin, Sencha Touch’s basic building block for layouts is the Ext.Panel. This allows myriad Panels to display different content and to be arranged in a specific way. For this example, we will be using one Panel as a simple and easy method.
The Code:
|
1
2
3
4
5
6
7
8
9
10
11
|
Ext.setup({
onReady:
function
() {
var
adverts =
new
Ext.Panel({
html:
'<iframe src="adverts.html" width="100%" height="48" frameBorder="0" scrolling="no"></iframe>'
});
var
rootPanel =
new
Ext.Panel({
fullscreen:
true
,
dockedItems: [adverts]
});
}
});
|
Adverts.html should look as follows, and includes the code block provided above including your unique publisher ID. Note that while the script refers to iPhone it will actually also function on Android:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<
html
>
<
head
>
<
style
type
=
"text/css"
>
html, body, img, a {
margin: 0;
padding: 0;
border: 0;
}
</
style
>
</
head
>
<
body
>
<
script
type
=
"text/javascript"
>
var admob_vars = {
pubid: 'xxxxxxxxxxxxx', // publisher id
bgcolor: 'FFFFFF', // background color (hex)
text: '000000', // font-color (hex)
test: true // test mode, set to false to receive live ads
};
</
script
>
</
body
>
</
html
>
|
The end results:
693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
