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

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

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

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

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

Тип кода Пример кода

HTML с переменными

Тип кода	Пример кода
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; }


<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.

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

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

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

HTML

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

CSS

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

Требуется помощь?

Попробуйте следующее: