This page will help you get started integrating AdMob ads into your Smartphone web site. You'll integrate a JavaScript snippet into your site that will allow you to show ads to iPhone and Android devices. AdMob does not support ad serving to other platforms. In order to serve ads to other mobile platforms, including WAP phones, we recommend signing up for Google AdSense.
Web Integration
AdMob offers a JavaScript integration solution for Android and iPhone sites/web apps. The code included below can be found by registering a Smartphone Web site in your AdMob account. To integrate, simply paste the code below in the exact spot in the page where you want the ad to appear. Note that AdMob can only return ads to iPhone and Android devices. If your site will be viewed by WAP phones or other types of mobile phone, we recommend Google AdSense as a monetization solution.<script type="text/javascript">
var admob_vars = {
pubid: '[PUBLISHER_ID]', // publisher id
bgcolor: '000000', // background color (hex)
text: 'FFFFFF', // font-color (hex)
test: true // test mode, set to false if non-test mode
};
</script>
<script type="text/javascript" src="http://mmv.admob.com/static/iphone/iadmob.js"></script>
The above snippet will always return a test ad. During development or
testing, this should be kept in test mode. Once you set test to false
you will receive live ads and affect your impression count. We do not
allow publishers to click live ads. It is possible for you to receive
ads in test mode and not see ads once the test mode is false. This does
not indicate a problem - though test mode will always return an ad,
AdMob may not have a live ad to return on every request.
Note: If your document has onLoad javascript in the BODY tag, ads may not always appear. See next section.
Additional API/Technical Notes
This section is for web apps or publishers that are experienced in javascriptOur javascript is written in such a way to be the lowest possible integration bar for general users. This means that the above code simply fires off an initialize function on the window 'load' event (akin to <body onload='_admob.init()'>). The init event looks for our script tags in the dom and works off these hooks. This means inserting the script dynamically into your page will fail.
If you need to insert ads dynamically into your page, use the following method:
<script type="text/javascript">
var admob_vars = {
pubid: '[PUBLISHER_ID]', // publisher id
test: true, // test mode, set to false if non-test mode
manual_mode: true
};
</script>
<script type="text/javascript" src="http://mmv.admob.com/static/iphone/iadmob.js"></script>
This will suppress the init function. To request an ad, use the following function
/**
* @param el Node a dom element
* @return object adEl is a handle to the ad.
*/
_admob.fetchAd = function(el) {
....
return {
adEl: adFrame
};
};
For example if you want an ad rendered in a <div id='admob_ad'></div> use:
_admob.fetchAd(document.getElementById('admob_ad'));
Please keep in mind that ID's must be unique to the page.
You can also use this handle to hide ads:
var ad = _admob.fetchAd(document.getElementById('admob_ad'));
ad.adEl.style.display = 'none'; // OR hide it w/o affecting dom layout
ad.adEl.style.visibility = 'hidden';
You can programmatically display a new ad by putting an ad web page in an IFRAME:
<script>
...
<iframe id="admob_ad" style="position: absolute; width: 320px; height: 48px; left: 0px; top: 0px;" noresize="noresize" frameborder="0" src="http://your_site.com/your_admob_web_page.html">
</iframe>
...
</script>
<script>
...
// refresh the IFRAME where you want to display a new ad
var adIframeEl = document.getElementById("admob_ad");
adIframeEl.src = adIframeEl.src;
...
</script>
_admob.fetchAd returns the following object
{
adEl: <handle to the ad frame, this is an iframe>
shim: <handle to the shim under the ad frame, this is a div>
}
If you want to detect that an ad has returned you can check the height of the iframe.
<script>
var ad = _admob.fetchAd(document.getElementById('admob_ad'));
var polling_timeout = 0;
var polling_func = function() {
if(ad.adEl.height == 48) {
// we have an ad
console.log('received ad');
}
else if(polling_timeout < 5000) {
console.log('repoll');
polling_timeout += 1000;
window.setTimeout(polling_func, 1000);
}
else {
console.log('no ad');
ad.adEl.style.display = 'none';
}
};
window.setTimeout(polling_func, 1000);
</script>
Also, clicks can be opened in a new tab in Web Apps. *note: this will only work for ads that link to web pages. Simply use:
<script type="text/javascript">
var admob_vars = {
...
new_window: true
};
</script>
Tips
(1) Use a meta viewport tag so your page shows up in full scale to users:<meta name="viewport" id="viewport" content="width=320, user-scalable=no" />(2) set a static width for your body
<body style='width: 320px'>or in your css
body {
width: 320px;
}
No comments:
Post a Comment