Восстанавливаем ценовую справедливость в Директе

В веб-документах часто возникает ситуация, когда то, что в браузере выглядит выше, в коде страницы находится ниже. Это вызывает неприятные последствия в распределении блоков Яндекс-Директа: блок с более дорогими объявлениями может оказаться где-то там, где его плохо видно, а блок с более дешевыми объявлениями — на самом видном месте, что неправильно по целому ряду причин. Ниже предлагается решение, как восстановить справедливость. И как следствие — повысить цену клика в Директе!

Пояснение про примеры: друзья-Яндексоиды просили не вывешивать реальные страницы с рабочим кодом на всеобщее обозрение во избежание лишних кликов и искажений статистики. Поэтому ниже я публикую скриншоты, полный код страниц, с которыми вы можете поэкспериментировать самостоятельно на своей площадке (подставив свой yandex_partner_id вместо моего — 27416), кусочки кода, на которые следует обратить внимание, и, наконец, самодельную эмуляцию работы Директа (для наглядности — с задержкой загрузки). Скриншоты я снимал 24 ноября сего года с настоящих страниц с настоящим Директом. 8)

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

...
<table border="1"> табличка с четырьмя ячейками
   <tr>
      <td colspan="2"> ячейка для шапки с заголовком </td>
   </tr>
   <tr>
      <td ...> ячейка для меню
         [блок менюшных ссылок]
         <script type="text/javascript"><!-- [блок Директа под меню — 4 объявления, вертикальный]
         yandex_partner_id = 27416;
         ...
         document.write('<sc'+'ript ... src="http://an.yandex.ru/resource/context.js?rnd=' + ...
         //--></script>
      </td>
      <td ...> ячейка для основного контента
         [заголовок]
         <script type="text/javascript"><!-- [блок Директа над контентом — 2 объявления, плоский]
         yandex_partner_id = 27416;
         …
         document.write('<sc'+'ript ... src="http://an.yandex.ru/resource/context.js?rnd=' + ...
         //--></script>
         [основной контент страницы]
      </td>
   </tr>
   <tr>
      <td colspan="2"> подвальная ячейка </td>
   </tr>
</table>
...

Как видим, Яндекс-Директ размещен следующим образом: один блок (из 4 объявлений) находится под меню; еще один блок (из двух объявлений) находится над контентом. Не будем углубляться в вопросы о том, насколько хорошо и красиво такое размещение, и можно ли сделать его лучше. Важнее другое:

вызов блока, расположенного под меню, происходит раньше, чем вызов блока, расположенного над контентом;

и поэтому со стопроцентной уверенностью можно сказать, что:

клики по объявлениям в блоке под меню дороже, чем клики по объявлениям, расположенным над контентом.

Если непонятно, как связано расположение блоков и цена клика, то см. мой предыдущий пост или сразу правила показа из первоисточника.

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

Как это исправить? На самом деле, очень просто. Надо всего лишь поменять блоки местами. И для этого вовсе не надо переверстывать полсайта.

Пару месяцев назад в Рекламной сети Яндекса появился функционал, позволяющий избегать «подвисания» страниц из-за «притормаживания» или недоступности серверов, раздающих рекламные блоки (см. также мой предыдущий пост на эту тему). Собственно, суть этого функционала в том, что предлагается сначала сформировать почти всю страницу (за исключением закрывающих тегов), дождаться загрузки рекламного блока и только после этого воткнуть его в то место на странице, какое укажет вебмастер. Если блоков несколько, то после формирования и позиционирования первого блока аналогичным образом прогружается второй и переносится на свое место, потом — третий, и так далее. То есть мы буквально создаем блоки в конце документа и «пересаживаем» их в середину.

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

Поясню, как это сделано. В нужных местах расставлены «плейсхолдеры» для блоков Директа — пустые блоки с id="ya_direct_menu" и id="ya_direct_main". Сами вызовы блоков перенесен в самый конец документа; в каждый вызов дописаны две волшебные переменные yandex_direct_place = 'ya_direct_menu'; и yandex_direct_place = 'ya_direct_main';, которые как бы говорят нам, куда перевешивать блоки после загрузки: блок с yandex_direct_place = 'ya_direct_menu'; отправляется в тот самый <div id="ya_direct_menu"></div>, который мы повесили под менюшкой, а блок с yandex_direct_place = 'ya_direct_main'; переезжает в <div id="ya_direct_main"></div>, который сидит над контентом. Вот сокращенный код:

...
<table border="1"> табличка с четырьмя ячейками
   <tr>
      <td colspan="2"> ячейка для шапки с заголовком </td>
   </tr>
   <tr>
      <td ...> ячейка для меню
         [блок менюшных ссылок]
         <div id="ya_direct_menu"></div> [место для блока Директа под меню]
      </td>
      <td ...> ячейка для основного контента
         [заголовок]
         <div id="ya_direct_main"></div> [место для блока Директа над контентом]
         [основной контент страницы]
      </td>
   </tr>
   <tr>
      <td colspan="2"> подвальная ячейка </td>
   </tr>
</table>
<script type="text/javascript"><!-- [блок Директа под меню — 4 объявления, вертикальный]
yandex_direct_place = 'ya_direct_menu'; указываем на место вставки блока (под меню)
yandex_partner_id = 27416;
...
document.write('<sc'+'ript ... src="http://an.yandex.ru/resource/context.js?rnd=' + ...
//--></script>
<script type="text/javascript"><!-- [блок Директа над контентом — 2 объявления, плоский]
yandex_direct_place = 'ya_direct_main'; указываем место вставки блока (над контентом)
yandex_partner_id = 27416;
...
document.write('<sc'+'ript ... src="http://an.yandex.ru/resource/context.js?rnd=' + ...
//--></script>
</body>
</html>

А теперь вспоминаем про Принцип Распределения Цены за Клик в Яндекс-Директе:

Кто первый загрузился, тот и дороже.

Следовательно, единственное, что нам надо сделать — это поменять местами вызовы блоков.

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

...
<table border="1"> табличка с четырьмя ячейками
   <tr>
      <td colspan="2"> ячейка для шапки с заголовком </td>
   </tr>
   <tr>
      <td ...> ячейка для меню
         [блок менюшных ссылок]
         <div id="ya_direct_menu"></div> [место для блока Директа под меню]
      </td>
      <td ...> ячейка для основного контента
         [заголовок]
         <div id="ya_direct_main"></div> [место для блока Директа над контентом]
         [основной контент страницы]
      </td>
   </tr>
   <tr>
      <td colspan="2"> подвальная ячейка </td>
   </tr>
</table>
<script type="text/javascript"><!-- [блок Директа над контентом — 2 объявления, плоский]
yandex_direct_place = 'ya_direct_main'; указываем место вставки блока (над контентом)
yandex_partner_id = 27416;
...
document.write('<sc'+'ript ... src="http://an.yandex.ru/resource/context.js?rnd=' + ...
//--></script>
<script type="text/javascript"><!-- [блок Директа под меню — 4 объявления, вертикальный]
yandex_direct_place = 'ya_direct_menu'; указываем на место вставки блока (под меню)
yandex_partner_id = 27416;
...
document.write('<sc'+'ript ... src="http://an.yandex.ru/resource/context.js?rnd=' + ...
//--></script>
</body>
</html>

Объявления теперь загружаются в обратном порядке: сначала — для блока над контентом, потом — для блока под меню. Давайте убедимся в этом по скриншотам (скриншоты снимались сервисом browsrcamp.com, поэтому там совсем дешевые объявления с таргетингом, кажется, на Италию). Посмотрите на распроделение объявлений в табличке справа: первый и второй варианты дали один и тот же порядок объявлений; в третьем же варианте навязший у всех в зубах копеечный molotok.ru переехал из самого кликабельного места вниз, а, вероятно, более «щедрый» sweb.ru занял свое законное место.

Когда надо применять описанную методику?

Тогда, когда вы видите, что клики в более CTRистых (кликабельных) блоках на ваших сайтах (используйте срезы для анализа!) дешевле, чем в менее CTRистых блоках. См. также эту ветку форума MixMarket.BIZ, где Pavel применил эту методику на своем сайте, и, как кажется, остался доволен (кстати, спасибо ему за то, что натолкнул меня на написание этой статьи).

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

Еще пара замечаний

Во-первых, я рекомендую ставить коды Директа непосредственно перед всякими счетчиками, JS-вставками и прочими джаваскриптами от других систем размещения рекламы или статистики, чтобы появление Директа не задерживалось из-за их возможного притормаживания. В частности, если вы сочетаете Директ с Бегуном, то, возможно, стоит сначала вызвать блоки Директа, а потом уже блоки Бегуна (с применением «Мультиблока»; см. FAQ). Для других джаваскриптовых вставок можно применять описанную тут методику.

Во-вторых, при пересаживании блоков может происходить «подергивание» страницы. С одной стороны, это может привлекать внимание посетителя к рекламе. С другой стороны, это может раздражать. Поэтому не повредит позаботиться о том, чтобы то место, куда переносится блок Директа изначально было достаточного размера. Проще всего этого добиться с помощью размещения блоков фиксированного размера, предварительно задав размер «плейсхолдера» с помощью CSS (например, <div id="ya_direct_fixed" style="width:240px; height:400px"></div>). Для блоков свободного размера обычно можно задать приблизительную высоту с небольшим запасом.

И напоследок: ЦОП MixMarket.BIZ всегда рад новым партнерам. Приходите, научим еще много чему!

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