Как загрузить HTML5-баннеры в Яндекс.Директ и пройти модерацию: полная инструкция

Мы не нашли подробного технического материала по заливке HTML5-баннеров, поэтому решили написать его сами. В статье наш вариант модификации кода, с которой получилось пройти двухэтапную модерацию в Яндекс.Директ. Плюс раскрываем один нюанс, о котором умалчивает Яндекс.Справка.

Сразу обозначим, что модификация кода — это монотонный процесс. В код каждого баннера (у нас получилось 30) важно вставить коды вызова метода Яндекс, иначе баннеры не пройдут модерацию. Массовый способ изменения кода, увы, не был найден, поэтому пришлось прорабатывать баннер один за другим.

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

Для выполнения задачи пригодилась бесплатная программа Google Web Designer. Сюда удобно подгружать файлы-html и модифицировать код. Вызов метода добавляется в начало и конец кода. Теперь по порядку.

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

Нас интересует первая часть кода, тег — varClickTAG, который идет после

Вывод: если вы добавляете в баннер кнопку, то ссылку, которая идет после var clickTag нужно заменить на вызов метода. Полный вид строки для добавления: var bsClickTAG = window.yandexHTML5BannerApi ? window.yandexHTML5BannerApi.getClickURLNum(1) : '';

Как это выглядит в коде:

Обратите внимание, что в var ClickTAG добавлено bs. Соответственно, ниже, где есть ссылка на ClickTag тоже необходимо добавить bs, чтобы не нарушалась логика кода.

Еще один момент — в строке window.goTOURLWithoutBSURL заменено false на true. Поскольку мы не нашли инструкции по модификации кода, то пробовали рандомно менять некоторые переменные. Трудно сказать, играет ли эта замена ключевую роль в прохождении модерации. Но поскольку у нас получилось добиться заветного статуса «Допущено к показам» с таким кодом — мы спешим им поделиться.

Часть добавляется в тело кода с тегами .

Из-за особенностей генерируемого кода в Creatopy, у нас в теле получилась только одна строка кода, что упростило добавление части для Яндекса. Так выглядит исходный код:

А ниже уже пофиксенная часть кода. Здесь все просто: взяли его из справки Яндекса и добавили перед исходной строкой:

Аналогично размер баннера в коде должен дублироваться во всех баннерах. В Creatopy эта строка автоматически проставляется, поэтому мы избежали дополнительных хлопот с размерами.

Странно, что в справке нет упоминаний о том, что код не заработает, если не вставить скрипт с библиотекой шрифтов Яндекса после метатега размера. Это знание было бы очень полезно тем, кто впервые создает баннеры.

Получается, что шрифт для креатива может быть выбран любой, но в коде ссылка на Google Fonts должна быть только с указанием дополнительной части кода. Без нее Яндекс будет выкидывать ошибку о неправильном оформлении внешних ссылок и не пропустит креативы на первом кругу модерации.

Вот часть, которая должна быть добавлена: <script type="text/javascript" src="https://awaps.yandex.net/data/lib/adsdk.js"></script>

На заметку специалистам, которые занимаются продвижением медицинской тематики:

В HTML-5 баннеры обязательно добавлять дисклеймер вручную, Яндекс его не подставит автоматически. Советуем помнить об этом и сделать на этапе создания визуала, чтобы избежать лишней траты времени на повторную модификацию кода.

Система модерации медийной кампании часто халтурит. Когда все изменения в код были внесены, ошибки не исчезали. Мы обратились в поддержку за подробным разъяснением отклонения, потому что идей, что конкретно нарушено, больше не было. И оказалось, что с баннерами все нормально, ошибки прописывались случайно. Модератор вручную их сняла и, о чудо, РК наконец-то была полноценно принята к показам. Поэтому если вам кажется, что вы все сделали правильно, обратитесь в поддержку за подсказкой. Возможно, проблема на их стороне.