Примерка Яндекс.Директа и Яндекс.Маркета на сайт

Консультируя между делом парнеров нашего ЦОПа по вопросам размещения и оформления рекламных блоков Директа, наткнулся на такую проблему: когда нет доступа к сайту, очень трудно «примерять» код вызова. Зачастую дашь какую-нибудь рекомендацию, партнер поставит код на сайт — а оно выглядит вовсе не так, как планировал. 8(

Решение проблемы оказалось тривиальным — достаточно браузера Mozilla Firefox со следующими двумя примочками:

1. Простенький букмарклет «Примерка Директа» — чтобы генерить HTML-код для вставки на страницу;
2. Плагин FireBug — для редактирования HTML-кода страницы «на лету»;

Для того, чтобы делать скриншоты и отправлять их партнерам мне удобно использовать плагин Screengrab и расширение для загрузки скриншотов на Яндекс.Фотки (ну или любой другой фотоаплоадер) — но вам вряд ли понадобится отправлять кому-либо эти скриншоты.

Установка букмарклета: тыкните правой кнопкой мыши на ссылку , нажмите «добавить в закладки» (или как это у вас называется?), сохраните закладку в удобное место (например, в панель закладок). Если браузер начнет ругаться, говорите ему, что так и надо. Букмарклет, по идее, должен быть совместим со всеми браузерами, но нас-то волнует FireFox. 8)

Как работает букмарклет?

1. Откройте конструктор кода в ЦОПе или в партнерском интерфейсе Яндекса и настройте блок так, как вам надо, дойдя до этапа «Оформление блока».
2. Запустите букмарклет прямо на странице конструктора (то есть нажмите на его ссылку/кнопку из закладок, не открывая новых окон).
3. Скопируйте полученный код (скриншот из Оперы; в FireFox все аналогично):
   
4. Полученный код можно «примерять» на странице — либо в FireBug’е (о чем ниже), либо в любимом HTML-редакторе:
   
   
   • Всё о слонах

     Морской слон (тюлень), белый слон (биржевая сделка), перевод на пять языков — на Яндекс.Словарях.

     slovari.yandex.ru
   • Продай слона

     Яндекс.Директ — система контекстной рекламы.Поможет продать всё, даже слона.

     direct.yandex.ru
   • Мнения о слонах

     Самые последние разговоры о слонах в интернете — читайте в поиске по блогам.

     blogs.yandex.ru

   Яндекс.Директ

   Все объявления

Как примерять код в FireBug’е? — покажу на примере главной страницы сайта ADLABS. На этот раз уже непосредственно в FireFox.

1. Находим нужный элемент на странице. Например, пусть это будет справа, над облаком тегов.
2. Тыкаем в него правой кнопкой мыши и жмем «Inspect Element» (эта опция должна была появиться после установки FireBug):
   

   При этом в нижней части экрана должна была открыться панель FireBug. Слева — дерево HTML-элементов, справа — CSS-свойства, им приписанные (см. скриншот ниже).

3. Двигаясь по дереву элементов вверх (к корню), находим тот элемент (в данном случае, это ячейка таблицы — он будет подсвечиваться в верхней части экрана), в который будем втыкать Директ и дважды кликаем по тегу:
   
4. В левой части панели получаем простой редактор HTML-кода, куда и вставляем полученный букмарклетом пример кода (после открывающего тега!):
   
5. Получается нечто типа такого (обратите внимание, что при редактировании HTML-кода можно не просто вставить пример Директа, но и дописать какие-нибудь теги вокруг — например, добавить ячеек таблицы и т. п.):
   

Понравился результат? Мне лично не очень. 8)

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

Для Яндекс-Маркета — все работает абсолютно аналогично.

Вопросы, багрепорты и прочие замечания, как всегда, приветствуются. 8)

PS. FireBug — очень мощная штука. Советую поковырять его — уверен, найдете много полезного.

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