Реклама AdMob и мобильные Air приложения
Короткий пост о том, как разместить баннер популярной сети AdMob в мобильном Air приложении. Рассмотрим один-два нюанса, решим проблему нежелательного масштабирования.Оговорюсь, что в моих примерах фигурирует дисплей Retina, которым оборудованы iPhone 4 и iPod Touch 4. Однако логично ожидать, что проблема с масштабом баннера будет наблюдаться и на устройствах предыдущих версий.
Оставим без деталей несложный процесс регистрации на сайте AdMob, и создание нового сайта/приложения:
Для размещения баннера в приложении для iPhone и iPod Touch я выбираю iPhone App — мне это кажется логичным. Однако многие авторы подобных статей рекомендуют выбрать Smartphone Web. Такой вариант удобен тем, что сразу приводит нас к необходимому javascript коду вместо такой вот новости:
Однако, мне все это кажется немного некорректным… и в конечном счете неоправданным, потому что предложенный для Smartphone Web код отлично выдает баннер и для iPhone App. Вот эти заветные строчки:
<script type="text/javascript">
var admob_vars = {
pubid: 'xxxxxxxxxxxxxxx', // publisher id
bgcolor: '000000', // background color (hex)
text: 'FFFFFF', // font-color (hex)
test: true // test mode, set to false to receive live ads
};
</script>
<script type="text/javascript" src="http://mmv.admob.com/static/iphone/iadmob.js"></script>Нам остается лишь притулить этот javascript, предварительно обернутый в HTML, в наше приложение, которое мы пишем на старом добром ActionScript. Здесь нам пригодится StageWebView. Кто не знаком с данным классом — пройдите по ссылке, ознакомьтесь.
1. HTML код страницы с баннером.
Следуя рекомендациям в справке AdMob, я создаю две страницы.
www.mysite.com/admob_container.html
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AdMob container</title>
<meta name="viewport" id="viewport" content="width=320, user-scalable=no" />
</head>
<body style="margin: 0; background-color: #000000;">
<iframe id="admob_ad" style="position: absolute; width: 320px; height: 48px; left: 0px; top: 0px;" noresize="noresize" frameborder="0" src="admob_iframe.html"></iframe>
<script>
var admobAd = document.getElementById("admob_ad");
function loadNewAd()
{
admobAd.src = admobAd.src;
}
setInterval(loadNewAd, 20000);
</script>
</body>
</html>www.mysite.com/admob_iframe.html
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AdMob iframe</title>
</head>
<body style="margin: 0;">
<script type="text/javascript">
var admob_vars = {
pubid: 'xxxxxxxxxxxxxxx', // publisher id
bgcolor: '000000', // background color (hex)
text: 'FFFFFF', // font-color (hex)
test: true // test mode, set to false to receive live ads
};
</script>
<script type="text/javascript" src="http://mmv.admob.com/static/iphone/iadmob.js"></script>
</body>
</html>Если вторая страница ничем не примечательна, то первую страницу полезно рассмотреть более детально.
<meta name="viewport" id="viewport" content="width=320, user-scalable=no" />Без этой строчки масштаб нашей страницы с баннером будет произведен на усмотрение браузера Safari. А он по умолчанию использует 640px ширины (Retina) как 980px, что приводит к уменьшению страницы приблизительно до 65% от оригинала. Короче говоря, то, что я хотел натянуть на всю ширину экрана (т.е. надо бы еще увеличить вдвое баннер размером 320?48), оказалось сиротливым прямоугольничком неприличных размеров.
В остальном все просто. Грузим нашу страничку с баннером в iframe и заводим механизм независимой от приложения ротации баннеров с интервалом 20 секунд.
2. Страницу с баннером придется таки грузить.
Не получится сэкономить на одной загрузке с помощью loadString(). Ведь было бы так удобно сложить весь HTML первой страницы в одну строчку и скормить объекту StageWebView. Ничего не выйдет — на устройстве баннер не отобразится.
3. Вставляем блок с рекламой в приложение
Приютим эти строки где-то в каком-то Main.as и, когда будет доступен stage, вызовем createAdBlock():
public function createAdBlock():void
{
var adBlock:StageWebView = new StageWebView();
adBlock.stage = super.stage; // ну ясное дело, stage уже должен быть
adBlock.viewPort = new Rectangle(0, 0, 640, 96);
adBlock.loadURL("http://www.mysite.com/admob_container.html");
adBlock.addEventListener(LocationChangeEvent.LOCATION_CHANGING, this.handler_LocationChanging);
}
private function handler_LocationChanging(event:LocationChangeEvent):void
{
if (event.location != "http://www.mysite.com/admob_container.html" && event.location != "http://www.mysite.com/admob_iframe.html")
{
// ша! вже никто никуда не идет
event.preventDefault();
// пускай браузер ходит
navigateToURL(new URLRequest(event.location));
}
}Первый метод создает блок с рекламой. Второй метод обрабатывает клик по баннеру. Дело в том, что при загрузке новой страницы объект StageWebView помимо прочего любезно сообщает нам о намерении перейти на новый URL до совершения этого перехода, генерируя событие locationChanging. Именно на это событие нам необходимо подписаться, чтобы пресечь загрузку внутри приложения и открыть сайт снаружи.
Обратим внимание на строку кода, где мы задаем размеры нашего блока:
adBlock.viewPort = new Rectangle(0, 0, 640, 96); Именно мета тег в нашем HTML документе позволяет регулировать размер баннера всего лишь указав нужные размеры вьюпорта объекта StageWebView.
Ну вот и все. Баннер имеет нужный размер, обновляется каждые 20 секунд, по клику идет в браузер — дело сделано.
4. И, наконец, начало.
Отдельно рассмотрим момент, который хороший разработчик обязательно реализует — запуск блока с рекламой. Как избавиться от этого большого белого прямоугольника, пока он еще не стал красивым баннером на радость пользователю?
Можно, например, изначально сдвинуть объект StageWebView ниже видимой части экрана, пока не дождемся от него события complete. И лишь после этого переместить его на видное место. Все это мы проделываем с помощью свойства viewPort.
Может возникнуть вопрос: почему просто не манипулировать свойством stage, присвоив ему null на время загрузки? А дело в том, что, если страница с баннером загружается в праздно болтающийся «нигде» экземпляр StageWebView, то вся наша затея с мета тегом (в HTML коде выше) идет прахом.
Удачной мобилизации!
Обновление от 25 марта 2012
- произвел некоторые изменения в структуре HTML.
- убедился в работоспособности изложенного метода в рабочем режиме на iOS. Все работает, баннеры крутятся, Fill Rate высокий.
Источник: http://blog.bellinsky.com/ru/2011/10/реклама-admob-и-мобильные-air-приложения/
- +15
- Zebestov
Комментарии (11)
Спасибо!
А тем временем в App Store можно найти большое множество приложений с баннерами AdMob. Те же «птички»! Да и число показов в правом верхнем углу главной страницы AdMob косвенно намекает, что баннеров много и везде. Apple, полагаю, не исключение.