Произвольное оформление контекстных рекламных блоков на примере Яндекс Директ

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

Итак, о чем я хочу рассказать и показать сегодня. Для вас я полностью разобрал по составным частям исходный код вывода объявлений, т.е. их верстка, стили, классы. Выделил все важные элементы кода и даже показал это очень подробно на скриншотах. Это будет понятно даже тем людям, кто не разбирается в тонкостях html и css, а кто разбирается, смогут творить что-нибудь нестандартное.

Ну вот как-то так, приступим?

Для примера я взял свой сайт acerfans.ru, на нем и будем «пилить».

Вот так выглядит изначально блок Яндекс Директ:

Оригинальный блок Яндекс Директ

Теперь давайте взглянем на исходный код этого блока:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<script type="text/javascript">
//<![CDATA[
yandex_partner_id = 38127;
yandex_site_bg_color = 'FFFFFF';
yandex_site_charset = 'windows-1251';
yandex_ad_format = 'direct';
yandex_direct_type = 'horizontal';
yandex_direct_limit = 2;
yandex_direct_title_color = '4074a4';
yandex_direct_url_color = '222222';
yandex_direct_all_color = '2A71D6';
yandex_direct_text_color = '222222';
yandex_direct_hover_color = 'CC0000';
yandex_direct_favicon = true;
yandex_stat_id = 2;
document.write('<sc'+'ript type="text/javascript" src="http://an.yandex.ru/system/context.js"></sc'+'ript>');
//]]>
</script>
 
<!-- тут начинается все самое интересное -->
<script type="text/javascript" src="http://an.yandex.ru/system/context.js"></script>
<link rel="stylesheet" type="text/css" href="http://an.yandex.ru/resource/context_r495.css">
<script type="text/javascript" src="http://an.yandex.ru/resource/context_static_r495.js" yandex_load_check="yes"></script>
<style type="text/css">
#y5_direct2 .y5_ad div a {color: #4074a4 !important;}
#y5_direct2 .y5_ad div {color: #222222 !important;}
#y5_direct2 .y5_ad span, #y5_direct2 .y5_ad span a {color: #222222 !important;}
#y5_direct2 .y5_all a, #y5_direct2 .y5_how a {color: #2A71D6 !important;}
#y5_direct2 .y5_ad div a:hover {color: #CC0000 !important;}
#y5_direct2 .y5_icon em {background-color: #222222 !important;}
</style>
 
<div id="y5_direct2" class="y5 y5_nf y5_horizontal snap_noshots">
	<div class="y5_bb y5_ads2 y5_no_warnings y5_exp0">
		<div class="y5_h">
			<div class="y5_all">
				<span><a class="snap_noshot" href="http://direct.yandex.ru/search?from=http://acerfans.ru/&amp;ref-page=38127" target="_blank">Все объявления</a></span>
			</div>
			<div class="y5_ya">
				<span class="y5_black"><em>Я</em>ндекс</span>
				<span class="y5_black y5_bg"><a class="snap_noshots" href="http://direct.yandex.ru/?partner" target="_blank">Директ</a></span>
			</div>
		</div>
		<table class="y5_ads">
		<tbody>
		<tr>
			<td class="y5_item">
				<div class="y5_ad">
					<div class="ad-link">
						<img onload="if (this.width &gt; 1) {this.className = 'y5_favicon';}" src="//favicon.yandex.net/favicon/www.memory-market.ru" alt=""><a class="snap_noshot" href="http://an.yandex.ru/count/Swnq38iruti40000ZhcmfDK4XPzE2PK2cm5kGoi1CuYcMGq4YQFuEWIOZ2UU0PsL_4kMeD7vkPAiR3W5YglBoWAbaTWzaRIvRsCDZxCMZve2dxKx1UKBauKDeZQPCukgskOFGeoGr32Wa4Kpf80WUmm0?stat-id=2&amp;test-tag=1073873983" target="_blank">Флешки - USB flash drive</a>
					</div>
					<div>Огромный выбор USB-флэшек. USB flash drive под логотип. MEMORY-MARKET.ru</div>
					<span class="url">www.memory-market.ru&nbsp;&nbsp;·&nbsp; Москва</span>
				</div>
			</td>
			<td class="y5_nbsp"><div></div></td>
			<td class="y5_item">
				<div class="y5_ad">
					<div class="ad-link">
						<img onload="if (this.width &gt; 1) {this.className = 'y5_favicon';}" src="//favicon.yandex.net/favicon/www.100zakazov.ru" alt="" class="y5_favicon"><a class="snap_noshot" href="http://an.yandex.ru/count/Swnq350Egi440000ZhcmfDK4XPzE2PK2cm5kGoi1D8YeJe42YQSqSYkOZ2UU0PsQRmIMeD7vkPAXiWOLYgRNhmwbdBmEaRIvRsCDZxCMZve2dxKx1UKBauKDeZQPCukbSjkLGeoGJ1sWaDGmf80WUmm0?stat-id=2&amp;test-tag=1073873983" target="_blank">Флешки оптом под Ваш логотип</a>
					</div>
					<div>Более 15 000 актуальных товаров. Доставка по Москве. Приятные цены.</div>
					<span class="url">
					<ins class="y5_icon">
					<em style="left:8px!important;top:3px!important;width:3px!important"></em>
					<em style="left:7px!important;top:4px!important;width:5px!important"></em>
					<em style="left:6px!important;top:5px!important;width:5px!important"></em>
					<em style="left:12px!important;top:5px!important;width:1px!important"></em>
					<em style="left:5px!important;top:6px!important;width:3px!important"></em>
					<em style="left:9px!important;top:6px!important;width:1px!important"></em>
					<em style="left:11px!important;top:6px!important;width:1px!important"></em>
					<em style="left:4px!important;top:7px!important;width:3px!important"></em>
					<em style="left:10px!important;top:7px!important;width:1px!important"></em>
					<em style="left:3px!important;top:8px!important;width:3px!important"></em>
					<em style="left:2px!important;top:9px!important;width:3px!important"></em>
					<em style="left:2px!important;top:10px!important;width:4px!important"></em>
					<em style="left:2px!important;top:11px!important;width:3px!important"></em>
					<em style="left:6px!important;top:11px!important;width:1px!important"></em>
					<em style="left:3px!important;top:12px!important;width:1px!important"></em>
					<em style="left:5px!important;top:12px!important;width:1px!important"></em>
					<em style="left:4px!important;top:13px!important;width:1px!important"></em>
					</ins>
					<a class="snap_noshot" href="http://an.yandex.ru/count/Swnq33hvMim40000ZhcmfDK4XPzE2PK2cm5kGoi1D8YeJe42YQSqSYkOZ2UU0PsQRmIMeD7vkPAXiWOLYgRNhmwbdBmEaRIvRsCDZxCMZve2dxKx1UKBauKDeZQPCukhSjkLGeoGJ1sWaDGmf80WUmm0?stat-id=2&amp;test-tag=1073873983" target="_blank">Адрес и телефон</a>&nbsp;&nbsp;·&nbsp; www.100zakazov.ru&nbsp;&nbsp;·&nbsp; Москва</span>
				</div>
			</td>
		</tr>
		</tbody></table>
	</div>
</div>

Получая код для вставки на сайт в своем ЦОП’е, вам нет так много и разрешено менять: помимо формата, типа, количества объявления и favicon, только цвета заголовка, текста, url’а. И все! Но мы-то знаем, что это далеко не все.
Кстати, вы заметили, что иконка телефонной трубки около надписи «Адрес и телефон» рисуется попиксельно! Я офигел, когда первый раз увидел!

Сейчас давайте наглядно посмотрим, какие элементы и стили за что отвечают:

class="y5 y5_nf y5_horizontal snap_noshots"

class="y5_h"

class="y5_all"

class="y5_ya"

class="y5_ads"

class="y5_item"

class="y5_nbsp"

class="y5_item"

class="y5_ad"

class="ad-link"

class="y5_favicon"

class="snap_noshot"

div

class="url"

class="y5_icon"

class="snap_noshot"

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

1
2
3
4
5
6
7
#ya_direct .y5_all a {} /* "все объявления" */
#ya_direct .y5_ya em {} /* "Я" */
#ya_direct .y5_ya a {} /* "ндекс Директ" */
#ya_direct .ad-link a {} /* "Флешки оптом под Ваш логотип" */
#ya_direct .y5_ad div {} /* "Более 15 000 актуальных товаров. Доставка по Москве. Приятные цены." */
#ya_direct .y5_ad span {} /* "www.100zakazov.ru  •  Москва" */
#ya_direct .y5_ad span a {} /* "Адрес и Телефон" */

Теперь-то все понятно?! Перечисленное выше надо вставить в ваш основной css файл. В фигурных скобках пишем размер шрифта, его оформление и все, что может быть необходимо, не забываем про !important перед закрывающей фигурной скобкой. #ya_direct – это id который надо прописать в div, внутрь которого вы будете вставлять код Директа, выданного вам Яндексом изначально.

Примерно так:

1
2
3
4
5
<div id="#ya_direct" class="">
	<script type="text/javascript">
	...
	</script>
</div>

Информации предостаточно чтобы начать свои эксперименты, так чего же вы ждете ;) Если есть какие-то вопросы или предложения, пишите, не стесняйтесь.

PS Если вас «запалят» с вашим «творчеством», то, скорее всего, сделают предупреждение, но первое и единственное. Если вы не вернете стили к их исходному виду, далее последует бан. Проверено на себе и не только.

PPS В исходном коде есть еще одна интересная деталь, которую, я уверен, вы заметили. Да-да, это файл http://an.yandex.ru/resource/context_r495.css! Я его, по понятным причинам разбирать не буду, а вы, если хотите сломать свой мозг, поковыряйте на досуге. Я поковырял, признаюсь — не понравилось.

PPPS Ништяк я придумал картинку к посту, да ведь? Кто не смотрел фильм Пила (все части, их целых 7) очень рекомендую. Оно того стоит. Мы с Катюхой уже 3 раза все части пересматривали. Каждый раз как в первый раз!

Постовой: Ребята, seo — оно и в Африке SEO. Но про smo никак не стоит забывать ;)

Александр «АлаичЪ» Алаев
Александр «АлаичЪ» Алаев

Вот уже 18 лет я профессионально занимаюсь созданием и продвижением сайтов и 13 лет с удовольствием пишу в любимый блог. Создал заслужившие доверие в seo-сообществе программы FastTrust и ComparseR и известный сервис для проверки траста сайтов CheckTrust.ru.

В 2014 основал веб-студию «АлаичЪ и Ко» в Краснодаре: 1 место в рейтинге агентств интернет-маркетинга (Рейтинг Рунета), 2 место в рейтинге SEO-компаний (CMSmagazine), 12 место в рейтинге известность бренда SEO-компаний в России (SeoNews).

Выступаю на профильных конференциях (All In Top, SEO Conference, SEMPRO, Baltic Digital Days). Веду канал в telegram про seo и бизнес. SEO-специалист года 2019 и 2020 (Sape).

Ерунда и баянЪ!Зачет! Плюсую!
+2

Профессиональный технический аудит и рекомендации по оптимизации вашего сайта.
Тот самый необходимый «фундамент» для успешного продвижения.

30 000 руб.

Комплексный подход к решению поставленных задач: достижение топ-10 и увеличение трафика на сайт. В стоимость уже включены полный технический аудит и оптимизация сайта.

45 000 руб.

У вас недостаточно знаний и нужны ответы на вопросы?
Интересует мнение эксперта или надо проверить подрядчика?
Вы задаете вопрос — я отвечаю!

5 000 руб./час

Проведу подробное исследование вашего сайта и основных конкурентов, опубликую материал на блоге для обсуждения и коллективного поиска новых идей.

70 000 руб.

Я начал запись своего обучающего курса по seo-продвижению.

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

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

Комментарии: 20 Написать комментарий
  1. Евгенич (84 комм.)

    Иллюстрация к статье выше всяких похвал.

    Ответить
  2. Юрко Блогер (5 комм.)

    Давно не видел столько картинок в мануале! Уже использовал инфу под себя.

    Ответить
  3. Дмитрий Лебедь (1 комм.)

    Отличный мануал, Саш) С РСЯ еще не сотрудничаю, но в будущем понадобиться. Давно в аське тебя не видел...

    Ответить
    • АлаичЪ

      Спасибо. Я думаю, это не может не понадобиться ;) Без этого максимально вписаться в дизайн не получится. Хотя у себя на блоге я данный метод не применял.

      PS Я в аське каждый день кроме выходных... Странно, что ты меня не видишь.

      Ответить
  4. Никита Buzzman (16 комм.)

    Простите, я, как верстальщик со стажем, надеялся на большее, нежели простое изменение css.

    Однако при прочтении статьи сам вывел для себя пару полезностей и даже написал WP-плагин для упрощения вставки кода Яднекс.Директ внутрь статьи.

    Ответить
    • АлаичЪ

      Хм... А чего же тут не хватает? Что есть это самое "большее"? Что я упустил?

      Ответить
      • Никита Buzzman (16 комм.)

        К примеру, какие либо легальные методы, позволяющие привлечь больше внимания на блоки рекламы с целью повышения CTR и заработка. Есть такое?

        Ответить
        • АлаичЪ

          Опасаться санкций стоит только при посещаемость не ниже 10к в сутки. Иначе можете крутить-вертеть ;)

          Из легальных методов — экспериментирование с местом размещения, размером шрифта (стандартными методами), цветовым решением.

          Но это и так все знают, не так ли ;)

          Ах да, еще — количество объявлений в блоке. Я недавно повысил прибыльность контекста на 30% только тем, что изменил количество объявлений. Было два блока с 3 объявлениями в блоке. Оставил так же два блока, но с двумя объявлениями, и шрифт чуток увеличил.

          Ответить
  5. antonio (1 комм.)

    Вот это инфа, появилась идея как неплохо поднять ctr, спасибо за ифу

    Ответить
  6. nserg (2 комм.)

    Кто не смотрел фильм Пила (все части, их целых 7) очень рекомендую. Оно того стоит. Мы с Катюхой уже 3 раза все части пересматривали. Каждый раз как в первый раз!

    Да вы маньяк батенька... ну в смысле кибер-маньяк. А задумка с увеличением шрифта это полезно, положительные моменты записал, Спасибо

    Ответить
    • DarkPrinceArtes (1 комм.)

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

      Ответить
      • nserg (2 комм.)

        а как же нога на картинке?

        Ответить
  7. алексей (1 комм.)

    Да, прям Колумб, кстати такое же и с гугловским блоком проделать можно (и с санкциями мягше) да и вообще со многм такое провернуть можно. Сильно удивлен тем что столько народу об этом не знало и выразило (в том числе и якобы верстальщик со стажем) интузиазизм.

    З.Ы. Чет как то с явным негативом пост получился. Сори если обидел кого.

    Ответить
    • Никита Buzzman (16 комм.)

      " и якобы верстальщик со стажем" — действительно обидел) В оправдание хочу сказать, что "при прочтении статьи сам вывел для себя" новое не в плане изменения css блока, а просто зародилась мысль интересная.

      Ответить
  8. mccats (6 комм.)

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

    Ответить
  9. Владислав (1 комм.)

    Хороший пост. Спасибо. Картинка прикольная: "Яндекс Директ. Игра на выживание".

    Ответить
  10. han (1 комм.)

    Что-то не работают у меня эти стили, может с момента написания статьи поменялась структура блоков?

    Ответить
    • АлаичЪ

      Да, там уже много раз все поменялось...

      Ответить
  11. Adward (1 комм.)

    Нормально так в примере статьи прописано:

    id="#ya_direct"

    голову сломаш пока # нашёл ))))

    сейчас то — всё изменили они? не акутальна инфа уж...

    Ответить
  12. kotkem (1 комм.)

    Установил, но у меня реклама показывает только для зарегистрированных пользователей, а когда выходишь с личного кабинета, то нет рекламы. Бред какой-то. Подскажите пожалуйста, как решить проблему?

    Ответить