Доклад Юрия Белякова на РИТ на тему “Кроссбраузерные решения в рекламной сети Яндекса”.
Контекстная реклама менее навязчивая, чем медийная, и она всегда удовлетворяет интересам пользователя. Размещение ее происходит путем вставки кода в тело страницы, и, в зависимости от параметров в коде вызова рекламного блока, - меняется и внешний вид объявления. Все библиотеки и функции подключаются внешним образом и кэшируются. Мы ничего не знаем о той странице, на которую ставится код. Мы не знаем какой режим совместимости будет задействован. Поэтому, разрабатывая код, мы учитываем специфику различных браузеров.
Вебмастеры бывают разные, и, хотя код вставляется копи-пейстом, человеческий фактор имеет место. Поэтому, нельзя скопировать только часть кода, плюс мы включаем обработку простейших ошибок вебмастера, допустим, неграмотное изменение исходного кода. Но так как код исполняется на стороне клиента, полностью мы не можем его защитить.
Блок резиновый, размеры шрифта можно менять с помощью браузера.
Для снижения вероятности конфликтов мы используем: префиксы, специальный ластик, инструкцию !important, длинные селекторы.
Например, мы используем нестандартную обрисовку иконок (телефонная трубка в объявлении): обрисовка иконок по-пиксельно, представление маски, использование функции, которая идет по этой маске и нужные ячейки закрашиваются нужным цветом.
Основной минус подобного решения - размер кода, который еще и не кэшируется. А плюс - то что, так как это не картинка, при отключенных изображениях - картинка не пропадет.
Что делать с сайтами на фреймах? Нам нужно определять то, что сайт сделан на фреймах, и самый большой фрейм по площади, который и будет главным - контентным. Получается, что нужно ждать до конца загрузки страницы? Есть ли вариант обойти это? Да - это событие DOMContentLoader для Mozilla и Opera и есть, найдены решения для IE и Safari. Эти решения позволили оптимизировать загрузку скрипов.
Следующее решение - динамический градиент. Мы решили дать возможность нашим пользователям заливать рекламный блок любым динамическим градиентом - с помощью элемента canvas и метода toDataURl(). Для IE нужно особое решение - фильтр gradient.
Вертикальные надписи: существуют блоки с фиксированной шириной, если мы располагаем надпись вертикально - мы существенно экономим место. Для IE используем поворот и отражение: wtiting-mode flipv() fliph(), а для остальных браузеров - формат SVG.
Дополнительные решения:
-выпрыгивание из iframe (защита от размещения кода через iframe с хорошей площадки рекламной сети на дорвеях и прочих некачественных сайтах)
-определение контрастности (для адекватного отображения)
-всплывающий баннер, который вне зависимости от места вставки - всегда позиционируется вверху страницы.
Вопрос из зала: в IE есть фильтр matrix который позволит реализовать поворот текста проще.
Ответ: Наши решения уже рабочие и были протестированы в различных браузерах. Но мы проверим.
Вопрос из зала: какая у вас политика в отношении firewall и других программ, которые режут рекламу, в том числе контекст?
Ответ: Да, пользователи закрывают, блокируют рекламу. Мы с этим бороться не планируем - мы только можем договариваться, чтобы функция блокировка рекламы была по умолчанию отключена. Сейчас же, допустим, в Касперском по умолчанию стоит галочка как раз на блокировке рекламы.
Вопрос из зала: ссылки на стать партнером - они выводятся сверху или снизу - кто это определяет?
Ответ: рекламные блоки имеют множество настроек, это делается на стороне пользователя.
Вопрос: сколько в среднем делается запросов? Насколько быстро работает система.
Ответ: Точные цифры мы не назовем. Но мы стараемся минимизировать все это - мы лучше не покажем рекламу вообще, чем затормозим работу сайта. Все картинки генерируются на стороне клиента и создаются динамически. Думаю, что в целом это порядка 6-7 запросов.
Вопрос из зала: что происходит при отсутствии java-script?
Ответ: если java-script отключен, то реклама показываться не будет. Нужно понимать, что нам как-то все-таки надо выводить рекламу, для этого мы должны использовать какую-то технологию, в данном случае java-script.
Презентацию доклада, со всеми примерами используемого кода, вы можете скачать с нашего сайта.
Обзор подготовила Екатерина Баукина.