В определённый момент от инструмента «Ротатор баннеров» может потребоваться немножко больше гибкости, чем он обычно предоставляет. Что, если возникнет ситуация, когда генерации простой текстовой ссылки или картинки/флэш-баннера со ссылкой будет недостаточно?

Например, нужно выводить картинку, но ссылкой должен быть только определённый участок на изображении. Или в баннер нужно добавить картинку, текст и отдельную ссылку, переход по которой нужно отслеживать. Может потребоваться, в конце-концов, рекламный блок, похожий на блоки Google AdSense или Яндекс.Директ — с несколькими ссылками.

Именно в угоду таким требованиям разработчиками системы Ucoz добавили в механизм ротатора баннеров возможность создавать баннеры типа «Полный код». Используя баннер такого типа вы сможете отображать в рекламном блоке: изображения, флэш, текст, таблицы, заголовки, блоки и так далее; любые их комбинации или все сразу. Можно даже сказать, что баннеры такого типа помогут реализовать любую — самую потаённую — фантазию. А данное руководство поможет такую фантазию вызвать (надеюсь, что так).

Плюсы и минусы

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

Единственный минус такого подхода: так получилось, что количество переходов по ссылкам в этом типе баннеров подсчитать невозможно. При определённых условиях это может стать трагедией для человека, публикующего рекламу на своём сайте, лишая его информации о том, насколько эффективен данный рекламный блок.

Какой тогда смысл использовать баннеры такого типа?

Не всё так плохо. Поводов для паники нет. Используя небольшую хитрость, можно отслеживать переходы по любым ссылкам внутри баннера с типом «Полный код».

Для того, чтобы фиксировать клики по ссылкам, нужно будет создать для каждой ссылки отдельный баннер с типом «Текстовая ссылка». Я рассчитываю на то, что читатель уже знаком с принципами работы инструмента «Ротатор баннеров» и ему не потребуется объяснять, как открыть данный инструмент, как создать новый баннер определённого типа и как его внедрить в код шаблона. Поэтому, будем считать, что данное руководство не предназначено для начинающих пользователей системы Ucoz.

Решение

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

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

Рис. 1. Эти баннеры будут отвечать за подсчёт кликов

Прелесть ссылок такого типа состоит в том, что по ним можно фиксировать переходы, даже не выводя их содержимое на страницу. Именно в этом и состоит хитрость, о которой упоминалось немного ранее. Нужно будет выделить из этой ссылки адрес, который будет фиксироваться системой как переход, который будет отображаться в статистике переходов инструмента «Ротатор баннеров». Я кликаю по ссылке «Как начать играть в EVE Online» в списке ссылок категории «Отслеживаемые ссылки» и копирую в буфер обмена код вызова из появившегося окна.

Во всём этом коде интерес представляет только «http://мой.сайт/rtr/5-17». Для получения адреса будет использоваться именно это значение.

Если открыть этот адрес в браузере, можно увидеть, что с помощью JavaScript в документ запишется ссылка, при клике по которой произойдёт перенаправление пользователя на указанный в настройках баннера адрес, и одновременно система зафиксирует факт перехода, добавив это значение к общему количеству переходов по данной ссылке.

Это значит, что можно использовать адрес «http://мой.сайт/rtr/5-17-1» в качестве HREF-аттрибута любой ссылки (даже обычной ссылки внутри обычного материала), переход по которой нужно учитывать. Чтобы множество раз не просматривать содержимое скрипта, выступающего в роли кода баннера, можно заметить особенность: к значению атрибута «src» в листинге 1 можно добавить суффикс «-1», чтобы получить параметр «href» из листинга 2, или, другими словами, «5-17» трансформируется в «5-17-1».

Практикум

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

Ситуация первая. Ссылка в тексте

Время от времени требуется вставить рекламную ссылку в текст обычного материала. Хорошо, если вы участвуете в какой-нибудь партнёрской программе и сможете зафиксировать факты перехода в соответствующем интерфейсе соответствующего сайта-партнёра. Но бывает и так, что партнёр не даёт возможность получить доступ к подобной статистике, либо учитывает только те переходы, после которых пользователь проделал определённые действия (например, зарегистрировался). Или, например, нужно создать рекламный блок с текстом, в котором встречается рекламная ссылка.

Для ситуации со ссылкой в тексте материала уже есть все необходимые данные: немного ранее в этом тексте была создана целая категория с такими ссылками. И всё, что потребуется — преобразовать код вызова текстового баннера в требуемую ссылку. Будем считать, что я пишу новость на сайте, в которой мне нужно «прорекламировать» страницу с картинками из игры, которой и посвящён мой сайт. При подготовке категории баннеров «Отслеживаемые ссылки» я уже создал соответствующую ссылку — «Галерея EVE Online». Кликнув на её названии я получаю код:

После выделения адреса я получаю значение «http://мой.сайт/rtr/5-26-1». Теперь, при написании материала я могу использовать это значение в качестве ссылки:

Если читатель переходит по ссылке, в статистике обновляется соответствующая информация в разделе «Отслеживаемые ссылки».

Рис. 2. Есть контакт!

Количество же просмотров для данной ссылки в панели инструментов скорее всего будет постоянно равняться нулю, ведь эта ссылка предназначена только для учёта кликов. Количество просмотров можно узнать на странице с материалом, где эта ссылка публиковалась — большинство шаблонов системы Ucoz разработаны таким образом, чтобы выводить подробную информацию в конце текста. Если ссылка использовалась в нескольких материалах, то количество её просмотров будет равняться сумме просмотров этих материалов.

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

Ситуация вторая. Области для карт-изображений

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

Рис. 3. Тут будет маппинг изображения

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

Я получил замечательный баннер, при этом ссылкой для него являлась только прямоугольная область с координатами «1,1,172,58», как становится видно из листинга №5. Но при проверке работоспособности области-ссылки, созданной HTML-тегом «map», я столкнулся с проблемой, которая заставила меня запаниковать: а ведь переходы-то по ссылке никак не считаются!!! Из-за моей склонности заниматься микроменеджментом (я с этим борюсь) я не смог быть в курсе совершенно всех событий, происходящих с данным баннером. Да и какой человек не согласится, что любой уважающий себя баннер должен в панели управления отчитываться, сколько раз его посмотрели и сколько раз по нему кликнули.

Решая этот вопрос я и нашёл идею, которая лежит в основе данного руководства: для отображения используется один баннер, для учёта кликов — другой.

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

Теперь в панели управления напротив этого баннера я буду видеть количество показов, а статистика кликов будет отображаться напротив текстового баннера, из которого я выделил ссылку «http://мой.сайт/rtr/3-5-1».

Ситуация третья. Рекламный блок с несколькими ссылками

При взгляде на рекламные сети вроде «Google AdSense» или «Яндекс.Директ», может возникнуть мысль: «А почему бы не сделать подобное на своём сайте? А ведь я же могу создать огромную баннерную сеть и зарабатывать на этом миллиарды долларов! Или, хотя бы, я могу просто сделать симпатяшный рекламный блок и продвигать в нём всё, что хочу (и как хочу)». (На самом деле, я ещё ни разу подобных вещей не делал, но имею мысли, как это организовать.)

Перво-наперво, лучше представить, как же это будет выглядеть в итоге: «Эмм... Ну... Это будет как бы горизонтальный прямоугольник с шириной... ну пусть 500 пикселей... высота... эээ... да не важно в принципе. Что там внутри?.. внутри будет три блока с рекламой, которые будут выбираться из списка баннеров случайным образом. Всё, наверное. Нет! Пусть внизу будет надпись вроде „рекламная сеть моего сайта“! Вроде теперь всё,» — витают мысли, которые превращаются в итоге в набросок:

Рис. 4. Идея классная. Нужно попробовать её реализовать

Для начала было бы неплохо подготовить штук 10 текстовых баннеров-ссылок, которые будут отвечать за подсчёт кликов (именно из них будут выделяться ссылки), и столько же баннеров типа «Полный код», которые будут отвечать за вывод материалов и учёт количества просмотров. Как видно из Рис. 1, 10 ссылок для учёта кликов у меня уже есть. Теперь осталось создать 10 полного кода баннеров.

Создавая набросок (Рис. 4) я планировал, что баннер будет шириной в 500 пикселей с чёрным цветом фона и границей в 1 пиксель цветом #323232 или RGB(50,50,50), а каждый из трёх блоков в нём будет шириной в 153 пикселя, что позволит уместить в 500 пикселей как раз три таких блока с необходимыми отступами в 10 пикселей для каждого. Пусть расчёты не так точны — в данный момент будет достаточно и этого. Далее — внутри рекламного блока текст заголовка будет белый, полужирный, подчёркнутый, размером 14 пикселей (да простит меня Артемий Лебедев за пиксели в шрифте); текст описания — белый, обычного начертания, 11 пикселей; текст ссылки — серый (#ABABAB или RGB(171,171,171)), без подчёркивания, 9 пикселей; название баннера внизу — серый (#ABABAB или RGB(171,171,171)), обычного начертания, 9 пикселей с тёмно-серым фоном (#323232 или RGB(50,50,50)).

Для удобства я выделю из текстовых баннеров нужные мне ссылки и закину их куда-нибудь вроде Excel, чтобы прописать содержимое соответствующих им баннеров типа «Полный код». Я получил примерно такую таблицу:

Составление этой таблицы — кропотливый процесс, который потребует немного больше аккуратности и внимания, чем обычно бывает нужно. Смысл её в том, чтобы в дальнейшем использовать эти значения при конструировании полно-кодового баннера. Например, значения из графы «Название» можно будет использовать в качестве заголовка в рекламном блоке; колонка «Адрес материала» подойдёт для текста ссылки под описанием, а данные из «Ссылки для учёта кликов» будут использоваться в качестве адреса в заголовке и ссылке под описанием. Обратите внимание, что в колонке «Адрес материала» я сознательно убрал префикс «http://». Это сделано затем, чтобы текст ссылки под описанием выглядел удобнее с точки зрения когнитивности восприятия.

После окончания работы над таблицей необходимо в инструменте «Ротатор баннеров» панели управления сайтом Ucoz создать новую категорию баннеров, назвав её, например, «Рекламная сеть сайта.домена». В эту категорию и будут вноситься полно-кодовые баннеры, а содержимое каждого из этих баннеров будет напоминать код, представленный в листинге №7.

Рассмотрим немного подробнее этот листинг. Вторая строка отвечает за отображение заголовка рекламного блока. По совместительству, заголовок является ссылкой (в этот момент я ориентировался на подход, реализованный в «Google AdSense»). Атрибут «href="http://мой.сайт/rtr/5-21-1"» берётся из колонки «Ссылка для учёта кликов» таблицы №1; значение «Урон от NPC» — из столбца «Название» (желательно делать текст заголовка максимально коротким, чтобы он уместился в одну строку).

Третья строка листинга содержит описание — короткий текст, который должен раскрыть смысл заголовка. Вместо «Чем стрелять, чем защищаться и чего опасаться, воюя с NPC.» прописывается нужная информация. Опять же, нужно стараться, чтобы текста было не так много — на 2-3 строки.

В четвёртой строке выводится текст ссылки под описанием. Атрибут «href="http://мой.сайт/rtr/5-21-1"» берётся из колонки «Ссылка для учёта кликов», а значение «мой.сайт/publ/5-1-0-48» из столбца «Адрес материала».

Настраивая подобным образом все требуемые полно-кодовые блоки, получаем контент, ротация которого будет в итоге осуществляться. В итоге можно получить что-нибудь вроде изображённого на Рис. 5 ниже.

Рис. 5. Список полно-кодовых баннеров в категории

После подготовки баннеров (подготовка всех баннеров — ещё более кропотливый процесс, чем составление таблицы №1 ) нужно настроить блок, который будет внедряться в шаблон. Примерный код этого блока приведён в листинге №8.

Интерес в данном случае представляют строки 2, 3 и 4. Они одинаковы. Но именно в этом и состоит смысл: одна строка один раз вызывает случайный баннер из категории с полно-кодовыми баннерами. При разработке прототипа планировалось, что они будут отображаться по три штуки за раз. Поэтому код вызова баннеров указывается три раза. На Рис. 5 около названия категории есть ссылка «Получить код». Именно этот код будет использоваться в листинге №8 в строках 2-4.

Внедрив код из листинга №8 в нужное место шаблонов страницы/модуля/сайта получаем примерно такой баннер:

Рис. 6. Итоговый блок с рекламой

Остаются только мелкие доработки, вроде вынесения части HTML-кода в таблицу стилей CSS для облегчения кода, замены пикселей на пункты в указании размера шрифта и прочее «соль, перец — по вкусу», выходящее за рамки данного руководства.

Заключение

Ротатор баннеров — замечательный способ организовать на своём сайте показ рекламы. Для большинства нужд хватит баннеров типов: «Изображение», «Флэш» и «Текстовая ссылка», однако, если требуется создать что-то действительно мощное или необычное, баннеры типа «Полный код» помогут всегда. А используя методы, представленные в данном руководстве, вы сможете избавиться от небольшого недостатка этого типа баннеров — невозможность отслеживать переходы по ссылкам.

Баннеры, Ротатор баннеров

• Ротатор баннеров