Реклама без тормозов, или Еще раз про джаваскрипты

Ранее я уже писал про методику переноса рекламных блоков. Напишу еще раз — с примерами и прочим. Часть текста придется повторить.

Прежде всего, зачем это надо. Все мы знаем, что код большинства систем контекстной (и не очень контекстной) рекламы вставляется посредством джаваскриптов. При этом само тело джаваскрипта хранится не на сайте-площадке, а непосредственно на серверах рекламной сети. Так вот: каким бы хорошим хостингом и скоростными серверами не располагала данная рекламная сеть, все равно невозможно добиться того, чтобы у всех пользователей всегда был хороший коннект к рекламному серверу. А если возникает задержка в выполнении скрипта, то очень часто это приводит к тому, что медленно грузится сама страница-площадка. Поэтому ниже предлагается простенький хак для того, чтобы избежать медленной загрузки. Теоретически он должен подходить к большинству систем рекламы, использующих джаваскриптовые вставки.

Пример такой тормозящей страницы.

В чем заключается проблема: пока не прогрузился и не исполнился джаваскрипт, страница не продолжает отрисовываться браузером.

Решение: грузить джаваскрипты уже после того, как отрисован весь контент.

Плохой пример такого решения.

Что тут неприятно: если всю рекламу запихать в конец кода страницы, и если сайт сайт сверстан не слишком хитроумно, то придется удовлетвориться рекламой в подвале. А это не есть хорошо, потому что денег хочется. 8)

Тогда придется поднапрячься и сделать так, чтобы блоки из «подвала» «переезжали» на нужное место. Как именно это делается, я уже писал. Повторю вкратце.

1. В местах, где надо разместить рекламные блоки, пишем простенькие div‘ы-«заглушки» и присваиваем им уникальные id, например, <div id="adv_place_1"></div>. На самом деле, вместо div‘ов при необходимости можно использовать любые другие теги, но необходимость такая случается редко.
   
   
2. В самом конце страницы вывешиваем все наши рекламные коды внутри других div‘ов. Этим div‘ам мы тоже присваиваем уникальные id, например, <div id="adv_block_1"><!-- код вызова рекламы --></div>.
   
   
3. Под каждым из блоков дописываем джаваскриптик, который будет заниматься пересадкой каждого div‘а с рекламой в положенный ему div-зуглушку:
   <script type="text/javascript">
<!--
document.getElementById('adv_place_1').appendChild(document.getElementById('adv_block_1'));
//-->
</script>

Пример.

Побочный эффект: при «пересадке» блоков страница заметно дергается. Избежать во всех случаях нельзя. Частично можно — попросту заранее задав высоту div‘а-заглушки через свойство CSS height (код добавить в header страницы или в подключаемый stylesheet):
<style type="text/css">
#adv_place_1, #adv_place_2, #adv_place_3 {height: 3.25em;}
</style>
Это хорошо работает, когда мы заранее хотя бы примерно знаем высоту рекламного блока. Пример. Небольшое подергивание все же есть, но не столь заметное. Обратите внимание, что этот фокус может приводить к некрасивым наложениям блоков друг на друга. В частности — в случае Яндекс-Директа. Об этом — ниже.

Все вышеописанное отлично работает со следующими форматами:

• МиксМаркетовские «Контекстный товар» и «Микс-Объявления» (кстати, новая программа!). Пример.
  
  
• Бегун-Автоконтекст. впрочем, для Бегуна есть и другое решение.
  
  
• Google-AdSense. Пример для Гугла и Бегуна (если Бегун не покажется — не смертельно: я в другом месте тоже проверял).
  
  
• Яндекс-Директ и Яндекс-Маркет — c 11 сентября 2008 года есть официальное решение. Приведенным ниже пользоваться не рекомендую. Я его тут оставляю просто на память. 8)
  Тут есть определенная проблема: в Опере напрочь «слетают» стили с объявлений, а в FireFox блоки могут налезать на текст. Посмотрите пример в разных браузерах. Разберем проблемы подробнее.

  1. Проблема высоты блока решается тремя путями:
     1. Не задавать высоту div‘ов-заглушек вообще. Пусть у нас все дергается — все равно ведь совсем без дергания не получится.
     2. Если мы используем фиксированные форматы, то мы заранее знаем высоту блока. Например, в моем примере используется блок высотой 90px (нижний), и выше он ни при каких условниях стать не должен.
     3. Подшаманить пересаживающий джаваскрипт так, чтобы высота div‘ов-заглушек сбрасывалась при пересаживании (первая строка — как и раньше, вторая — добавлена):
        <script type="text/javascript">
<!--
document.getElementById('adv_place_1').appendChild(document.getElementById('adv_block_1'));
document.getElementById('adv_place_1').style.height='auto';
//-->
</script>
  2. Проблема «слетающих» стилей тоже решается. Но для этого нам потребуется поставить Оперу и добавить к ней плагин Opera Developer Console.
     Дальше действуем так:
     1. Открываем нашу страницу с размещенным на ней искореженным Яндекс-Директом. К этому моменту внешний вид Директа должен быть настроен, поскольку поменять его потом будет непросто.
     2. Запускаем на ней Developer Console и видим примерно то, что показано на левой картинке ниже.
     3. Последовательно разворачивем узлы, нажимая на плюсик, и добираемся до начала первого блока Директа и находим там узел LINK (см. среднюю картинку).
     4. Подключаем к нашей странице его атрибут HREF:
        <link href="http://an.yandex.ru/resource/context_1x27c.css" type="text/css" rel="stylesheet" />
     5. Аналогично добираемся до начала блока Директа и находим там узел STYLE (см. правую картинку).
     6. Копируем содержимое этого узла (в нижней панели) и вставляем в таблицу стилей нашей страницы (в раздел <style type="text/css"> или во внешний stylesheet).
     7. Повторяем пункты 5–6 для каждого блока Директа и наслаждаемся результатом (в этом примере специально «причесан» скорпированный из Developer Console css-код; на самом деле, «причесывать» его не обязательно).

     Картинки:
     

  3. Добавлено: последнее нововведение Яндекса с учетом только реальных показов не будет корректно работать с «пересаженными» блоками Яндекс.Директа. Пример. Если присмотритесь внимательно к активности браузера (или включите какой-нибудь LiveHTTPHeaders), то увидите, что при пролистывании через объявления ничего не происходит, а вот когда вы доматываете страницу до самого конца (там, где, собственно, «зародились» блоки), происходит обращение к счетчику показов.
     Таким образом, велик шанс, что показы наших «пересаженных» блоков просто не будут засчитываться (если пользователь не докрутит страницу до конца), и, следовательно, не будут учтены клики по ним.

     Решение тривиальное: надо сделать так, чтобы блоки «зарождались» не внизу страницы, а вверху. Для этого оборачиваем все наше шаманство внизу страницы в еще один блок: <div id="adv_bring_up">...</div>, добавляем строчку в таблицу стилей: #adv_bring_up {position:absolute; top:0;}. Все работает, как и прежде, но (проверьте LiveHTTPHeaders’ом) счетчик срабатывает сразу же после загрузки страницы. Пример.
     Теперь осталась мелочь: наш блок некрасиво мигает вверху страницы. Тут можно еще подшаманить с CSS, например, так: #adv_bring_up {position:absolute; top:0; left:-1000px; width:900px;}. Пример.

     Важно понимать, что, во-первых, если вы хотите поменять внешний вид блоков, то вам, скорее всего, придется повторить все указанные действия еще раз, во-вторых, в любой момент Яндекс может сменить верстку блоков, и вам придется снова все это проделать, и, наконец, что тут мы значительно вмешиваемся в поведение блоков Яндекс-Директа, а, значит, мы никак не можем гарантировать, что указанные выше или аналогичные действия не приведут к блокировке площадки. Короче, действуйте, но на свой страх и риск.

Эта инструкция написана специально для партнеров MixMarket.BIZ — партнерской сети и центра обслуживания партнеров Рекламной сети Яндекса.
Приходите к нам — мы и не такому научим! 8)

Написано 19.03.2008 для раздела mixmarket. Следить за комментариями (RSS 2.0).