Как подготовить ресурсы HTML5 для Менеджер кампаний

 

В этой статье рассказывается, как подготовить ресурсы HTML5 к загрузке в Менеджере кампаний.

Если вы никогда не работали с рекламными материалами этого формата, ознакомьтесь с разделом Креативы HTML5 ниже.

Развернуть все Свернуть все

Креативы HTML5

Креативы, использующие HTML5
  • Медийные креативы – это креативы, которые могут использовать как графические ресурсы, так и HTML5 и не относятся к формату Rich Media. Преимущества медийных креативов:

    • возможность отслеживания отдельных переходов с помощью тегов кликов;
    • управляемая загрузка;
    • поддержка адаптивных объектов HTML5. Подробнее о создании адаптивных креативов в Google Web Designer
  • Rich Media. Все остальные креативы HTML5 (например, раскрывающиеся или межстраничные) используют элементы Rich Media, поэтому их нужно создавать в Креативной студии. Этот сервис позволяет получить креативы Rich Media в формате HTML5 (в том числе баннеры, в которых используются элементы Rich Media) и настроить их в Менеджере кампаний.

Как настроить ресурсы креативов
Сведения о HTML5

Совместимость

Креативы HTML5 не требуют файлов специального формата или сторонних плагинов. Благодаря этому они совместимы с большинством мобильных устройств, включая iOS.

Как подготовить и загрузить ресурсы HTML5

Если вы хотите использовать медийные креативы с ресурсами HTML5, вам нужно загрузить в Менеджере кампаний креатив HTML5 в архиве ZIP. В архиве должны быть код HTML и все файлы, на которые есть ссылки в этом коде. Ниже описано, как это сделать.

  1. Создайте папку.

  2. Добавьте в нее файл HTML и все ресурсы, на которые он ссылается. Не добавляйте в эту папку другие файлы. В ней можно создавать подпапки, но не нужно их архивировать.

    Что должен содержать файл ZIP

    Какие ресурсы нужно добавлять

    • Файл HTML – основной ресурс креатива HTML5. Это должен быть полный документ HTML, который содержит хотя бы один тег кликов и может загружаться в окно iframe. Менеджер кампаний показывает это окно вместе с ресурсами объявления. Подробнее о тегах кликов читайте ниже.

    • Другие файлы. Добавьте все ресурсы, на которые ссылается файл HTML. Никакие иные файлы добавлять не нужно.

    Какие ресурсы не нужно добавлять

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

    • Файлы, на которые нет ссылок в коде HTML. Как сказано выше, в архив можно добавлять только ресурсы, которые упоминаются в файле HTML.

    • Ресурсы, которые используют локальное или сеансовое хранилище. Менеджер кампаний не поддерживает такие ресурсы HTML5.

    • Файлы, в названиях которых присутствует знак процента (%). Его нельзя использовать в названиях файлов в ваших ресурсах.

    • Резервные ресурсы. Их можно включать в архив, только если ссылки на них есть в файле HTML.

      • Трафик-менеджер должен загрузить резервное изображение в Менеджере кампаний отдельно. Оно будет показано, если Менеджер кампаний по каким-либо причинам не сможет использовать основные ресурсы. Не добавляйте этот файл в архив ZIP с ресурсами HTML5.

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

    Поддерживаемые типы файлов и ограничения
    • Поддерживаемые типы файлов: CSS, GIF, HTM, HTML, JPG, JPEG, JS, JSON, SVG, PNG и XML.

    • Максимальное количество файлов: не более 100.

    • Максимальный размер файла: без ограничений. 

    Пример файла ZIP с ресурсами HTML5 Работа с файлами ADZ

    Креативы HTML5 в Менеджере кампаний также можно загружать в архивах ADZ. Работайте с файлом ADZ так же, как и с ZIP-файлом. В данном случае между ними нет разницы.

  3. Добавьте папку в новый архив ZIP. Если вы не знаете, как это сделать, воспользуйтесь справочными центрами Windows или Apple.

  4. Теперь трафик-менеджер может загрузить этот файл ZIP в разделе "Управление трафиком" Менеджер кампаний.

    Дополнительные сведения о разделе "Управление трафиком" в Менеджере кампаний:

Проблемы с загрузкой

Проверьте с помощью валидатора HTML5, поддерживает ли Менеджер кампаний ваши файлы ZIP.
Почему я не могу загрузить в этот сервис креативы HTML5?
  1. Возможно, вы сохранили файл не как ZIP или ADZ, а в другом формате. Добавьте файл HTML и ресурсы, на которые он ссылается, в один архив ZIP и повторите попытку.

  2. Если у вас есть архив ZIP, проверьте его расширение: нажмите правой кнопкой на его имя и выберите пункт "Параметры". Убедитесь в правильности расширения.

  3. Если вам по-прежнему не удается выбрать файл, обратитесь в службу поддержки.

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

Если у вас не получилось загрузить файл, возможно, в нем нет ресурсов HTML5 или превышен лимит на количество файлов (не более 100). Также он мог быть отклонен, если в ваших ресурсах HTML5 используются интерфейсы API JavaScript с локальным или сеансовым хранением. В целях защиты конфиденциальности пользователей в Менеджере кампаний эти API запрещены.

Почему Менеджер кампаний не поддерживает API JavaScript с локальным и сеансовым хранением?

Менеджер кампаний не поддерживает ресурсы HTML5 с локальным и сеансовым хранением в целях защиты конфиденциальности пользователей. Если вам не удалось загрузить пакет по этой причине, свяжитесь с вашими разработчиками и не применяйте запрещенные API, а после этого повторите попытку. В частности, не принимаются ресурсы HTML5 со следующими API JavaScript:

  • indexedDB;
  • localStorage;
  • openDatabase;
  • sessionStorage.

Если применение этих API важно для достижения ваших рекламных целей, попробуйте использовать вместо них настройки Менеджер кампаний. Например, некоторые рекламодатели настраивают с помощью этих интерфейсов таргетинг объявлений и ограничивают частоту показов, но в Менеджере кампаний также широко представлены такие функции. Обратитесь в службу поддержки, и вам помогут найти альтернативные решения. Имейте в виду, что, независимо от способа настройки ваших ресурсов, при сборе данных вы должны выполнять требования договора с Google Платформой для маркетинга по защите конфиденциальности пользователей.

Что такое локальное и сеансовое хранение? Эти два вида интернет-хранилища HTML5 и два способа хранения данных браузера. При локальном хранении браузер использует одни и те же файлы данных для множества сеансов работы. Файлы находятся в системных папках браузера постоянно, пока пользователь не очистит кеш или не удалит их вручную. При сеансовом хранении браузер сохраняет данные только на период текущего сеанса. После того как вы закроете или перезапустите браузер, они удаляются.

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

Рекомендации для разработчиков

Ресурсы

IAB и Креативная студия

Размеры

Рекомендации по размерам

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

<meta name="ad.size" content="width=300,height=250">

Теги кликов

О тегах кликов

Тег кликов определяет целевые страницы для каждого перехода в креативах с ресурсами HTML5. Переход – это любая область, на которую можно нажать, чтобы открыть целевую страницу. В каждом теге кликов определяется целевая страница для отдельного перехода.

При нажатии на креатив он запрашивает в Менеджере кампаний целевую страницу, связанную с этим переходом. Такую целевую страницу можно задать на уровне креатива или объявления – это зависит от ваших задач.

Менеджер кампаний находит теги кликов во время загрузки ресурсов. Целевую страницу в теге кликов можно изменить в любое время, даже после экспорта тегов, поскольку она не указана в коде, а задается с помощью стандартной переменной clickTag.

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

  • Убедитесь, что при нажатии на креатив будет использоваться переменная clickTag.
  • Переменная clickTag должна беспрепятственно читаться сервером объявлений: использование минификации и обфускации запрещено. (При этом разрешается применять минификаторы для других фрагментов кода и в других файлах.)
  • Не рекомендуется задавать URL в коде ресурса, потому что в этом случае Менеджер кампаний не сможет отслеживать клики, а трафик-менеджеры – изменять этот URL. После загрузки ресурса система определит, задан ли URL в его коде, и при необходимости предупредит вас.
Пример вставки тега кликов

Вот вариант использования тега кликов в документе HTML:

<html>
<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>
</head>
[The rest of your creative code goes here.] </html>

Убедитесь, что в качестве URL целевой страницы в креативе используется переменная clickTag.

<a href="javascript:window.open(window.clickTag)">
<img src="images/dclk.png" border=0>
</a>
Для создания переходов используйте Google Web Designer

Компонент Интерактивная область в Google Web Designer полностью совместим с Менеджером кампаний и не требует добавлять дополнительный код.

Как добавить тег кликов с помощью интерактивной области

  1. Добавьте в креатив кнопку или иной хорошо заметный элемент с призывом к действию, на который смогут нажимать пользователи.
  2. Перетащите компонент "Интерактивная область" с панели компонентов на рабочую область и разместите его над призывом к действию.
  3. Нажмите кнопку "Новое событие" на панели событий.
  4. В открывшемся диалоговом окне выберите следующие варианты:
    Цель Компонент TapArea (gwd-taparea_1)
    Событие Интерактивная область > Касание/Клик
    Цель Объявление Google > Переход
    Получатель gwd-ad
    Конфигурация

    Идентификатор показателей

    Информативный ярлык для отчетов, например "Купить товар".

    URL

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

    Сворачивать при закрытии (только для раскрывающихся объявлений)

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

    Приостанавливать при выходе

    Если установить этот флажок, воспроизведение видео или аудио будет приостанавливаться при закрытии страницы пользователем.

Примеры файлов

Пример документа HTML

Ниже приведен пример полного кода HTML для креатива HTML5. Тег кликов и метатег размеров выделены полужирным шрифтом.

Поскольку это простой креатив, здесь не требуются другие ресурсы. Когда вы создадите свой креатив HTML5, упакуйте его в файл ZIP или ADZ и отправьте трафик-менеджеру Менеджер кампаний.

Документ

<html>
  <head>
    <title>Образец страницы HTML</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 с тегами кликов

Файлы HTML5 с тегами кликов используются для динамического изменения URL и отслеживания кликов с помощью серверов объявлений Менеджера кампаний.

Простой файл

Вызывает переменную clickTag после клика.

С параметром

Вызывает переменную clickTag при нажатии кнопки. В этом примере показано, как передать параметр (например, почтовый индекс) в целевой URL.

Файл со знаком решетки (#)

Разделяет вызов отслеживания Менеджера кампаний и URL целевой страницы для кнопки. Его необходимо использовать во всех креативах, при нажатии на которые открывается URL, содержащий знак #.

Несколько переменных

Содержит несколько тегов кликов.

Загрузчик

Архив ZIP с двумя файлами ZIP – родительским и дочерним. Родительский файл загружает дочерний.

Файлы HTML5 с тегами Floodlight (графические объявления)

Это примеры файлов HTML5, которые служат для отслеживания взаимодействий пользователя с креативами, не относящимися к Rich Media.

При клике

Вызывает графический тег Floodlight при нажатии кнопки.

При загрузке

Вызывает графический тег Floodlight при загрузке HTML5.

Файлы HTML5 с тегами Floodlight (динамические объявления)

Это примеры файлов HTML5, которые служат для отслеживания взаимодействий пользователя с креативами, не относящимися к Rich Media и не содержащими изображений.

При клике

Вызывает динамический тег Floodlight при нажатии кнопки.

При загрузке

Вызывает динамический тег Floodlight при загрузке HTML5.

Файлы HTML5 со специальным отслеживанием

Это примеры файлов HTML5, которые служат для отслеживания взаимодействий пользователя с креативами, не относящимися к Rich Media.

Пиксель отслеживания 1 x 1

Вызывает пиксель отслеживания Менеджера кампаний размером 1 x 1 при загрузке.

Была ли эта статья полезна?
Как можно улучшить эту статью?