Palmetta и грабли подготовки веб-баннеров
Даня, вот на какие грабли мы напоролись при сдаче веб-баннеров.
При разработке очень рекомендую всё учесть.
Эти манипуляции нужны после того, как мы согласуем видео превью итоговой анимации с клиентом, но лучше знать о них сразу.
Итого
мы должны получить след. набор файлов для одного макета:
• ZIP-архив, где лежат HTML + .js + папка image, где лежать JPG
• Предпросмотровое видео MP4 (если получится, то прям запись экрана браузера без обрубления экрана)
• исходник формата .FLA (Adobe Animated CC)
• Всё это сложенно в папку облака с названием акции и размером макета.
Оглавление
Настройка экшина воспроизведения
основные тех требования для публикации в яндексе звучат так:
————————
• Формат: ZIP-архив с файлами HTML (может также содержать файлы CSS, JS, GIF, PNG, JPG, JPEG и SVG).
• Максимальный размер: не более 150 КБ.
• Для презентации сделать в просматриваемом формате видео mp4
• Длительность: Продолжительность анимации не должна превышать 30 секунд. Могут быть цикличны например 15 сек в 2 цикла повтора, 10 сек с 3 циклами повтора и т.д., но до 30-ой секунды баннер должен стать статичным.
• Подробное описание требований https://yandex.ru/adv/requirements/html5#direct
• тех требования гугла:https://support.google.com/google-ads/answer/1722096?hl=ru
————————
Тут за 5:45 минут показываю почти всё, что написано ниже (кроме скриптов внутри макета, они отдельно ниже)
— 1 —
Настройка экшина воспроизведения
Веб-баннер должен быть в общей сложности не более 30 секунд и заканчиваться неподвижным стоп кадром. Мы используем 1 вариант с 15 секунд с двумя повторами. + обязон для подстраховки лучше сделать на один кадр меньше, чем 15 секунд, иначе могут не пропустить.
Это прописывается скриптом в самой анимации. Это звучит сложно, но по факту всё изи. Вот этот видос мне очень помог, буду ссылаться на него с привязкой к нужному времени.
Вот тут я быстро пробежался как это выглядит:
Вот тут чувак начинает вписывать этот скрипт и поясняет что за что отвечает (видео с привязкой к таймкоду):
— 2 —
Как экспортировать HTML
Далее ещё раз напоминаю как экспортировать HTML из Adobe Animated
— 3 —
Как сжать изображения в image
След пунктом надо обязательно подрезать лишнюю неиспользуемую часть фона у экспортированных картинок и сжать качество картинок до 85-90 кб через фотошоп, через ctrl+shift+alt+S.
Если пикча будет больше, есть риск, что итоговый архив будет более 150 кб. А у нас максимум 149 кб
Оглавление
— 4 —
Предпоследним пунктом мы в файл HTML прописываем код для яндекса и гугла. там всё просто. Тут понадобиться удобный бесплатный редактор-кода-блокнот Notepad++
И вот что мы делаем далее:
Meta данные о размере баннера
<meta name="ad.size" content="width=240,height=400">
в width= и height= вписываем размеры баннера который делаем.
Код гугловского скрипта
для запуска анимации, который блочится ADblock
Сразу после стиля, заменяем одну ссылку на библиотеку другой ссылкой, но уже гугловской.
<script src="https://s0.2mdn.net/ads/studio/cached_libs/createjs_2019.11.15_min.js"></script>
Кнопка-ссылка
Тут мы в конце сразу после первой строчки <body> вставляем наш адресс ссылки:
<a id="click_area" href="ссылка на акцию" target="_blank">
Новые коллекции и имиджи — https://www.palmetta.ru/catalog/byustgaltery/
Белье Sale 60% — https://www.palmetta.ru/catalog/byustgaltery/sale_yes/
Купальники — https://www.palmetta.ru/swimwear/swimwear-byustgaltery/
и сразу после второй </div> вставить следующее
</a>
<script>
document.getElementById("click_area").href = yandexHTML5BannerApi.getClickURLNum(1);
</script>
И сохранить
Если не очень понятно разъяснил, то вот тут чувак делает то что нужно
— 5 —
Архивирование HTML
и последним этапом всё это дело заархивировать, я использую 7zip вот с такими параметрами
и мы получаем из 426 кб папки в 149 кб архива.
— 6 —
Теперь можно отправлять на сдачу =)