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-код нельзя. Но ранее сконвертированные файлы будут продолжать работать.

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

  1. Подготовка изображения.

    Подготовьте изображение (*.jpg, *.png, *.gif) с нужными размерами.

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

    Ограничение на размер:

    Графические файлы (*.jpg, *.png, *.gif) — до 300 Кб.

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

    Названия файлов:

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

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

    Что необходимо подготовить:

    Flash-баннер (*.swf), размером до 300Кб;

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

    Ограничение на размер:

    Swf-файлы (flash-ролики *.swf) — до 300 Кб.

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

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

    Названия файлов:

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

    Подготовка flash-баннера на ActionScript 3.0 с расхлопом

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

    Flash-ролик №1:

    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:

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

    2. Скопируйте код и вставьте его в первый кадр главного таймлайн:
    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-роликом и ссылками для перехода сообщите заказчику, какие номера событий используются в баннере для каждой кнопки перехода.
  3. Подготовка 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].

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

  1. «TARGET» ссылки — параметр, определяющий в каком окне открывать ссылку:
    • _blank — загружает страницу в новое окно браузера;
    • _self — загружает страницу в текущее окно.
  2. Ссылка на промерочный пиксель — укажите ссылку на промерочный пиксель для подсчета показов в сторонней системе управления рекламой.
  3. Ссылка перехода — укажите ссылку на сайт рекламодателя.
  4. Подготовленный swiffy креатив №1 — ссылка на файл *.js, в схлопнутом виде, созданный с помощью Генератора кода.
  5. Подготовленный swiffy креатив №2 — ссылка на файл *.js, в расхлопнутом виде, созданный с помощью Генератора кода.
  6. Flash-креатив №1 — ссылка на файл *.swf, в схлопнутом виде.
  7. Flash-креатив №2 — ссылка на файл *.swf, в расхлопнутом виде.
  8. Изображение №1 — ссылка на изображение, в схлопнутом виде.
  9. Изображение №2 — ссылка на изображение, в расхлопнутом виде.
  10. Цвет фона подложки (#000000|rgba(0,0,0,0.4)|transparent) — цвет фона под креативом, заполняющий область полей баннера и плашку кнопки Закрыть. Так же отвечает за область наведения при которой будет происходить схлоп/расхлоп (на десктопах):
    • если значение не указано, то для расхлопа необходимо наведение мыши на креатив, для схлопа необходимо, отведение указателя мыши с креатива или кнопки Закрыть (при ее наличии);
    • если значение указано, то для расхлопа необходимо наведение мыши на сам баннер или на еuicontrol Закрыть (при ее наличии);
    • если указано значение вида transparent, то поведение будет, как и в случае если значение указано, но поля и панель кнопки Закрыть будут прозрачны.
  11. Ширина креатива №1 (100% или px) — ширина креатива (одна для всех типов креатива).
  12. Высота креатива №1 (100% или px) — высота креатива (одна для всех типов креатива).
  13. Цвет фона креатива №1 (#000000 или transparent) — цвет фона, который будет установлен как цвет фона креатива №1.
  14. Ширина креатива №2 (100% или px) — ширина креатива (одна для всех типов креатива).
  15. Высота креатива №2 (100% или px) — высота креатива (одна для всех типов креатива).
  16. Цвет фона креатива №2 (#000000 или transparent) — цвет фона который будет установлен как цвет фона креатива №1.
  17. Позиция (по умолчанию bottom) — сторона к которой будет прижата перетяжка (bottom, top, left, right). Сдвиг контента осуществляется автоматически при указании позиции top или bottom (при расхлопе сдвиг контента не осуществляется).
  18. Количество авторасхлопов (по умолчанию 0) — количество показов в расхлопнутом виде при загрузке страницы на время сессии в одном браузере.
  19. Время сессии авторасхлопа (по умолчанию 20) — время (в часах), в течение которого будет действовать настройка количества авторасхлопов, начиная с первого авторасхлопа.

    Пример. Указано 5 авторасхлопов, после того как появился первый, включается время сессии, например, 20 часов, тогда в течении этого времени могут показываться остальные авторасхлопы но не больше указанного количества.

  20. Авторасхлоп всегда (по умолчанию no) (yes|no) — yes — баннер всегда будет показываться в расхлопнутом виде, счетчик авторасхлопов крутится не будет и сессия инициализирована тоже не будет.
  21. Показывать кнопкуЗакрыть(по умолчанию no) (yes|no) — наличие кнопки Закрыть, поверх формата в расхлопнутом виде.
  22. Изображение кнопки Закрыть — файл-изображение, который будет использоваться в виде кнопки Закрыть.
  23. Ширина кнопки Закрыть (по умолчанию 40px) — ширина изображения кнопки Закрыть.
  24. Высота кнопки Закрыть (по умолчанию 40px) — высота изображения кнопки Закрыть.
  25. Положение кнопки Закрыть (по умолчанию right) (left|right) — положение кнопки Закрыть над креативом, только для Позиций bottom и top. right — верхний правый угол, left — левый верхний угол.
  26. Z-index (по умолчанию 9999999) — z-index, который будет применен формату.

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

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