Как создавать рекламу в Gmail на основе собственного HTML-кода

На основе собственного HTML-кода опытные рекламодатели могут создавать нестандартные объявления в Gmail. В такую рекламу можно добавить видеоролик или несколько призывов к действию. Чтобы создать объявление Gmail собственного формата, необходимо загрузить HTML-файлы в AdWords. 

Из этой статьи вы узнаете, как создавать и загружать собственные объявления для Gmail.

Начало работы

Важно! В объявлениях для Gmail на основе собственного HTML-кода используются целевые URL, а конечные URL и шаблоны отслеживания не поддерживаются. Подробнее об обновленных URL

 

Большинство пользователей применяет для управления аккаунтами новый интерфейс Google Рекламы. Если вы используете старый интерфейс AdWords, выберите ниже прежнюю версию. Подробнее…

Инструкции

Объявление для Gmail на основе собственного HTML-кода – это ZIP-архив, содержащий все файлы для свернутого и развернутого объявления. Во избежание проблем соблюдайте указанные ниже требования к формату.

Общие ограничения:

  • Макс. размер ZIP-архива: 1,25 МБ
  • Макс. количество файлов: 100
  • Макс. размер файла: 500 КБ

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

Чтобы создать свернутое объявление, добавьте в ZIP-архив 2 файла:

  • логотип (logo.png, logo.jpg или logo.gif);
  • текстовый файл (teaser.txt).

Требования к логотипу

Необходимо использовать только файлы в формате PNG, JPG или GIF с именем logo.png, logo.jpg или logo.gif.

  • Макс. размер изображения: 144 x 144 пикс.
  • Макс. размер файла: 500 КБ.
  • Формат файла: PNG, JPG или GIF (без анимации).

Логотип – небольшой значок, картинка или логотип бренда.

Это квадратное изображение размером 50 х 50 пикселей на устройствах со стандартным разрешением или 144 х 144 пикселя на экранах с высоким разрешением. 

Требования к текстовому файлу

Необходимо использовать только файлы в формате TXT с именем teaser.txt. Ниже приведен пример текстового файла.

Advertiser: Business Name
Subject: Everything 20% Off at Business Name
Description: Buy new products at low prices!
Display Url: www.example.com
Landing Page: https://www.example.com/sale

Примечание. Заполните поля, в точности следуя примеру. Необходимо и указать категории (такие как Advertiser), и добавить свои материалы. В таблице ниже вы найдете ограничение на количество символов и подробное описание для каждого поля.

  Ограничение на число символов Что следует указать
Advertiser 20 Домен или название компании.
Subject 25 Заголовок может содержать сведения об акциях, скидках и преимуществах.
Description 100 Краткое описание или призыв к действию.
Display URL 32 URL, который будет показываться в объявлении.
Landing page без ограничений URL переадресации тизера – это целевой URL, по которому переходят пользователи после клика по отображаемому короткому URL отправителя в развернутом объявлении. В это поле можно добавить статический URL отслеживания кликов. Это страница, открывающаяся после клика по отображаемому URL.

 

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

Чтобы создать развернутое объявление, добавьте в ZIP-архив 1 HTML-файл и 1 папку с изображениями:

  • папка с изображениями (Images), которая содержит файлы изображений для развернутого объявления;
  • HTML-файл (index.html).

Требования к папке с изображениями

  • В объявлении должно быть от 1 до 100 изображений. Как добавить видеоролик, читайте в соответствующем разделе ниже.
  • Максимальная ширина: 650 пикс.
  • Максимальная высота: 1000 пикс. (мы рекомендуем показывать объявления, в которых изображение вместе с текстом занимает в высоту не больше 650 пикс.).

Требования к HTML-файлу

Технические сведения

  • URL. Объявление должно содержать от 1 до 15 абсолютных URL. Особые символы (пробелы, знаки решетки и т. п.) необходимо закодировать.
  • Форматирование. Используйте стандартные таблицы HTML, чтобы контент выглядел одинаково на всех устройствах.
  • Отслеживание. Можно использовать статические URL для отслеживания внешних кликов. Использовать пиксели отслеживания и динамические URL отслеживания запрещено. Если вы используете шаблон "HTML-объявление в Gmail", убедитесь, что все URL отслеживания добавлены в файлы index.html и teaser.txt.
  • Разметка. Поддерживается язык HTML (с кодировкой UTF8), некоторые теги HTML5 (ARTICLE, ASIDE, FIGCAPTION, FIGURE, FOOTER, HEADER, MARK, SECTION, TIME, WBR) и частично CSS (только атрибут style в тегах, например <div style="color: black">).

Запрещенные виды разметки

  • JavaScript (теги <script> автоматически удаляются из объявлений);
  • таблицы стилей (теги <link> автоматически удаляются из объявлений);
  • Flash;
  • HTML5 (поддерживаются только теги ARTICLE, ASIDE, FIGCAPTION, FIGURE, FOOTER, HEADER, MARK, SECTION, TIME, WBR);
  • аудио;
  • окна iframe;
  • анимированные изображения (в формате GIF).

Поддерживаемые элементы CSS

azimuth border-right-color font-size-adjust list-style padding-bottom text-decoration-style
background border-right-style font-stretch list-style-image padding-left text-emphasis
background-attachment border-right-width font-style list-style-position padding-right text-emphasis-color
background-blend-mode border-spacing font-synthesis list-style-type padding-top text-emphasis-style
background-clip border-style font-variant margin pause text-indent
background-color border-top font-variant-alternatives margin-bottom pause-after text-justify
background-image border-top-color font-variant-caps margin-left pause-before text-kashida-space
background-origin border-top-left-radius font-variant-east-asian margin-right pitch text-orientation
background-position border-top-right-radius font-variant-ligatures margin-top pitch-range text-overflow
background-repeat border-top-style font-variant-numeric marker-offset quotes text-transform
background-size border-top-width font-weight max-height richness text-underline-position
border border-width height max-width speak unicode-bidi
border-bottom box-sizing image-orientation min-height speak-header vertical-align
border-bottom-color caption-side image-resolution min-width speak-numeral voice-family
border-bottom-left-radius clear ime-mode mix-blend-mode speak-punctuation white-space
border-bottom-right-radius color isolation object-fit speech-rate width
border-bottom-style direction layout-flow object-position stress word-break
border-bottom-width display layout-grid opacity table-layout word-spacing
border-collapse elevation layout-grid-char outline text-align word-wrap
border-color empty-cells layout-grid-char-spacing outline-color text-align-last writing-mode
border-left float layout-grid-line outline-style text-autospace zoom
border-left-color font layout-grid-mode outline-width text-combine-upright  
border-left-style font-family layout-grid-type overflow text-decoration  
border-left-width font-feature-settings letter-spacing overflow-x text-decoration-color  
border-radius font-kerning line-break overflow-y text-decoration-line  
border-right font-size line-height padding text-decoration-skip  

Как добавить видео в HTML-файл развернутого объявления

  1. Как добавить видео

    Вы можете вставить в объявление видео YouTube с окном просмотра. Если пользователь нажмет на изображение, начнется воспроизведение видео в окне просмотра прямо в Gmail. После окончания воспроизведения опять появится развернутое объявление. На мобильных устройствах видео воспроизводится в выбранном пользователем проигрывателе (например, в приложении YouTube или браузере). 

    Инструкции. Чтобы добавить видео из YouTube, закодируйте соответствующим образом ссылку на видео, источник изображения и отображаемый текст. Пример:

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0"><img src="images/play.jpg" alt="Видео Gmail"></a>

    Примечание. Во время предварительного просмотра объявления в AdWords видео YouTube не будет показываться и воспроизводиться в окне просмотра.

  2. Как настроить показ видео на новой вкладке

    Если вы хотите, чтобы видео воспроизводилось не в окне просмотра, а на новой вкладке на YouTube, укажите значение nonplayable для параметра class.

    Пример:

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0" class="nonplayable"><img src="images/play.jpg" alt="Видео Gmail"></a>

  3. Обязательно добавьте в изображение кнопку "Воспроизвести"

    Чтобы пользователи понимали, что при нажатии на изображение начнется воспроизведение видео, необходимо добавить соответствующую кнопку. AdWords не размещает такие элементы в ваших изображениях.

  4. Как удалить оверлеи из встроенного видео

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

Как добавить форму в HTML-файл развернутого объявления

Примечание. Эта функция доступна только для клиентов из белого списка. 

В объявление для Gmail можно добавить HTML-форму, чтобы сократить путь конверсии. При создании формы используйте HTML и поддерживаемые элементы CSS, а также только перечисленные ниже поля.

Конфиденциальность данных

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

Введенная пользователем информация передается непосредственно вам с помощью метода GET или POST. Она не поступает на серверы Google. Ответственность за обработку этих данных возлагается на вас.

Обратите внимание, что пользователи могут с сомнением отнестись к заполнению форм HTML в объявлениях или просто не захотят предоставлять определенную информацию вне вашего сайта.

Прежде чем создавать форму HTML, задайте себе следующие вопросы:

  • Возможно ли, что запрашиваемая информация не пригодится для формирования интересного предложения?
  • Возможно ли, что запрашиваемая информация нанесет ущерб пользователю, если попадет не в те руки?

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

Шаг 1. Создайте форму

Ниже приведены допустимые поля формы HTML для рекламы в Gmail.

Основная информация Допустимые поля формы
Категория Имя и фамилия
Адрес
Город
Регион
Почтовый индекс
Страна
Адрес электронной почты
Номер телефона
Возраст
13–18
18–24
От 25 до 34 лет
От 35 до 44 лет
45–54
55–64
65 и старше
Пол
В какое время удобно звонить
Программа или продукт
Образование Год выпуска
Высшее учебное заведение
Местоположение и тематика Желаемое место предоставления услуги
Тип услуги
Финансирование и страхование
(диапазоны в рублях):
0–14 999
15 000–24 999
25 000–39 999
40 000–59 999
60 000–74 999
75 000–99 999
Более 100 000
Сумма кредита (диапазон)
Валюта
Тип финансов (кредит, ипотека, кредитная карта)
Семейный доход (диапазон)
Инвестиционные активы (диапазон)
Сумма покрытия страхования жизни (диапазон)
Военнослужащий
Владение или аренда (автомобиль, дом и т. д.)
Оцените свою кредитоспособность
очень плохо
плохо
удовлетворительно
хорошо
отлично
Стоимость дома (диапазон)
Автомобили Производитель/модель автомобиля
Путешествия Отправной пункт или пункт назначения
Дата отъезда/возвращения
Для представителей бизнеса Компания
Работа
Должность
Количество сотрудников
1–10
10–50
50–100
100–500
Более 500

Шаг 2. Настройте проверку полей

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

Обязательное поле Чтобы поле не осталось пустым, добавьте атрибут required. <input required type="text" size="25">
Номер телефона* Чтобы ввести номер телефона в правильном формате, добавьте атрибут x-autocompletetype="phone-full". Длина номера не должна превышать 10 цифр. <input type="text" x-autocompletetype="phone-full" size="25">
Адрес эл. почты* Чтобы ввести адрес эл. почты в правильном формате, добавьте атрибут x-autocompletetype="email". Адрес должен быть указан в формате xxx@xxx.xxx. <input type="text" x-autocompletetype="email" size="25"
Почтовый индекс* Чтобы ввести почтовый индекс в правильном формате, добавьте атрибут x-autocompletetype="postal-code". Индекс должен начинаться с 5 цифр. <input type="text" x-autocompletetype="postal-code" size="25">

*Если поле не помечено как обязательное (т. е. не содержит атрибут required), оно проверяется, только если в нем указано какое-либо значение.

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