OpenX jQuery плагин для вставки рекламного кода

Posted on by

This post is also available in: Английский

openx-jquery-lazy-load

Несмотря на то, что компания OpenX фактически прекратила разработку открытой версии OpenX Community Edition, интерес к этому программному продукту все еще присутствует, так как это наиболее функциональное решение с открытыми исходными кодами для доставки рекламы. В этой статье мы покажем, как улучшить один из аспектов работы с этой системой — код загрузки рекламы для вставки на веб страницу.

Обычный код вставки баннера в OpenX с помощью JavaScript тэга выглядит примерно так:

1
<!--/* OpenX Javascript Tag v2.8.8-rc6 */-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://openx.local/openx-now/www/delivery/ajs.php':'http://openx.local/openx-now/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=1");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript><a href='http://openx.local/openx-now/www/delivery/ck.php?n=a289d793&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://openx.local/openx-now/www/delivery/avw.php?zoneid=1&cb=INSERT_RANDOM_NUMBER_HERE&n=a289d793' border='0' alt='' /></a></noscript>

В нем довольно сложно разобраться неподготовленному пользователю, и фактически при необходимости изменить какие-либо его параметры приходится заходить в администраторский интерфейс OpenX и генерировать код заново. Помимо этого, он завязан на функцию document.write, что приводит к невозможности асинхронной загрузки баннеров на странице. Это означает, что при наличии в начале страницы баннера, страница не будет загружена целиком, пока не загрузится баннер. То есть ваш рекламный сервер становится узким местом для скорости загрузки страниц. Об этом мы уже писали ранее в статье Оптимизация загрузки рекламы на клиенте.

Чтобы решить эти проблемы, а также более тесно интегрировать рекламный код OpenX с библиотекой jQuery, которая приобрела популярность в последнее время, мы создали плагин для jQuery, позволяющий отказаться от использования громоздкого рекламного кода в пользу коротких и понятных конструкция на языке JavaScript. Плагин можно загрузить на сайте jQuery, а разработка ведется на Github-е.

Помимо тесной интеграции с jQuery, использование этого плагина имеет следующие преимущества по сравнению со стандартным кодом вставки рекламы:

  • Баннеры загружаются асинхронно, так что их загрузка не влияет на скорость загрузки страницы.
  • Одним вызовом плагина можно загрузить баннеры сразу в несколько баннерных мест.
  • Параметры запроса к рекламной системе можно задавать на нескольких уровнях: глобально для всех баннеров, которые загружаются с помощью плагина; в каждом вызове функции загрузки баннеров; непосредственно в HTML-коде элементов, в которые будет вставлен баннер, используя возможности, которые предоставляет плагин Metadata.
  • Вы можете отлавливать момент загрузки баннера в своем JavaScript коде с помощью функции-колбэка.

Плагин был успешно протестирован на простых баннерах формата изображение и SWF на сервере OpenX Community Edition последней на данный момент версии 2.8.8-rc6.

Примеры использования

Перед тем как начать использовать плагин, его необходимо подключить к веб-странице, добавив в head строки загрузки библиотеки jQuery, плагина Metadata (необходимо только если вы собираетесь использовать соответствующую функциональность), и плагина OpenX Tag:

1
2
3
<script src="jquery.min.js"></script>
<script src="jquery.metadata.js"></script>
<script src="jquery.openxtag.min.js"></script>

Для того чтобы задать обязательные параметры, общие для всех баннеров на странице (например, адрес вашего сервера OpenX), воспользуйтесь методом init:

1
2
3
4
$.openxtag('init', {
delivery: 'http://example.com/openx/delivery',
deliverySSL: 'https://example.com/openx/delivery'
});

Код вставки баннера из зоны OpenX с ID 1 в элемент страницы с id «zone1» будет выглядеть так (разница по сравнению со стандартным кодом очевидна):

1
$('#zone1').openxtag('zone', 1);

Зададим дополнительные параметры запроса к OpenX — включим параметр block, который позволяет сделать так, чтобы один и тот же баннер не загружался на одной странице несколько раз. Функция, заданная в третьем параметре вызова метода zone будет вызвана после того, как баннер загружен.

1
2
3
4
5
$('.banner').openxtag('zone', 1, {
block: true
}, function () {
console.log('loaded ad from zone ' + 1);
});

Зададим параметры загрузки баннеров непосредственно в HTML-коде:

1
2
<div class="banner {zoneID: 1, source: 'zone1'}"></div>
<div class="banner {zoneID: 1, source: 'zone2'}"></div>

При этом вызов следующего кода будет использовать параметры заданные в каждом элементе.

1
2
3
$('.banner').openxtag('zone', function () {
console.log('loaded ad');
});

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

Обновление 15 июля 2011. Версия 1.1

В новой версии плагина добавлена поддержка запроса к серверу OpenX с помощью Single Page Call, что позволяет получить рекламный код для всех зон на странице, используя всего один запрос к серверу. Пример кода, иллюстрирующий использование этой функции:

1
2
3
$('.banner').openxtag('spc', function () {
    console.log('loaded ad');
});

Кроме того добавлен тэг типа iFrame. Вызов его производится аналогично. Но дополнительно необходимо указать ширину и высоту баннерного места.

1
2
3
4
$('.banner').openxtag('iframe', 1, {
    width: 240,
    height: 400
});