Управление файлами объявлений

Как подготовить объекты 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 (об этом уже говорилось выше).

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

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

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

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

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

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

    • Максимальное количество файлов в ZIP-архиве: не более 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 важно для достижения ваших рекламных целей, попробуйте использовать вместо них настройки Менеджера кампаний. Например, некоторые рекламодатели задают с помощью API таргетинг и ограничивают частоту показов. Однако такие функции доступны и в Менеджере кампаний. Обратитесь в службу поддержки, и вам помогут найти альтернативные решения. Помните, что при сборе данных вы должны выполнять все требования по защите конфиденциальности пользователей, указанные в вашем договоре с Google Платформой для маркетинга.

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

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

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

Ресурсы

IAB и DoubleClick Studio

Размеры

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

В отличие от изображений и видео, документы 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 при загрузке.

Эта информация оказалась полезной?
Как можно улучшить эту статью?