Креативы HTML5
К этой категории относятся медийные и мультимедийные креативы. Дополнительные сведения о каждом типе представлены ниже.
Медийные креативы
Медийными называются креативы, которые могут содержать изображения или объекты HTML5 и не обладают свойствами мультимедийных креативов. Преимущества медийных креативов:
- возможность отслеживания отдельных переходов с помощью тегов кликов;
- управляемая загрузка;
- поддержка адаптивных объектов HTML5.
Мультимедийные креативы
Мультимедийными называются креативы HTML5, которые могут увеличиваться в размере, а также содержать видео в баннере и интерактивные элементы (например, игры). Преимущества мультимедийных креативов:
- создание отчетов по нескольким переходам, счетчикам и таймерам и сбор данных по взаимодействиям;
- возможность увеличения размера или раскрытия на весь экран;
- поддержка видео- и аудиоматериалов в баннере;
- управляемая загрузка.
Как подготовить и загрузить объекты медийного креатив HTML5
Если вы хотите использовать медийные креативы с объектами HTML5, вам нужно загрузить в Менеджер кампаний 360 креатив HTML5 в архиве ZIP. В архиве должны быть код HTML и все файлы, на которые есть ссылки в этом коде. Следуйте инструкциям ниже.
-
Создайте папку.
-
Добавьте в нее файл HTML и все ресурсы, на которые он ссылается. Не добавляйте в эту папку другие файлы. В ней можно создавать подпапки, но не нужно их архивировать.
Что должен содержать файл ZIPПоддерживаемые типы файлов и ограниченияКакие объекты нужно добавлять
-
Файл HTML – основной объект медийного креатива HTML5. Это должен быть полный документ HTML, который содержит хотя бы один тег кликов и может загружаться в окно iFrame. Менеджер кампаний 360 показывает это окно вместе с объектами объявления. Подробные сведения о тегах кликов представлены ниже.
-
Другие файлы. Добавьте все ресурсы, на которые ссылается файл HTML. Никакие иные файлы добавлять не нужно.
Какие ресурсы не нужно добавлять
-
Не добавляйте архивы в файл ZIP с объектами HTML5. Если вы хотите выполнить массовую загрузку, то можно объединить в один ZIP-файл несколько архивов при условии, что каждый из них содержит отдельный креатив HTML5.
-
Файлы, на которые нет ссылок в коде HTML (об этом уже говорилось выше).
-
Объекты, которые используют локальное или сеансовое хранилище. Менеджер кампаний 360 не поддерживает такие объекты HTML5.
-
Файлы, в названиях которых присутствует знак процента (%). Его нельзя использовать в названиях файлов ваших объектов.
-
Файлы, не содержащие резервных объектов.
-
При необходимости трафик-менеджер может отдельно загрузить в Менеджер кампаний 360 резервное изображение. Оно будет показано, если Менеджер кампаний 360 по каким-либо причинам не сможет использовать основные объекты. Резервное изображение не следует добавлять в файл ZIP с объектами HTML5.
-
Пример файла ZIP с объектами HTML5 Работа с файлами ADZ-
Поддерживаемые типы файлов: HTML, HTM, JS, CSS, JPG, JPEG, GIF, PNG, JSON, XML, SVG, EOT, OTF, TTF, WOFF, WOFF2.
-
Максимальное количество файлов в ZIP-архиве: 100.
-
Максимальный размер: 10 МБ.
Креативы HTML5 в Менеджер кампаний 360 также можно загружать в архивах ADZ. Работайте с архивом ADZ так же, как и с ZIP-файлом. В данном случае между ними нет никакой разницы.
-
-
Добавьте папку в новый архив ZIP. Если вы не знаете, как это сделать, попробуйте найти информацию в справочных центрах Windows или Apple.
-
Теперь можно загрузить ZIP-файл в Менеджер кампаний 360.
Дополнительные сведения о размещении креативов:
Проблемы с загрузкой
-
Возможно, вы сохранили файл не как ZIP или ADZ, а в другом формате. Добавьте файл HTML и ресурсы, на которые он ссылается, в один архив ZIP и повторите попытку.
-
Если у вас есть
архив ZIP, проверьте его расширение: нажмите правой кнопкой на его имя и выберите "Свойства". Убедитесь в правильности расширения. -
Если вам по-прежнему не удается выбрать файл, обратитесь в службу поддержки.
Если у вас не получилось загрузить свой архив, возможно, в нем нет подходящих объектов HTML5 или превышен лимит на количество файлов (их должно быть не более 100). Также он мог быть отклонен, если в ваших объектах HTML5 используются API JavaScript с локальным или сеансовым хранением. В целях защиты конфиденциальности пользователей в Менеджере кампаний 360 эти API запрещены.
Менеджер кампаний 360 не поддерживает объекты HTML5 с локальным и сеансовым хранением в целях защиты конфиденциальности пользователей. Если вам не удалось загрузить архив по этой причине, свяжитесь с вашими разработчиками и удалите запрещенные API, а затем повторите попытку. Не принимаются объекты HTML5 со следующими API JavaScript:
- indexedDB;
- localStorage;
- openDatabase;
- sessionStorage.
Если применение этих API важно для достижения ваших рекламных целей, попробуйте использовать вместо них настройки Менеджера кампаний 360. Например, некоторые рекламодатели задают с помощью API таргетинг и ограничивают частоту показов. Однако такие функции доступны и в Менеджере кампаний 360. Обратитесь в службу поддержки, и вам помогут найти альтернативные решения. Помните, что при сборе данных вы должны выполнять все требования по защите конфиденциальности пользователей, указанные в вашем договоре с Google Платформой для маркетинга.
Что такое локальное и сеансовое хранение? Есть два вида интернет-хранилища HTML5 и два способа хранения данных браузера. При локальном хранении браузер использует одни и те же файлы данных для множества сеансов работы. Файлы находятся в системных папках браузера постоянно, пока пользователь не очистит кеш или не удалит их вручную. При сеансовом хранении браузер сохраняет данные только на период текущего сеанса. После того как вы закроете или перезапустите браузер, они удаляются.
Почему эти типы хранения запрещены? Сохраненный файл может содержать код для извлечения идентификационных данных, отслеживать действия в браузере на протяжении нескольких сеансов или отправлять третьей стороне иные сведения в нарушение условий вашего договора с Google Платформа для маркетинга. Безусловно, локальное и сеансовое хранение используется не только для таких действий, но они потенциально возможны, так как в файле может присутствовать любой код.
Рекомендации для разработчиков
Ресурсы
Как установить размер креатива
Рекомендации по размерамВ отличие от изображений и видео, документы HTML не имеют таких параметров, как высота и ширина. Поэтому, чтобы указать размеры креатива, используйте метатег size (необязательное свойство документа HTML). Так проще всего обеспечить корректную обработку креатива. В этом примере кода указано, как нужно задавать размеры:
meta name="ad.size" content="width=300,height=250">Теги кликов
Тег кликов определяет целевые страницы для каждого перехода в креативах с ресурсами HTML5. Переход – это любая область, на которую можно нажать, чтобы открыть целевую страницу. Каждый тег клика определяет целевую страницу для отдельного перехода.
При нажатии на креатив он запрашивает в Менеджере кампаний 360 целевую страницу, связанную с этим переходом. Такую целевую страницу можно задать на уровне креатива или объявления – это зависит от ваших задач.
Менеджер кампаний 360 находит теги клика, когда вы загружаете объекты. Целевую страницу в теге клика можно изменить в любое время, даже после экспорта тегов, поскольку она не указана в коде, а задается с помощью стандартной переменной clickTag.
Поскольку в медийных креативах параметры на уровне объявления переопределяют параметры на уровне креатива, изучите приведенные ниже советы по настройке тегов кликов.
- Убедитесь, что при нажатии на креатив будет использоваться переменная clickTag.
- Переменная clickTag должна беспрепятственно читаться сервером объявлений: минификация и обфускация запрещены. При этом разрешается применять минификаторы для других фрагментов кода и в других файлах.
- Не рекомендуется задавать URL в коде объекта креатива, потому что в этом случае Менеджер кампаний 360 не сможет отслеживать клики, а трафик-менеджеры – изменять этот URL. После загрузки объекта система определит, задан ли URL в его коде, и при необходимости предупредит вас.
Вот вариант использования тега кликов в документе HTML:
<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>
</head>
[Разместите здесь остальной код вашего креатива.] </html>
Убедитесь, что в качестве URL целевой страницы в креативе используется переменная clickTag.
<img src="images/dclk.png" border=0>
</a>
Компонент Интерактивная область в Google Web Designer полностью совместим с Менеджером кампаний 360 и не требует добавлять дополнительный код.
Как добавить тег клика с помощью интерактивной области
- Добавьте в объявление кнопку или другой заметный элемент призыва к действию, с которым пользователь сможет взаимодействовать.
- Перетащите компонент Интерактивная область из папки "Взаимодействие" панели компонентов в рабочую область и расположите его поверх призыва к действию.
- Нажмите кнопку создания события
на панели событий.
- Откроется диалоговое окно события, где вы сможете задать следующие настройки:
Цель Компонент "Интерактивная область" ( gwd-taparea_1)Событие Интерактивная область > Касание/нажатие Действие Объявление Google > Переход
Примечание. Похожее действие Переход (другой URL) не позволяет изменять URL за пределами объявления, например в Креативной студии или Менеджере кампаний 360, и используется только для динамических объявлений.
Получатель gwd-adКонфигурация - Идентификатор показателей: ярлык (например, "CTA"), облегчающий понимание отчетов.
- URL: URL перехода.
- Сворачивать при закрытии: установите этот флажок для раскрывающихся объявлений, чтобы сворачивать их, когда пользователь закрывает объявление.
- Приостанавливать при выходе: установите этот флажок, чтобы останавливать воспроизведение видео и аудио, когда пользователь закрывает объявление.
- Страница, открывающаяся при выходе: страница, которая показывается, когда пользователь закрывает раскрывающееся объявление.
на панели событий.
Примеры файлов
Пример документа HTMLНиже приведен пример полного кода HTML для креатива HTML5. Тег кликов и метатег размеров выделены полужирным шрифтом.
Поскольку это простой креатив, другие объекты здесь не требуются. Когда вы создадите свой креатив HTML5, упакуйте его в файл ZIP или ADZ и отправьте трафик-менеджеру Менеджер кампаний 360.
Документ
<head>
<title>sample html page</title>
<meta name="ad.size" content="width=300,height=250">
<style>
html, body {background-color: blue;}
p { color:white; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var clickTag = "http://www.google.org";
function resizeWindow()
{
$('p').css({ 'width':'100%', 'text-align':'center' });
var h1 = $('h1').height();
var h = h1/2;
var WinHeight = $(window).height();
var w = WinHeight/2;
var m = w - h;
var WinWidth=$(window).width();
$('p').css("margin-top",m + "px");
$("p").text("Size="+WinWidth+"x"+WinHeight);
}
$(document).ready(function () {
resizeWindow();
});
$(window).resize(function () {
resizeWindow();
});
</script>
</head>
<body>
<a href="javascript:window.open(window.clickTag)"><p>Загрузка страницы…</p></a> </body> </html>
Файлы HTML5 с тегами клика используются для динамического изменения URL и отслеживания кликов с помощью серверов объявлений Менеджера кампаний 360.
Простой файл
Вызывает переменную clickTag после клика.
С параметром
Вызывает переменную clickTag при нажатии кнопки. В этом примере показано, как передать параметр (например, почтовый индекс) в целевой URL.
Со знаком #
Разделяет вызов отслеживания Менеджера кампаний 360 и URL целевой страницы для кнопки. Его необходимо использовать во всех креативах, при нажатии на которые открывается URL, содержащий знак #.
HTML5 file with a number sign in a click tag URL
Несколько переменных
Содержит несколько тегов клика.
HTML5 file with multiple click tags
Загрузчик
Архив ZIP с двумя файлами ZIP – родительским и дочерним. Родительский файл загружает дочерний.
Это примеры файлов HTML5, которые служат для отслеживания взаимодействий пользователя с креативами, не относящимися к Rich Media.
Пиксель отслеживания
Вызывает пиксель отслеживания Менеджера кампаний 360 размером 1 x 1 при загрузке.
