[Edit] Image Map

Image Map – это графическое изображение, части которого являются гиперссылками. Другими словами, вы можете сделать отдельные части баннера ссылками на разные страницы. Вся трудность заключается в том, чтобы правильно перенести код в Adfox. Чтобы баннер показывался, и чтобы по баннеру собиралась нужная статистика.

Разберём сначала такой пример:

"imageMap"

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

Из программы, генерирующий HTML код для Image Map мы получили следующее:

<map name="Map" id="Map">
<area shape="poly" coords="45,15,59,126,165,111,150,3" href="http://community.livejournal.com/dewarist/3771.html" target="_blank" alt="Антон Носик" />
<area shape="poly" coords="10,101,7,188,92,191,93,120,58,126,57,101" href="http://community.livejournal.com/dewarist/4110.html" target="_blank" alt="Алексей Зимин" />
<area shape="poly" coords="103,177,114,118,166,111,161,84,218,98,202,194,103,177" href="http://community.livejournal.com/dewarist/2652.html" target="_blank" alt="Николай Усков" />
<area shape="poly" coords="79,264,71,189,91,189,91,166,108,163,103,175,164,186,171,255" href="http://community.livejournal.com/dewarist/3877.html" target="_blank" alt="Артемий Лебедев" />
<area shape="poly" coords="10,314,25,221,75,230,81,263,110,260,98,329" href="http://community.livejournal.com/dewarist/3348.html" target="_blank" alt="Николай Качурин" />
<area shape="poly" coords="112,333,113,260,171,256,169,234,209,234,208,332" href="http://community.livejournal.com/dewarist/4643.html" target="Сергей Минаев" />
<area shape="poly" coords="74,416,52,325,64,322,98,331,102,311,112,308,112,334,144,332,161,395" href="http://community.livejournal.com/dewarist/4396.html" target="_blank" alt="Эркин Тузмухамедов" />
</map>

Для того, чтобы загрузить код в Adfox нужно внести некоторые изменения в код. Эти требования, вообще говоря, относятся ко всем баннерам, которые вы загружаете через сторонний код.

Итак, создаём рекламную кампанию «Image Map» (ну или с любым другим названием) и сначала добавляем файл с картинкой будущего баннера. Теперь у нас есть ссылка на нужное изображение.

Далее добавляем в кампанию новый баннер следующим образом. Выбираем, например, стандартный «240х400». Далее шаблон «HTML».

""

В поле HTML код вставляем следующий код:

<map name="Map" id="Map">
<area shape="poly" coords="51,22,63,131,167,119,153,9" href="%reference%@%event1%" target="_blank" />
<area shape="poly" coords="25,213,28,133,107,136,103,216" href="%reference%@%event2%" target="_blank" />
<area shape="poly" coords="125,211,108,139,180,124,195,197" href="%reference%@%event3%" target="_blank"/>
<area shape="poly" coords="73,281,142,274,135,209,126,211,124,205,103,208,104,217,67,215" href="%reference%@%event4%" target="_blank" />
<area shape="poly" coords="81,340,12,330,23,258,73,266,73,281,90,279" href="%reference%@%event5%" target="_blank" />
<area shape="poly" coords="118,337,120,276,143,274,140,263,194,265,190,341" href="%reference%@%event6%" target="_blank" />
<area shape="poly" coords="82,397,67,336,81,339,82,329,120,318,119,335,131,338,144,381" href="%reference%@%event7%" target="_blank" />
</map>
<div style="background-color:#000;width:100%;text-align:center">
<a href="%reference%" target="_blank">
<img src="http://banners.adfox.ru/090731/gazeta/5964/gazeta_zimintop.jpg" width="224" height="419" border="0" usemap="#Map" />
</a>
</div>

Итак, опишем изменения:

Прямые ссылки мы заменяем на переменные %reference%, для того чтобы у нас подсчитывались переходы. Проблема состоит в том, что %reference% это то же самое, что URL перехода. Он один для баннера. И если бы мы оставили только эту переменную, пользователь попадал бы на одну и ту же страницу.

Поэтому, как только зафиксирован переход по всему баннеру, переадресовываем пользователя с помощью @%event1%. То есть мы задаём переход на какую-то конкретную страницу как событие. URL перехода прописываем на вкладке Баннеры -> События.

""

Далее прописываем вручную адрес изображение, а среди прочих атрибутов используем usemap="#Map".
Более простой пример использования Image Map может быть такой: на баннере есть отдельная деталь, при нажатии на которую осуществляется переход.