Peel-down (уголок)

Описание

Peel-down (уголок) — небольшой баннер, не привязанный к дизайну сайта, имитирующий отгибание края бумаги. Может располагаться в углу экрана браузера. Занимает мало места в свернутом состоянии. Когда по нему кликают — разворачивается и демонстрирует большой баннер, закрывая при этом контент страницы.

Баннер этого типа состоит из двух flash-роликов. Первый flash-ролик, в котором реализуется отгибающийся уголок. Его можно закрыть, если кликнуть по нему, тогда он развернётся до большого баннера. Второй ролик (большой баннер) — свободно растягиваемый flash-ролик. Может быть на весь экран. По нему можно кликнуть и перейти на сайт рекламодателя, можно закрыть.

Подготовка баннера

Подготовьте два flash-ролика.

Первый flash-ролик — сам уголок, который видит посетитель сайта сначала. Размер этого ролика должен быть определён, например 100 px на 100 px (у вас может быть другой размер), он должен быть прозрачным на всей открытой части баннера.

В ПЕРВЫЙ фрейм вашего первого flash-ролика впишите скрипт:

function go_next () {
   getURL("javascript: ar_gonext();")
   }

Далее сделайте элемент button. Для этого элемента напишите следующий скрипт:

on( release ){
_root.go_next()
}

Второй flash-ролик — большой баннер, демонстрирующий рекламную информацию. Он свободно растягивается.

В ПЕРВЫЙ фрейм вашего второго flash-ролика впишите скрипт:

function clk (url) {
   var href = _root.link1;
   if ((typeof(url)!="undefined")&&(url!="null"))
        if (url.toUpperCase().indexOf("HTTP://")==0)
                 href += escape(url);
  getURL(href,_root.target)
  getURL("javascript: ar_clearall();")
} 
function kill () {
   getURL("javascript: ar_kill();")
}

В самом баннере две активных зоны (их может быть больше, но, как минимум, две).

Переход на сайт рекламодателя — элемент button на нём ActionScript:

on( release ){
_root.clk()
}

Если нужно осуществить переход не на тот адрес, который указан в интерфейсе системы, то впишите необходимый URL в качестве параметра:

on( release ){
_root.clk("http://www.example.com")
}

Кнопка закрытия ролика — элемент button на нём ActionScript:

on( release ){
_root.kill()
}

Кнопка закрытия маленького ролика, при необходимости, делается по такому же принципу.

/****** Editable block ******/ //corner var ar_corner = 'ar_corner_template'; var ar_w = 'ar_w_template'; var ar_h = 'ar_h_template'; //main var ar_body = 'ar_body_template'; var ar_body_w = 'ar_body_w_template'; var ar_body_h = 'ar_body_h_template'; var ar_flashver = ar_flashver_template; var ar_target = 'ar_target_template'; // required! either ID, or ClassName of block or null for body var ar_treat = ar_treat_template; // true - target is block ID, false - it is block ClassName var leave_corner = leave_corner_template; //true - leave corner after click, false - hide (by default) var ar_pix = 'ar_pix_template'; // zeropixel if need /************************ Do not touch below ********************************************************/ function ar_rnd_rep(s){return s.replace(/!\[rnd\]/g,RndNum4NoCash)} function ar_p(p,v){return typeof v=='undefined' ? '' : p + '=' + v} function ar_flver(d,n,m,f){ n=navigator;f='Shockwave Flash'; if((m=n.mimeTypes)&&(m=m["application/x-shockwave-flash"])&&m.enabledPlugin&&(n=n.plugins)&&n[f]){d=n[f].description} else if(window.ActiveXObject){try{d=(new ActiveXObject((f+'.'+f).replace(/ /g,''))).GetVariable('$version')}catch(e){}} return d?d.replace(/\D+/,'').split(/\D+/)[0]:0; } function ar_send_pix(p){ if(document.createElement&&document.body){ var i=document.createElement('img'); i.style.position='absolute';i.style.width=i.style.height='0px'; i.src=p; document.body.insertBefore(i,document.body.firstChild); } else{new Image().src = p} } function ar_event(e){ var src='http://ad.adriver.ru/cgi-bin/event.cgi?bs=76&type=' + e + ar_p('&bid', bid) + ar_p('&bt', ar_bt) + ar_p('&ad', ar_adid) + ar_p('&ntype', ar_ntype) + ar_p('&nid', ar_nid) + ar_p('&sid', ar_siteid) + ar_p('&rnd', RndNum4NoCash) + ar_p('&sliceid', sliceid); ar_send_pix(src) } function ar_ie_fix(o){if(document.all){o=o.childNodes[0];o.outerHTML=o.outerHTML;o.Play()}} function ar_switch(n,o){n.style.display='block';o.style.display='none'} function ar_kill(){ar_clearall();ar_event(2)} function ar_clearall(){if(leave_corner==true){ar_iscorner=true;ar_switch(ar_handle_1,ar_handle_2);ar_ie_fix(ar_handle_1)}else ar_handle_2.style.display='none'} function ar_gonext(){ar_iscorner=false;ar_switch(ar_handle_2,ar_handle_1);ar_ie_fix(ar_handle_2)} function ar_getTHandle(){if(ar_target==null)return null;ar_t_handle=ar_treat?document.getElementById(ar_target):ar_getClass(ar_target);return ar_t_handle} function ar_u(o){return typeof o=="undefined"} function ar_i(o){return !o||/^http:\/\//i.test(o)?o:CompPath+o} ar_corner=ar_i(ar_rnd_rep(ar_corner)); ar_body=ar_i(ar_rnd_rep(ar_body)); var ar_containerId='ar_container_'+bid; var ar_handle_1,ar_handle_2,ar_iscorner=true,ar_t_handle=false,ar_container=ar_getTHandle(); function ar_o(id, src, w, h){ var f='link1='+escape(CgiHref + '&rleurl=') + ar_p('&target', Target.indexOf('_top') != -1 ? '_top' : '_blank') + ar_p('&ar_comppath', escape(CompPath)) + ar_p('&ar_bid', bid) + ar_p('&ar_bt', ar_bt) + ar_p('&ar_ad', ar_adid) + ar_p('&ar_nid', ar_nid) + ar_p('&ar_rnd', RndNum4NoCash) + ar_p('&ar_ntype', ar_ntype) + ar_p('&ar_sliceid', sliceid) + ar_p('&ar_sid', ar_siteid); var p=function(n,v){return '<param name='+n+' value="'+v+'">'} var html='<object id="'+id+'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+w+'" height="'+h+'">' +p('movie',src + (src.indexOf('?')==-1 ? '?' : '&') + f) +p('play','true') +p('loop','true') +p('allowScriptAccess','always') +p('wmode','transparent') +p('quality','high') +p('flashvars',f) +'<embed name="'+id+'" type="application/x-shockwave-flash" src="'+src+'" width="'+w+'" height="'+h +'" play=true loop=true wmode=transparent allowScriptAccess=always quality=high menu=false flashvars="'+f+'"></embed></object>'; return html } function ar_getClass(c){ var t=document.body.getElementsByTagName('*'); var n,r=new RegExp("(^|\\s)"+c+"(\\s|$)"); for(var i=0,l=t.length;i<l;i++){ n=t[i].className; if(n.length==0)continue; if(n==c||n.match(r))return t[i] } return null } if (ar_flver()>=ar_flashver){ if(ar_pix){ ar_send_pix(ar_rnd_rep(ar_pix)); } var s='<div id="'+ar_containerId+'_1" style="position: absolute; right: 0px; top: 0px;">'+ar_o('ar_cflash',ar_corner,ar_w,ar_h)+'</div>'; s+='<div id="'+ar_containerId+'_2" style="position: absolute; right: 0px; top: 0px; display: none;">'+ar_o('ar_bflash',ar_body,ar_body_w,ar_body_h)+'</div>'; if(ar_container)ar_container.innerHTML+=s; else document.write(s); ar_event(0); ar_handle_1 = document.getElementById(ar_containerId+'_1'); ar_handle_2 = document.getElementById(ar_containerId+'_2'); }

Чтобы получить скрипт для вашего баннера, заполните форму:

Первый flash-ролик (уголок):
Ширина первого flash-ролика (уголка):
Высота первого flash-ролика (уголка):
Второй flash-ролик:
Ширина второго flash-ролика:
Высота второго flash-ролика:
Версия flash-плагина (необходима версия flash-плагина не ниже восьмой):	8 9 10
Идентификатор блока, к которому будет привязан баннер:
По какому атрибуту искать блок, в котором будет отображаться баннер:	id classname
Не скрывать уголок после показа большого баннера:	Не скрывать Скрывать
Вызов стороннего зеропикселя:
Нажмите на кнопку
Скрипт для вашего баннера:

Создайте новый текстовый файл. Для этого в операционной системе Windows:

• нажмите на кнопку Пуск;
• щелчком мыши последовательно выберите пункты Все программы — Стандартные — Блокнот.

Скопируйте текст скрипта для вашего баннера и вставьте в созданный файл. Сохраните файл с именем script.js.

Пояснения к полям формы.

• Первый flash-ролик (уголок) — впишите ваше имя файла. Если вы загружаете flash-ролик со стороннего сервера, впишите полный адрес, начинающийся с «http://». В последнем случае, загружать файл через интерфейс системы не нужно.
• Ширина первого flash-ролика (уголка) — впишите ваше значение. Этот параметр должен соответствовать размерам вашего ролика.
• Высота первого flash-ролика (уголка) — впишите ваше значение. Этот параметр должен соответствовать размерам вашего ролика.
• Второй flash-ролик — впишите ваше имя файла. Если вы загружаете flash-ролик со стороннего сервера, впишите полный адрес, начинающийся с «http://». В последнем случае, загружать файл через интерфейс системы не нужно.
• Ширина второго flash-ролика — впишите ваше значение. Этот параметр должен соответствовать размерам вашего ролика.
• Высота второго flash-ролика — впишите ваше значение. Этот параметр должен соответствовать размерам вашего ролика.
• Версия flash-плагина — выберите минимальную версию flash-плагина, необходимую посетителю для просмотра flash-роликов. Необходима версия flash-плагина не ниже восьмой (8).
• Идентификатор блока, к которому будет привязан баннер — впишите id блока или сlassname блока. Если вы хотите, чтобы баннер был привязан к <BODY>, то впишите null.
• По какому атрибуту искать блок, в котором будет отображаться баннер — выберите id или сlassname блока.
• Не скрывать уголок после показа большого баннера — выберите Не скрывать, если уголок остается видимым после показа большого баннера или Скрывать, если уголок скрывается после показа большого баннера.
• Вызов стороннего зеропикселя — впишите ссылку на пиксель-аудит. Если не нужен, оставьте пустым.

Внимание! Если баннер привязан к блоку, то обязательно указывайте в параметрах блока position: relative или position: absolute, так как баннер позиционируется в правый верхний угол относительно блока.

Требования

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

Не указывайте в интерфейсе для javascript баннеров (и для этого тоже) русский альтернативный текст.

Загрузка баннера

Добавьте баннер типа javascript. Кликните по ссылке «загрузить баннер» и загрузите script.js и подготовленные flash-ролики.

Проверка работоспособности

Проверьте баннер, в том числе, что он кликается по обоим flash-роликам.

Примечания:
• рекомендуем ставить код javascript в самый конец документа, после тега </html>, чтобы код не мешал грузиться странице даже при плохой связи с AdRiver;
• возможно ограниченное воспроизведение баннера в операционных системах семейства Linux. Вы можете отключить показы баннера пользователям Linux в таргетинге по Браузерам и Операционным Системам в сценариях.

Ограничения на размер загружаемых файлов в системе AdRiver

• для обычных графических файлов (в интерфейсе обозначены img width x height) — 50 Кб;
• для swf-файлов (в интерфейсе обозначены flash width x height) — 75 Кб;
• другие типы файлов — 50 Кб;
• для многокомпонентных баннеров ограничения проверяются отдельно для каждой составляющей.

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

Пример

Баннер располагается в произвольном месте страницы (привязка к блоку) и остается видимым после показа большого баннера.

Использование пиксель-аудита в flash-баннерах.