Креативы HTML5

Креативы HTML5 представляют собой рекламные материалы, которые предназначены для показа как на сайтах, так и в приложениях и созданы с помощью кода JavaScript, HTML и CSS. Это могут быть как медийные, так и мультимедийные креативы.

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

Дисплей и Видео 360 поддерживает прямую загрузку медийных и мультимедийных баннеров. Креативы с расширенными мультимедийными функциями, например раскрывающиеся и межстраничные, следует загружать в Креативную студию. Их можно размещать с помощью Менеджера кампаний 360 и синхронизировать с аккаунтом Дисплея и Видео 360.

Креативы HTML5 можно назначать медийным позициям.

Поддерживаемые форматы

Ниже перечислены форматы креативов HTML5, которые поддерживает Дисплей и Видео 360. Ознакомиться с каждым типом креативов можно в специальной галерее.

Медийные креативы

Креативы HTML5 с одним или несколькими фиксированными размерами и фиксированной позицией на веб-странице или в мобильном приложении.

Поддерживаемые функции

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

Мультимедийные креативы

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

Поддерживаемые функции и форматы:

Показатели, относящиеся к мультимедийным креативам, позволяют отслеживать клики, переходы, взаимодействия, время воспроизведения и т. д.
Видеокреативы в баннере – это объявления со встроенным видеопроигрывателем. Видео можно добавлять в мультимедийные объявления любого формата, кроме креативов на основе данных.
Раскрывающиеся полноэкранные креативы могут увеличиваться в размере и занимать весь экран мобильного устройства, например креативы "3D-спираль".
Креативы на основе данных позволяют изменять содержание объявления при показе разным сегментам покупателей.
Эффект параллакса можно использовать в мультимедийных креативах для создания иллюзии глубины с помощью слоев изображений. Например, когда пользователь прокручивает страницу вверх или вниз на мобильном устройстве, изображения переднего плана и фона двигаются с разной скоростью.

Как создать креатив HTML5

Креатив HTML5 можно создать в любом редакторе HTML5 или с помощью бесплатного веб-приложения Google Web Designer. Затем нужно добавить файлы в ZIP-архив и загрузить его в Дисплей и Видео 360.

Как создать медийный баннер HTML5

Медийный баннер HTML5 можно создать с помощью Google Web Designer или в редакторе HTML5.

Чтобы предотвратить задержки, связанные с отклонением креативов, при их создании соблюдайте рекомендации по работе с медийными баннерами HTML5.

Google Web Designer

Google Web Designer – это бесплатный инструмент, позволяющий создавать любые креативы HTML5. С его помощью вы можете разработать креатив с нуля или на основании готовых шаблонов.

Как создать баннер в Google Web Designer

Метод с использованием редактора HTML5

Если вы хотите написать свой код креатива, воспользуйтесь редактором HTML5.

Загрузить образец ZIP-файла

(расширенный)Как создать баннер HTML5 с нуля

Создайте HTML-файл с тегами <html>, <head>, <title> и <body>.
Чтобы указать желаемый размер креатива, добавьте тег <meta>:
<meta name="ad.size" content="width=[x],height=[y]">
Добавьте тег клика:
1. Добавьте тег скрипта и замените элемент https://www.google.com на целевую страницу рекламодателя:
  
  <script type="text/javascript"> var clickTag = "https://www.google.com"; </script>
2. Упакуйте тег <div> основного контейнера с изображением или объявлением в тег <a>, чтобы сделать его кликабельным:
  <a href="javascript:window.open(window.clickTag)"> <div id="container"> <img src="image.png" /> </div> </a>

Как создать мультимедийный баннер

Мультимедийные баннеры можно создавать в Google Web Designer или в любом удобном редакторе HTML5. Сначала создайте баннер, а затем добавьте медийные компоненты (например, видео, видео на YouTube или аудио).

Мультимедийные баннеры должны содержать активатор Креативной студии. Он позволяет:

безопасно загружать видео и изображения Securely при помощи Enabler.getUrl();
открывать целевую страницу рекламодателя при помощи Enabler.exit(). Использовать переходы вместо тегов клика в мультимедийных баннерах.

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

Что должен содержать ZIP-файл с объектами HTML5

ZIP-архивы с объектами HTML5 могут содержать до 100 файлов, и на них не распространяются ограничения по размеру, но, чтобы соответствовать требованиям издателя, постарайтесь сделать так, чтобы ZIP-архив весил как можно меньше.

Загрузить образец ZIP-файла

Указание названия для ZIP-архива

Присвойте ZIP-архиву HTML5 название, длина которого не превышает 50 символов (включая расширение ".zip"). Архивы с более длинным названием загрузить не удастся.

Поддерживаемые типы файлов

HTML и текст: HTML, HTM, CSS, JS.
Изображения: JPG, JPEG, GIF, PNG, SVG.
Шрифты: DFONT, EOT, OTF, TTE, TTF, WOFF, WOFF2.

Что должны содержать ZIP-архивы HTML5

Файл HTML – основной объект креатива HTML5. Файл должен содержать по меньшей мере один переход или тег клика и поддерживать загрузку контента в окне iframe. Сервис "Дисплей и Видео 360" показывает это окно вместе с объектами креатива.
Другие файлы. Изображения, коды CSS и файлы JavaScript, используемые в вашем файле HTML. Мультимедийные креативы также поддерживают файлы следующих типов (при условии, что креативы созданы с помощью Креативной студии или видеофайлы размещены на внешнем сервере):
AVI, MOV, MP4, M4V, MPEG, MPG, OGA, OGG, OGV, WEBM, WMV.

Что не должны содержать ZIP-архивы HTML5

Другие ZIP-файлы. Не добавляйте другие ZIP-файлы в ZIP-архив HTML5.
Неиспользуемые файлы. Добавляйте в архив только те файлы, которые используются HTML-файлом. Не добавляйте файлы-источники или авторские файлы.
Локальное или сеансовое хранилище. Дисплей и Видео 360 не поддерживает объекты HTML5, которые используют локальное или сеансовое хранилище.
Резервное изображение. Не включайте в ZIP-архив HTML5 резервные изображения. Объекты этого типа необходимо загружать отдельно в разделе "Резервные изображения".
Файлы с длинными названиями. Названия аудио- или видеофайлов не должны быть длиннее 50 однобайтовых символов. Названия других файлов должны содержать не более 200 однобайтовых символов. Для языков с двухбайтовыми символами (например, для японского, китайского и корейского) эти лимиты составляют 25 и 100 символов соответственно.

Резервные изображения (необязательно)

Резервные изображения добавлять не обязательно. Они демонстрируются только в том случае, если показ других объектов креатива невозможен на определенной платформе или в браузере, например если креатив содержит анимацию с применением CSS, а пользователь просматривает страницы в браузере Internet Explorer 8.

Резервные изображения следует загружать отдельно от ZIP-файла креатива. Если вы решите их не добавлять, наш сервис будет размещать на рекламном месте графический файл без картинки.

Как загрузить креатив HTML5

Сначала убедитесь, что вы добавили объекты креатива в ZIP-архив. Что должны содержать ZIP-архивы HTML5

Выберите рекламодателя и нажмите Креативы в меню слева.
Нажмите Создать, затем Загрузить и выберите HTML5 или изображение.
Введите название креатива в Дисплее и Видео 360.
Выберите на компьютере нужный ZIP-архив и переместите его в поле "Перетащите файл сюда" или нажмите Загрузить и укажите ZIP-файл.

Если загруженные вами файлы HTML5 отклонены, следуйте рекомендациям по устранению неполадок.
Выберите один или несколько размеров для креатива. Дисплей и Видео 360 поддерживает креативы одного размера, а также адаптивные креативы HTML5, которые могут быть представлены разными размерами.
В разделе "События" проверьте и при необходимости измените переходы, обнаруженные в креативе. Для каждого перехода (тега кликов) можно скорректировать URL целевой страницы, начинающийся с префикса http:// или https://. Чтобы изменить ярлык отчета или URL, наведите курсор на строку и нажмите на значок карандаша .
Примечание. После сохранения креатива обновленный адрес целевой страницы уже через несколько минут появится в настройках синхронизированного рекламодателя Менеджера кампаний 360 или станет доступен для просмотра.
Нажмите Сохранить.

Чтобы убедиться в работоспособности ваших креативов, специалисты Дисплея и Видео 360 проверяют их как с помощью автоматизированных решений, так и вручную. Также креативы проходят анализ на соответствие правилам компании Google в отношении объявлений и правилам бирж, где осуществляется их показ. Уточнить ход выполнения проверки ваших креативов вы можете на вкладке Статус креатива.

Расширенные настройки

Перечисленные ниже параметры можно не указывать.

Если размер вашего межстраничного объявления не подходит для определенного мобильного устройства, Дисплей и Видео 360 должным образом изменит его. Чтобы предотвратить это, активируйте настройку "Не выполнять масштабирование с учетом ширины экрана устройства".
Добавьте резервное изображение и ярлык отчета. Если вы загружаете адаптивный креатив, то можете добавить по одному резервному изображению для каждого размера.
Добавьте изображение для управляемой загрузки, которое будет появляться, если во время загрузки основного креатива возникнут задержки или если скорость интернет-подключения устройства невысока.
Если аккаунт рекламодателя из Дисплея и Видео 360 связан с каким-либо аккаунтом Менеджера кампаний 360, добавьте отслеживающее объявление, чтобы создавать отчеты на уровне рекламодателя в Менеджере кампаний 360. Примечание. Такой метод доступен только для мультимедийных креативов, спиралей и креативов на основе данных.
1. Нажмите Свойства показа.
2. Найдите уже имеющееся в Менеджере кампаний 360 отслеживающее объявление. Создайте его перед подготовкой креатива в Дисплее и Видео 360, чтобы у системы было достаточно времени для синхронизации.
  
  Совет. Чтобы упростить поиск отслеживающего объявления, назначайте рекламному месту в Менеджере кампаний 360 только одно такое объявление.
Нажмите Дополнительная информация, чтобы добавить тег отслеживания, код интеграции или примечания.

Отправка ссылки для просмотра

Чтобы другие пользователи могли проверить креатив HTML5, отправьте им ссылку на страницу предварительного просмотра. Открыть ее может любой пользователь. Входить в аккаунт для этого не понадобится.

Часто задаваемые вопросы

Почему после загрузки креатива его размер был указан неправильно?

Размер креатива определяется размером изображения (основного или резервного). Убедитесь, что значения одинаковы для обоих изображений. Вы также можете выбрать нужную ширину и высоту с помощью раскрывающегося меню Размеры.

Почему я не могу загрузить креатив?

Причиной отклонения могут быть следующие распространенные проблемы:

Слишком длинное название файла. Для большинства типов файлов длина названия не должна превышать 200 однобайтовых или 100 двухбайтовых символов. Максимальная длина названия аудио- и видеофайлов составляет 50 однобайтовых или 25 двухбайтовых символов.
Вложенные ZIP-файлы. Размещать один ZIP-файл внутри другого нельзя.
У креатива не настроен переход на сайт. В каждом креативе должен быть хотя бы один переход на целевую страницу рекламодателя.
Необходимо обновить креатив в Google Web Designer. Если креатив был создан в Google Web Designer, то может появиться сообщение о недопустимых метаданных в коде HTML. Это означает, что использовалась устаревшая версия программы. Обновите Google Web Designer до последней версии, а затем откройте креатив и опубликуйте его повторно.

Дополнительную информацию можно найти в статье Устранение неполадок с загрузкой креативов.

Эта информация оказалась полезной?

Как можно улучшить эту статью?