Добавление кода для нативных объявлений

При использовании варианта Редактор HTML и CSS настройка и оформление нативных объявлений выполняется путем добавления кода HTML и CSS. Процедура его внедрения описывается в этой статье.

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

Пример стиля нативного объявления

Ниже приведен пример кода HTML и CSS для нативного объявления. Оно предназначено для фида, и его размер может варьироваться. За основу этого стиля взят шаблон нативного объявления, содержащий такие переменные, как заголовок, изображение и текст.

Тип кода Пример кода
HTML с переменными

<div class="sponsored-post">
    <div class="thumbnail"></div>
    <div class="content">
        <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1>
        <p>[%Body%]</p>
        <div class="attribution">SPONSORED</div>
    </div>
</div>
CSS с переменными
.sponsored-post {
    background-color: #fffdeb;
    font-family: sans-serif;
    padding: 10px 20px 10px 20px;
}

.content {
    overflow: hidden;
}

.thumbnail {
    width: 120px;
    height: 100px;
    float: left;
    margin: 0 20px 10px 0;
    background-image: url([%Image%]);
    background-size: cover;
}

h1 {
    font-size: 18px;
    margin: 0;
}

a {
    color: #0086b3;
    text-decoration: none;
}

p {
    font-size: 16px;
    color: #444;
    margin: 10px 0 10px 0;
}

.attribution {
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    display: inline-block;
    letter-spacing: 2px;
    background-color: #ffd724;
    border-radius: 2px;
    padding: 4px;
}

Этот стиль преобразует следующие компоненты нативного объявления:

Компонент Пример
Заголовок 30 самых динамично развивающихся профессий
Изображение jobs.jpg
Текст По данным Бюро трудовой статистики США, в течение следующих 10 лет эти профессии будут развиваться наиболее активно. Список может вас удивить.

В результате объявление выглядит так:

HTML

Добавьте код HTML, который будет определять вид вашего нативного объявления.

  • Возможно, вам понадобится помощь разработчика сайта или приложения.
  • Код HTML может включать JavaScript в тегах <script>.
  • Укажите только код, который непосредственно отвечает за оформление объявления. Если добавить документ HTML полностью, объявления нельзя будет показывать в некоторых браузерах, например Internet Explorer. В частности, не следует добавлять теги <doctype> и <html> (ознакомьтесь с примером выше).
  • Нативные объявления не наследуют стили страницы, на которой они размещены. Однако вы можете импортировать внешние таблицы стилей и веб-шрифты, добавив в HTML-код тег <link>.

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

Функция вставки макроса

Чтобы упростить написание кода HTML, вы можете нажать Вставьте макрос и использовать указанные ниже кнопки.

  • CacheBuster. Это макрос блокировки кеша. Он используется для того, чтобы сервер объявлений получал новый запрос при каждом выполнении кода, благодаря чему обеспечивается точная статистика показов. Подробнее…
  • Клик (рекомендуется). Он позволяет получать статистику в случае, если фрагмент кода не содержит специальных символов. Подробнее…
  • URL перехода по клику. Так вы укажете целевую страницу, на которую будет переходить пользователь при нажатии на объявление. Подробнее…
  • Клик с экранированием. Он позволяет получать статистику, даже если URL перехода по клику в вашем коде содержит специальные символы, например, &, ?, %. Подробнее…
  • Контейнер видеообъявления. Контейнер, в котором содержится проигрыватель для нативного объявления. Подробнее…

CSS

Вы можете создать код CSS, который будет определять вид вашего нативного объявления. См. пример выше.

Если вы показываете нативные объявления с размером "Гибкий", не используйте абсолютное позиционирование в CSS.
Эта информация оказалась полезной?
Как можно улучшить эту статью?