Издательский дом ООО "Гейм Лэнд"

ЖУРНАЛ ХАКЕР #114, ИЮНЬ 2008 г.

AdSense под контролем

Николай Байбородин (baiborodin@gmail.com)

Хакер, номер #114, стр. 092

Мониторинг AdSense аккаунта через Vista Sidebar

Оптимизаторы могут ставить перед собой разные цели – но, в большинстве случаев, это борьба за презренный металл. Google AdSense – один из наиболее лакомых источников обогащения. Уверен, ты так бы сидел, не отрываясь, смотря на то, как капают лавандосы на адсеновский счет. Нет проблем – сегодня мы напишем удобный AdSense монитор!

Анатомия гаджета

Для начала разберемся, как пишутся гаджеты. Из инструментов тебе понадобится блокнот и… и пожалуй, все. Гаджеты пишутся на HTML и JavaScript. Так что, если ты не знаком с C#, ASP, LINQ и прочими модными фишками – расслабься и получай удовольствие. В отличие от скриптов, запускаемых в веб браузере, гаджеты имеют гораздо больше возможностей взаимодействия с операционной системой. Еще одна полезная фишка – возможность одновременного запуска нескольких копий одного и того же гаджета. Например, можно мониторить одновременно несколько AdSense аккаунтов.

Чтобы создать свой Vista Sidebar Gadget, нужно выполнить несколько простых шагов, которые осилит даже Светка Букина:

создать каталог, в котором будут храниться все файлы гаджета;
создать HTML страницу (это основа будущего гаджета);
создать XML файл (манифест), содержащий описание гаджета для операционной системы.

Все. Гаджет готов. Дополнительно его можно защитить от изменений и создать удобный инсталлятор (высший пилотаж, доступный только реально крутым хакерам).

Из приведенного выше алгоритма видно, что гаджет состоит из двух файлов: ядро гаджета (HTML-файл) и манифест в XML-формате. Манифест определяет свойства гаджета – его название, пиктограмму и описание. Файл манифеста всегда должен иметь название gadget.xml. Кроме этих двух, в состав гаджета могут входить и другие файлы (HTML, JavaScript, графические файлы, CSS).

Создание HTML каркаса

Чтобы сайдбар смог найти новый гаджет, тот должен оказаться в нужное время в нужном месте. А точнее, в каталоге: %userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets.

Здесь расположены гаджеты текущего юзера. Еще бывают гаджеты, общие для всех пользователей, – для них предусмотрен свой каталог. Перейдя в каталог со своими гаджетами, создай отдельный подкаталог для нового. Название можешь придумать любое. Главное, чтобы оно заканчивалось на «.gadget». Например, Adsense.gadget. В принципе, можно все файлы складывать в корень этого каталога, но хорошим тоном считается следующая внутренняя файловая организация гаджета: каталог с графическими объектами (images) и несколько (или один) каталогов с разными версиями локализации (например, каталог «en-us» для интерфейса на американском английском – и так далее).

Теперь открывай свой любимый HTML-редактор и пиши следующее:

<html>

<head>

<title>Adsense Monitor</title>

</head>

<body style="width: 130; height: 67">

<div id="textEarnings">Ошибка инициализации.</div>

<div id="textClicks"></div>

<div id="textImpressions"></div>

</body>

</html>

Ну как? Я же говорил, что по своей природе гаджет – обычный гипертекстовый документ. А это значит, что большинство технологий, используемых при создании HTML-страниц для большого веба, доступны и для гаджето-писателей. В шаблоне я сразу разместил слои, в которых будет отображаться информация из AdSense аккаунта. Обрати внимание на параметр style – так мы задаем размеры гаджета. Этот параметр есть не что иное, как CSS дескриптор. Следовательно, другие средства CSS форматирования тоже доступны. И, кстати говоря, могут быть применены к любому элементу (к тем же слоям).

Теперь перейдем к файлу манифеста. Создавай файл gadget.xml:

<?xml version="1.0" encoding="utf-8" ?>

<gadget>

<name>Adsense Monitor</name>

<namespace>Adsense.Gadgets</namespace>

<hosts>

<host name="sidebar">

<base type="HTML" apiVersion="1.0.0" src="adsense.html" />

<permissions>full</permissions>

<platform minPlatformVersion="0.3" />

</host>

</hosts>

</gadget>

Файл небольшой и раскурит его даже пионер. Тег <namespace> определяет уникальное пространство имен переменных гаджета (чтобы не возникло конфликта с другими гаджетами). С помощью тега <host> можно указать расположение гаджета по умолчанию – на сайдбаре или «в свободном плавании». Здесь же ты сообщаешь системе о версии API, которую собираешься заюзать, и, обязательно, – имя HTML-файла. Тег <permission> нужен, чтобы установить права доступа пользователя к гаджету.

Есть еще много полезных и не очень тегов, которые ты можешь использовать в файле манифеста. Например, теги <logo> и <icon> позволяют задать картинки для придания гаджету большей гламурности. Подробно на них останавливаться мы не будем. В случае необходимости – кури MSDN.

Если твой гаджет лежит в правильном каталоге (смотри выше), жми кнопку «плюс» на сайдбаре. В галерее гаджетов должно появиться твое творение. Правда, пользы от него никакой. Но это мы скоро исправим.

Есть у меня один могильничек…

Постепенно подбираемся к нашей цели. Если ты не забыл – это возможность мониторить AdSense с сайдбара Висты. Как все происходит в браузере? Ты заходишь на сайт www.google.com/adsense и вводишь логин и пароль. Ежу понятно, что без браузера порядок действий будет тот же. Следовательно, где-то нужно хранить как сам адрес, так и параметры твоего аккаунта. И такая возможность в гаджетах предусмотрена.

Ты уже знаешь про XML- и HTML-файлы, используемые в любом гаджете. Некоторые гаджеты, а именно те, которые требуют предварительной настройки, включают в себя еще один файл – Settings.html. Если в каталоге гаджета есть такой файл, то на ярлыке гаджета появляется иконка в виде гаечного ключа. При нажатии на нее откроется как раз этот файл, позволяющий настроить гаджет и сохранить его настройки в реестре системы.

Для сохранения настроек используется специальный метод из gadgets API – System.Gadget.write(параметр, значение). Для чтения сохраненных параметров – метод System.Gadget.Settings.read(параметр).

Определимся, какие параметры нужно сохранить. Прежде всего, это логин на вход в систему AdSense и соответствующий пароль. Я бы посоветовал добавить параметр, отвечающий за частоту обновления информации. Можно предусмотреть возможность изменения фона и текста гаджета, чтобы он органично вписался в оформление твоего рабочего стола. Но это уже от лукавого, так как к основному функционалу не относится.

В какой момент читать и записывать параметры? Ты можешь делать это по своему усмотрению, но разумнее придерживаться проверенных временем рекомендаций. Читать параметры лучше всего после инициализации гаджета. То есть, сразу, как только он готов к работе. Для этого функция чтения параметров вешается на обработчик document.onreadystatechange. После его срабатывания нужно проверить, в каком состоянии находится гаджет:

document.onreadystatechange = function()

{

if(document.readyState=="complete")

{

name = System.Gadget.Settings.read("Adsense_name");

password = System.Gadget.Settings.read("Adsense_password");

refresh = System.Gadget.Settings.read("Adsense_refresh");

}

Естественно, переменные, в которые считываются сохраненные параметры, должны быть заранее объявлены. Чтобы ты впоследствии не гадал, с какими значениями параметров в данный момент работаешь, не поленись там же прописать заполнение полей для ввода полученных значений. Сделай что-нибудь вроде document.setup.nameBox.value = name.

Теперь вешай скрипт на обработчик System.Gadget.onSettingsClosing. И сохраняй настройки в том случае, если нажата соответствующая кнопка – event.Action.commit:

System.Gadget.onSettingsClosing = function(event)

{

if (event.closeAction == event.Action.commit)

{

System.Gadget.Settings.write("Adsense_name",

document.setup.nameBox.value);

System.Gadget.Settings.write("Adsense_password", document.setup.passwordBox.value);

System.Gadget.Settings.write("Adsense_refresh", document.setup.refreshBox.value);

event.cancel = false;

}

Google с черного хода

Вот мы и перешли к самому главному – к программной логике гаджета. Все описанные ниже священные камлания я рекомендую тебе оформить отдельным .js файлом, чтобы не мешать мух с котлетами. Все адреса, явки и пароли (все http-запросы), помогающие полюбовно договориться с AdSense сервисом, легко и непринужденно отыскиваются с помощью анализа отправляемых браузером пакетов. Если есть желание повторить опыт самостоятельно, тебе не составит труда найти соответствующий плагин для огнелиса.

Итак, сначала – подключение. Google любит, чтобы с ним общались с помощью XML-форматов. Не проблема. В JavaScript есть замечательный объект xmlHttp.

xmlHttp.Open("POST","https://www.google.com/adsense/login.do",true );

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded" );

xmlHttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");

xmlHttp.send("destination=&username=" + name + "&password=" + password );

В принципе, с этого момента уже можно конструировать запросы для получения данных о состоянии AdSense баланса. Но предлагаю на время отвлечься и ответить на один вопрос. А именно – что ты ожидаешь получить в ответ на свой запрос? Я сейчас говорю не о сумме на счете, которая тебе снится в сладких снах. Я о формате данных. Чтобы в дальнейшем было меньше работы по разгребанию всякого мусора, советую выбрать что-нибудь простое. Щедрый Google предлагает несколько форматов представления отчетов. Грех не воспользоваться такой возможностью. Рекомендую остановить свой выбор на формате TSV. Это простая табличка, в которой столбцы разделяются с помощью знака табуляции, а строки – с помощью символа перевода строки. В этой таблице первая колонка – количество показов рекламных блоков, вторая – сколько тебе накликали, а третья – твой баланс.

Зная структуру таблицы, можно написать для нее парсер:

var rows = xmlHttp.responseText.split("\n");

var cells = rows[1].split("\t");

if (cells.length == 6) {

impressions += parseInt(cells[1]);

clicks += parseInt(cells[2]);

balance += parseFloat(cells[5]);

}

Думаю, тут все понятно, и код в комментариях не нуждается.

Теперь непосредственно запросы, извлекающие статистику в виде TSV-таблиц. Количество запросов соответствует количеству AdSense программ, в которых ты участвуешь. Мы ограничимся двумя – один на статистику AdSense для контента и один на статистику AdSense для поиска.

Все запросы строятся по одной и той же схеме. Прежде всего, открываем xmlHttp соединение, указав в качестве параметра тип запроса – POST или GET, строку запроса и дополнительные параметры (если необходимо). Затем формируем HTTP-заголовок запроса – setRequestHeader(). Чтобы обойти стороной неприятные моменты с выдачей кэшируемых данных и с каждым запросом получать реальные данные, в качестве параметра метода setRequestHeader() можно указать вот такую хитрую строчку: "If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT".

После чего посылаем запрос гуглу. Если ответ получен, парсим данные, как уже демонстрировалось несколькими строками выше. Если ответа так и не дождались – грязно ругаемся на пользователя.

xmlHttp.Open("POST", "запрос", false);

xmlHttp.setRequestHeader

("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");

xmlHttp.send();

if (xmlHttp.status == 200) {

parseData();

} else {

loadstatus = "HTTP Error : " + xmlHttp.status;

}

Содержание запроса будет отличаться в зависимости от того, какую информацию нужно получить. Так, чтобы получить статистику AdSense для контента, используется следующая строка: https://www.google.com/adsense/report/aggregate?outputFormat=TSV_EXCEL.

Если нужно получить статистику AdSense для поиска, строка примет вид: https://www.google.com/adsense/report/aggregate?product=afs&outputFormat=TSV_EXCEL.

Финиш

Большая часть работы уже позади – можешь побаловать себя бутылочкой кефира. Осталось заняться пользовательским интерфейсом и придать гаджету немного глянца. К настоящему моменту мы имеем статистику Google AdSense. Как вывести ее на морду гаджета? Очень просто – через параметр innerText текстовых полей.

if (loadstatus != '') {

textClicks.innerText = "";

textImpressions.innerText = "";

textEarnings.innerText = loadstatus;

} else {

textEarnings.innerText = "Баланс: " + balance.toFixed(2);

textClicks.innerText = "Clicks: " + clicks;

textImpressions.innerText = "Показы: " + impressions;

}

Если ты планируешь не только сам пользоваться собранным своими руками гаджетом, но и поделиться им со своими друзьями, то неплохо было бы замутить инсталлятор. С инсталлятором тоже все настолько просто, что даже скучно. Берешь свой любимый архиватор, поддерживающий ZIP-формат (а какой, скажите, не поддерживает?) и запаковываешь каталог с гаджетом. После этого просто поменяй расширение с .zip на .gadget. Все. Теперь по двойному щелчку на созданном файле будет открываться стандартный диалог установки нового гаджета. Всем радоваться.

При создании гаджета мы оставили без внимания многие аспекты, которые нужно обязательно учитывать в реальной жизни. Прежде всего, проверяй все вводимые пользователем данные. Неплохо было бы проверять и данные, получаемые по Сети (как и сам факт успешного получения). Хорошим тоном считается явное указание кодировки текста. Существенно повысит безопасность и производительность работы гаджета предварительная очистка от «мусора» полученных по Сети данных. Есть еще ряд важных аспектов создания качественного и безопасного гаджета. Все они описаны в MSDN.

Как уже упоминалось в статье, гаджеты имеют достаточно широкие возможности взаимодействия с операционной системой. Это предъявляет особые требования к безопасности гаджета, особенно если он работает с сетевой средой. Одним из откровенно слабых мест в системе безопасности является механизм взаимодействия с ActiveX компонентами. Корректность и безопасность такого взаимодействия никак не контролируется операционной системой, и вся ответственность ложится на разработчика гаджета.

HTML + JavaScript – далеко не единственная технология создания гаджетов для Vista Sidebar. Возможно создание гаджетов на основе WPF и Silverlight. Хотя данные технологии более трудоемкие, они обеспечивают больше возможностей в плане функциональности и интеграции с операционной системой, а также предлагают более надежную схему обеспечения безопасности гаджета и пользовательских данных.

CD

На диске тебя ждет готовый гаджет для мониторинга Google AdSense. Если лень писать самому – пользуйся на здоровье. И помни, что распаковав архив, ты получишь доступ к исходникам и сможешь усовершенствовать гаджет по своему усмотрению.

INFO

Всю самую подробную информацию о гаджетах для Vista SideBar ты найдешь в MSDN, который, кстати говоря, потихоньку начали переводить на великий и могучий.

Содержание