Мы не нашли подробного технического материала по заливке HTML5-баннеров, поэтому решили написать его сами. В статье наш вариант модификации кода, с которой получилось пройти двухэтапную модерацию в Яндекс.Директ. Плюс раскрываем один нюанс, о котором умалчивает Яндекс.Справка.
Сразу обозначим, что модификация кода — это монотонный процесс. В код каждого баннера (у нас получилось 30) важно вставить коды вызова метода Яндекс, иначе баннеры не пройдут модерацию. Массовый способ изменения кода, увы, не был найден, поэтому пришлось прорабатывать баннер один за другим.
Двухэтапная модерация: что это значит
При первой загрузке баннеров Яндекс.Директ сразу же выкатывает критические ошибки, с которыми нельзя создать РК. После того, как они устранены, дается добро на отправку кампании на модерацию. Однако это не гарантирует, что баннеры скоро начнут показываться. После модерации могут появиться новые ошибки. Они, как правило, связаны с неправильной вставкой кода вызова метода Яндекс.
Для выполнения задачи пригодилась бесплатная программа Google Web Designer. Сюда удобно подгружать файлы-html и модифицировать код. Вызов метода добавляется в начало и конец кода. Теперь по порядку.
Куда и как вставить yandexHTML5BannerApi.getClickURLNum(1)
Вызов метода необходим для правильного перехода по ссылке. Заострять внимание на теории мы сейчас не будем, ее и так достаточно в справке Яндекса.
Нас интересует первая часть кода, тег — varClickTAG, который идет после
Вывод: если вы добавляете в баннер кнопку, то ссылку, которая идет после var clickTag нужно заменить на вызов метода. Полный вид строки для добавления: var bsClickTAG = window.yandexHTML5BannerApi ? window.yandexHTML5BannerApi.getClickURLNum(1) : '';
Как это выглядит в коде:
Обратите внимание, что в var ClickTAG добавлено bs. Соответственно, ниже, где есть ссылка на ClickTag тоже необходимо добавить bs, чтобы не нарушалась логика кода.
Еще один момент — в строке window.goTOURLWithoutBSURL заменено false на true. Поскольку мы не нашли инструкции по модификации кода, то пробовали рандомно менять некоторые переменные. Трудно сказать, играет ли эта замена ключевую роль в прохождении модерации. Но поскольку у нас получилось добиться заветного статуса «Допущено к показам» с таким кодом — мы спешим им поделиться.
Куда вставить вторую часть кода вызова метода
Часть добавляется в тело кода с тегами .
Из-за особенностей генерируемого кода в Creatopy, у нас в теле получилась только одна строка кода, что упростило добавление части для Яндекса. Так выглядит исходный код:
А ниже уже пофиксенная часть кода. Здесь все просто: взяли его из справки Яндекса и добавили перед исходной строкой:
Несколько тонкостей, из-за которых Яндекс может не пропустить html-5 баннеры
- Названия Папок и архивов прописываются строго на английском, без пробелов. Если даже одна буква будет на русском — Яндекс выкинет ошибку и не пропустит файлы при первичной заливке в РК.
- В коде баннера должен быть прописан размер баннера в блоке <head>. Например, для баннера размером 160х600 код будет выглядеть так: <meta name="ad.size" content="width=160,height=600">
Аналогично размер баннера в коде должен дублироваться во всех баннерах. В Creatopy эта строка автоматически проставляется, поэтому мы избежали дополнительных хлопот с размерами.
О чем не пишет Яндекс.Справка
Странно, что в справке нет упоминаний о том, что код не заработает, если не вставить скрипт с библиотекой шрифтов Яндекса после метатега размера. Это знание было бы очень полезно тем, кто впервые создает баннеры.
Получается, что шрифт для креатива может быть выбран любой, но в коде ссылка на Google Fonts должна быть только с указанием дополнительной части кода. Без нее Яндекс будет выкидывать ошибку о неправильном оформлении внешних ссылок и не пропустит креативы на первом кругу модерации.
Вот часть, которая должна быть добавлена: <script type="text/javascript" src="https://awaps.yandex.net/data/lib/adsdk.js"></script>
На заметку специалистам, которые занимаются продвижением медицинской тематики:
В HTML-5 баннеры обязательно добавлять дисклеймер вручную, Яндекс его не подставит автоматически. Советуем помнить об этом и сделать на этапе создания визуала, чтобы избежать лишней траты времени на повторную модификацию кода.
Финальный совет
Система модерации медийной кампании часто халтурит. Когда все изменения в код были внесены, ошибки не исчезали. Мы обратились в поддержку за подробным разъяснением отклонения, потому что идей, что конкретно нарушено, больше не было. И оказалось, что с баннерами все нормально, ошибки прописывались случайно. Модератор вручную их сняла и, о чудо, РК наконец-то была полноценно принята к показам. Поэтому если вам кажется, что вы все сделали правильно, обратитесь в поддержку за подсказкой. Возможно, проблема на их стороне.
Добрый день! Разрабатываю html5 баннеры для яндекс.телепрограммы. Но не получается сделать баннер хорошего качества так, чтобы он весил 150 кб. Особенно большой баннер 1440 на 250. Все пикселит и из-за этого проверку пройти не получается. Подскажите, может есть какой-то нюанс в подготовке файлов? Заранее спасибо за ответ!
надо сжать pngшки, например через tinypng
используйте меньше растра и больше векторной графики
К сожалению, в GWD действительно нельзя автоматически подставить код, но если баннер собирается в Adobe Animate, там есть возможность подключить пресеты и при публикации баннер будет генерироваться сразу под нужные технические требования.
👍