BannerLine HTML5(Swiffy)/flash/image - О сервисе ADFOX. О сервисе ADFOX

Баннеры

Требования к баннерам

Screenglide, expandable, fullscreen

BannerLine HTML5(Swiffy)/flash/image

Описание

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

Формат предполагает использование либо одного креатива, либо двух, когда нужен расхлоп. Расхлоп до креатива №2 происходит при наведении курсора мыши на креатив №1 без задержки (на десктопе), либо при таче по креативу №1 (на мобильной платформе). В случае расхлопа у креатива №2 может быть расположена кнопка Закрыть, при клике на которую баннер исчезает со страницы. В случае отсутствия расхлопа кнопка Закрыть может быть расположена у креатива №1.

На мобильной платформе кнопка Закрыть присутствует всегда либо у креатива №1 (без расхлопа), либо у креатива №2 (с расхлопом).

В баннер можно добавить от одного до трех типов креатива (HTML5(Swiffy)/flash/image). Каждый из типов креатива может быть заведен как самостоятельный фон или выступать в качестве заглушки для другого типа креатива.

При добавлении нескольких типов креатива они будут показываться следующим образом:

если в браузере есть поддержка HTML5, тогда в приоритете покажется swiffy-креатив;
если браузер не поддерживает HTML5 или креатив swiffy не добавлен в параметрах баннера — будет показываться flash-креатив;
если в браузере заблокирован flash-плагин или в параметрах не добавлен flash-креатив — покажется изображение.

Примечание. В том случае, если flash-плагин не заблокирован, а частично выключен, браузер устанавливает flash на паузу и вместо flash-ролика не сможет выгрузится картинка.

При клике по баннеру происходит переход на сайт рекламодателя. В баннере может быть несколько кнопок для перехода, ведущих на разные страницы.

Внимание. Прекращена поддержка сервиса Swiffy. Новые SWF файлы сконвертировать в HTML5-код нельзя. Но ранее сконвертированные файлы будут продолжать работать.

Пример баннера

Подготовка (для разработчиков)

Подготовка изображения. Подготовьте изображение (*.jpg, *.png, *.gif) с нужными размерами. Требования к файлам:
- Ограничение на размер: графические файлы (*.jpg, *.png, *.gif) — до 300 КБ.
  
  Для загрузки в баннер файлов, свыше указанных ограничений предусмотрено специальное поле с пометкой (URL), в котором указывается полный путь к файлу, расположенному на стороннем сервере.
- Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчеркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек, тире и специальных символов.

Подготовка flash-ролика. Нужно подготовить: flash-баннер (*.swf), размером до 300 КБ. Требования к файлам:

Ограничение на размер: Swf-файлы (flash-ролики *.swf) — до 300 КБ.

Для баннеров, состоящих из нескольких файлов, ограничения проверяются отдельно для каждого файла.

Для загрузки в баннер файлов, свыше указанных ограничений предусмотрено специальное поле с пометкой (URL), в котором указывается полный путь к файлу, расположенному на стороннем сервере.
Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчеркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек, тире и специальных символов.

Подготовка flash-баннера на ActionScript 3.0 с расхлопом. Требования к среде разработки: ActionScript 3.0 и FlashPlayer не ниже 9.0

Flash-ролик №1:

Создайте верхний слой

2. Скопируйте код и вставьте его в первый кадр главного таймлайн:

import flash.external.ExternalInterface;
var flashVars = this.root.loaderInfo.parameters;
var initBanner = initBanner || false;
if (!initBanner) {
    stop();
    initBanner = true;
    setInterval(function() {
        var status = ExternalInterface.call("af_bannerLineGetStatus_" + flashVars.af_rnd, 1);
        if (status == 'stop') {
            stop();
            gotoAndStop(1);
        } else if (status == 'start') {
            gotoAndPlay(1);
        }
    }, 50);
}

Flash-ролик №2:

Создайте верхний слой и разместите в нем прозрачную кнопку для перехода на сайт, которой присвойте имя экземпляра (Instance Name) btn.

Скопируйте код и вставьте его в первый кадр главного таймлайн:

import flash.events.MouseEvent; //для перехода
import flash.net.navigateToURL; //для перехода
import flash.net.URLRequest; //для перехода
import flash.external.ExternalInterface;
var flashVars = this.root.loaderInfo.parameters;
var initBanner = initBanner || false;
btn.addEventListener(MouseEvent.CLICK, adFoxClickHandler); //для перехода
function adFoxClickHandler(evt: MouseEvent) { //для перехода
    navigateToURL(new URLRequest(flashVars.af_reference + "@" + flashVars.af_link), flashVars.af_target); //для перехода
} //для перехода
if (!initBanner) {
    stop();
    initBanner = true;
    setInterval(function() {
        var status = ExternalInterface.call("af_bannerLineGetStatus_" + flashVars.af_rnd, 2);
        if (status == 'stop') {
            stop();
            gotoAndStop(1);
        } else if (status == 'start') {
            gotoAndPlay(1);
        }
    }, 50);
}

Подготовка flash-баннера на ActionScript 3.0 без расхлопа. Требования к среде разработки: ActionScript 3.0 и FlashPlayer не ниже 9.0

Flash-ролик №1. В ролике обязательно должен присутствовать следующий код:

import flash.events.MouseEvent; //для перехода
import flash.net.navigateToURL; //для перехода
import flash.net.URLRequest; //для перехода
import flash.external.ExternalInterface;
var flashVars = this.root.loaderInfo.parameters;
var initBanner = initBanner || false;
btn.addEventListener(MouseEvent.CLICK, adFoxClickHandler); //для перехода
function adFoxClickHandler(evt:MouseEvent) { //для перехода
    navigateToURL(new URLRequest(flashVars.af_reference + "@" + flashVars.af_link), flashVars.af_target); //для перехода
} //для перехода
if (!initBanner) {
    stop();
    initBanner = true;
    setInterval(function () {
        var status = ExternalInterface.call("af_bannerLineGetStatus_"+flashVars.af_rnd, 1);
        if (status == 'stop') {
            stop();
            gotoAndStop(1);
        } else if (status == 'start') {
            gotoAndPlay(1);
        }
    }, 50);
}

Для создания нескольких кнопок перехода

Создание flash-ролика на ActionScript 3.0. Требования к среде разработки: ActionScript 3.0 и FlashPlayer не ниже 9.0.

Допустим, на сцене есть три кнопки(мувиклипа) с именами btn_1, btn_2, btn_3. Создайте объект, содержащий переменные FlashVars:

var flashVars:Object = this.loaderInfo.parameters;

Добавьте обработчик событий клика по кнопкам:

btn_1.addEventListener(MouseEvent.CLICK, onClickFirstButton);
btn_2.addEventListener(MouseEvent.CLICK, onClickSecondButton);
btn_3.addEventListener(MouseEvent.CLICK, onClickThirdButton);

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

Первый вариант — без подсчета переходов с каждой кнопки

import flash.events.MouseEvent; //для перехода
import flash.net.navigateToURL; //для перехода
import flash.net.URLRequest; //для перехода
import flash.external.ExternalInterface;
var flashVars = this.root.loaderInfo.parameters;
var initBanner = initBanner || false;
btn_1.addEventListener(MouseEvent.CLICK, onClickFirstButton);
btn_2.addEventListener(MouseEvent.CLICK, onClickSecondButton);
btn_3.addEventListener(MouseEvent.CLICK, onClickThirdButton);   
//для перехода
 function onClickFirstButton(evt: MouseEvent) { //для перехода
    navigateToURL(new URLRequest(flashVars.af_reference + "@" + "http://www.site.ru/page1.html"), flashVars.af_target); //для перехода
} //для перехода
function onClickSecondButton(evt: MouseEvent) { //для перехода
    navigateToURL(new URLRequest(flashVars.af_reference + "@" + "http://www.site.ru/page2.html"), flashVars.af_target); //для перехода
} //для перехода function onClickThirdButton(evt: MouseEvent) { //для перехода
    navigateToURL(new URLRequest(flashVars.af_reference + "@" + "http://www.site.ru/page3.html"), flashVars.af_target); //для перехода
} //для перехода
 if (!initBanner) {
    stop();
    initBanner = true;
    setInterval(function() {
        var status = ExternalInterface.call("af_bannerLineGetStatus_" + flashVars.af_rnd, 2);
        if (status == 'stop') {
            stop();
            gotoAndStop(1);
        } else if (status == 'start') {
            gotoAndPlay(1);
        }
    }, 50);
}

Второй вариант — с подсчетом переходов с каждой кнопки

import flash.events.MouseEvent; //для перехода
import flash.net.navigateToURL; //для перехода
import flash.net.URLRequest; //для перехода
import flash.external.ExternalInterface;
var flashVars = this.root.loaderInfo.parameters;
var initBanner = initBanner || false;
btn_1.addEventListener(MouseEvent.CLICK, onClickFirstButton);
btn_2.addEventListener(MouseEvent.CLICK, onClickSecondButton);
btn_3.addEventListener(MouseEvent.CLICK, onClickThirdButton);   
//для перехода
function onClickFirstButton(evt: MouseEvent) { //для перехода
    navigateToURL(new URLRequest(flashVars.af_reference + "@" + flashVars.event_1), flashVars.af_target); //для перехода
} //для перехода
function onClickSecondButton(evt: MouseEvent) { //для перехода
    navigateToURL(new URLRequest(flashVars.af_reference + "@" + flashVars.event_3), flashVars.af_target); //для перехода
} //для перехода
function onClickThirdButton(evt: MouseEvent) { //для перехода
    navigateToURL(new URLRequest(flashVars.af_reference + "@" + flashVars.event_3), flashVars.af_target); //для перехода
} //для перехода
if (!initBanner) {
    stop();
    initBanner = true;
    setInterval(function() {
        var status = ExternalInterface.call("af_bannerLineGetStatus_" + flashVars.af_rnd, 2);
        if (status == 'stop') {
            stop();
            gotoAndStop(1);
        } else if (status == 'start') {
            gotoAndPlay(1);
        }
    }, 50);
}

Примечание. Вместе с готовым flash-роликом и ссылками для перехода сообщите заказчику, какие номера событий используются в баннере для каждой кнопки перехода.

Подготовка Swiffy. Swiffy — это google-конвертер flash в HTML5.
Внимание. Прекращена поддержка сервиса Swiffy. Новые SWF файлы сконвертировать в HTML5-код нельзя. Но ранее сконвертированные файлы будут продолжать работать.
1. Flash-баннер должен быть сделан по требованиям, указанным выше.
2. Перейдите по ссылке и сконвертируйте Flash-ролик в HTML5-код.
3. Полученный код необходимо преобразовать, для этого используйте Генератор кода
  Примечание. В связи с тем, что flash не поддерживается на мобильных устройствах и может быть выключен, а HTML5 поддерживается не во всех версиях браузеров, рекомендуется использовать в баннере все 3 креатива.

Подсчет событий

Подсчет событий в баннерах flash реализован через вызов переменных event_1 … event_20.

Для кода swiffy события необходимо указать в исходном flash-ролике.

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

для ActionScript 2.0:loadMovieNum(_root.event_N,300);

для ActionScript 3.0:

import flash.net.sendToURL;
import flash.net.URLRequest;
var flashVars:Object = this.root.loaderInfo.parameters;
sendToURL( new URLRequest(flashVars.event_N) ) , где N - это номер события, число от 1 до 20.

Информацию об используемых номерах событий и их названий (что считает данное событие) рекомендуем передавать вместе с готовым flash-роликом для установки в систему управления рекламой.

В случае подготовки flash-ролика с подсчетом событий по каждой кнопке нужно назначить ссылки перехода для каждой из кнопок на вкладке События при добавлении баннера в ADFOX, в поле URL перехода соответствующего события. Из поля Cобытие 1 ссылка будет передаваться в качестве значения для event_1 в баннере.

События, которые уже используются в шаблоне

Примечание. Нельзя использовать события с 21 по 30, так как они уже используются в шаблоне.

Баннер закрыт (Событие 21) — пользователь нажал на кнопку Закрыть;

Для показа выбран swiffy (Событие 22) - добавлено 2 swiffy креатива и браузер поддерживает <canvas>;

Для показа выбран flash (Событие 23) — добавлено 2 flash-креатива, отсутствуют swiffy-креативы и в браузере включен flash-плагин (flash может быть на паузе);

Для показа выбрана картинка (Событие 24) — добавлено 2 картинки, отсутствуют flash и swiffy креативы;

Показан Swiffy (Событие 25) — означает, что файлы с креативами загрузились, и правильно выгрузились на страницу, подразумевается что swiffy-ролики запустятся. В идеале должно совпадать с событием Для показа выбран swiffy;

Показан Flash (Событие 26) — означает, что HTML с запросами за SWF-роликами попал на страницу, подразумевается что flash-ролики запустятся;

Показана картинка (Событие 27) — означает, что HTML-код с запросами за картинками попал на страницу, подразумевается что картинки отобразятся;

Количество авторасхлопов (Событие 28) — количество авторасхлопов данного креатива;

Количество расхлопов (Событие 29) — количество расхлопов креатива, суммируется из расхлопов по действию пользователей и авторасхлопов;

Количество схлопов (Событие 30) — количество схлопов креатива.

Добавление в ADFOX

Чтобы добавить баннер в ADFOX выберите нужный тип баннера и шаблон BannerLine HTML5(Swiffy)/flash/image [Sync Async].

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

« TARGET » ссылки — параметр, определяющий в каком окне открывать ссылку:
- _blank — загружает страницу в новое окно браузера;
- _self — загружает страницу в текущее окно.
Ссылка на промерочный пиксель — укажите ссылку на промерочный пиксель для подсчета показов в сторонней системе управления рекламой.
Ссылка перехода — укажите ссылку на сайт рекламодателя.
Подготовленный swiffy креатив №1 — ссылка на файл *.js, в схлопнутом виде, созданный с помощью Генератора кода.
Подготовленный swiffy креатив №2 — ссылка на файл *.js, в расхлопнутом виде, созданный с помощью Генератора кода.
Flash-креатив №1 — ссылка на файл *.swf, в схлопнутом виде.
Flash-креатив №2 — ссылка на файл *.swf, в расхлопнутом виде.
Изображение №1 — ссылка на изображение, в схлопнутом виде.
Изображение №2 — ссылка на изображение, в расхлопнутом виде.
Цвет фона подложки (#000000|rgba(0,0,0,0.4)|transparent) — цвет фона под креативом, заполняющий область полей баннера и плашку кнопки Закрыть. Так же отвечает за область наведения, при которой будет происходить схлоп/расхлоп (на десктопах):
- если значение не указано, для расхлопа необходимо наведение мыши на креатив, для схлопа необходимо, отведение указателя мыши с креатива или кнопки Закрыть (при ее наличии);
- если значение указано, для расхлопа необходимо наведение мыши на сам баннер или на еuicontrolЗакрыть (при ее наличии);
- если указано значение вида transparent, поведение будет, как и в случае если значение указано, но поля и панель кнопки Закрыть будут прозрачны.
Ширина креатива №1 (100% или px) — ширина креатива (одна для всех типов креатива).
Высота креатива №1 (100% или px) — высота креатива (одна для всех типов креатива).
Цвет фона креатива №1 (#000000 или transparent) — цвет фона, который будет установлен как цвет фона креатива №1.
Ширина креатива №2 (100% или px) — ширина креатива (одна для всех типов креатива).
Высота креатива №2 (100% или px) — высота креатива (одна для всех типов креатива).
Цвет фона креатива №2 (#000000 или transparent) — цвет фона, который будет установлен как цвет фона креатива №1.
Позиция (по умолчанию bottom) — сторона, к которой будет прижата перетяжка (bottom, top, left, right). Сдвиг контента осуществляется автоматически при указании позиции top или bottom (при расхлопе сдвиг контента не осуществляется).
Количество авторасхлопов (по умолчанию 0) — количество показов в расхлопнутом виде при загрузке страницы на время сессии в одном браузере.
Время сессии авторасхлопа (по умолчанию 20) — время (в часах), в течение которого будет действовать настройка количества авторасхлопов, начиная с первого авторасхлопа.
Пример. Указано 5 авторасхлопов, после того как появился первый, включается время сессии, например, 20 часов, тогда в течении этого времени могут показываться остальные авторасхлопы но не больше указанного количества.
Авторасхлоп всегда (по умолчанию no) (yes|no) — yes — баннер всегда будет показываться в расхлопнутом виде, счетчик авторасхлопов крутится не будет, и сессия инициализирована тоже не будет.
Показывать кнопку Закрыть(по умолчанию no) (yes|no) — наличие кнопки Закрыть, поверх формата в расхлопнутом виде.
Изображение кнопки Закрыть — файл-изображение, который будет использоваться в виде кнопки Закрыть.
Ширина кнопки Закрыть (по умолчанию 40 px) — ширина изображения кнопки Закрыть.
Высота кнопки Закрыть (по умолчанию 40 px) — высота изображения кнопки Закрыть.
Положение кнопки Закрыть (по умолчанию right) (left|right) — положение кнопки Закрыть над креативом, только для Позиций bottom и top. right — верхний правый угол, left — левый верхний угол.
Z-index (по умолчанию 9999999) — z-index, который будет применен формату.

Добавление кода вставки на сайт

Код вставки для баннера BannerLine разместите сразу после открывающего тега <body>.

Была ли статья полезна?

Расскажите, что вам не понравилось в статье:

Banner Slider

Fullscreen HTML5

В этой статье

Описание Подготовка (для разработчиков)Подсчет событий Добавление в ADFOX

Banner Slider

Fullscreen HTML5