UTM метки в настройках объявлений Я.Директ

HTTPS://www.SITE.ru?utm_source=yandex&utm_medium=cpc&utm_campaign=kurtki_poisk&type={source_type}&source={source}&block={position_type}&position={position}&utm_term={keyword}
/?utm_source=yandex&utm_medium=cpc&utm_campaign=nozi_msk_poisk_sety&type={source_type}&source={source}&block={position_type}&position={position}&utm_term={keyword}
?utm_source=yandex&utm_medium=cpc&utm_campaign=chaga_poisk_russia&type={source_type}&source={source}&block={position_type}&position={position}&utm_term={keyword}
?utm_source=yandex&utm_medium=cpc&utm_campaign=chaga_poisk_moscow&type={source_type}&source={source}&block={position_type}&position={position}&utm_term={keyword}
?utm_source=yandex&utm_medium=cpc&utm_campaign=chaga_seti_moscow&type={source_type}&source={source}&block={position_type}&position={position}&utm_term={keyword}
UTM-метки, HTTPS

Как превратить каталог интернет-магазина в готовые баннеры для контекстной, таргетированной рекламы и SMM

Шаг 1. Парсим данные о товарах

Установим расширение Data Scraper для браузера Google Chrome. Data Scraper позволяет собирать текстовую информацию, изображения, адреса страниц и другие данные с сайтов и скачивать их в Excel или CSV.
Мы хотим спарсить каталог наборов для бритья Muehle — для этого перейдем в раздел «Наборы для бритья» сайта muehle-shaving.ru и активируем расширение. В появившемся окне выберем New Recipe, чтобы перейти к инструменту Recipe Creator, с помощью которого мы извлечем нужные данные о товарах. Теперь по шагам разберем настройки парсинга.
Определяем тип страниц для парсинга: активируем расширение Data Scraper → New Recipe → 1 Start → выбираем тип сканируемой страницы
1 Start: на первом шаге нужно выбрать тип страницы. Выберите List Page, если парсите данные из каталога товаров, или Detail Page при работе с карточкой товара. Мы находимся в каталоге наборов для бритья, где много товаров, размещенных на нескольких страницах, поэтому остановимся на варианте List Page.

На скриншоте примеры List Page и Detail Page
2 Rows: теперь необходимо показать системе первый контейнер с нужными данными, то есть определенную область на странице, чтобы программа нашла на этой же странице все аналогичные области. Для нас этим контейнером является блок с краткими сведениями о товаре.

Пример контейнера с данными — кратким описанием товара
В расширении нажмем кнопку Find. Наведем курсор на область с данными о первом товаре, а когда в оранжевую область попадет название, цена и фото товара, зажмем клавишу Shift. В меню Recipe Creator появятся элементы HTML, описывающие выбранную вами область.
Кликните в расширении на название класса: если на странице аналогичные области выделяются в зеленую рамку, значит, элемент определен верно. Подтверждаем выбор кнопкой Confirm. Если на этом шаге у вас возникнут сложности, посмотрите подробный видеоурок.
Находим область данных: на шаге 2 Rows нажимаем Find → наводим курсор на нужную область страницы → зажимаем Shift для добавления элементов
3 Cols: этот шаг похож на предыдущий — сначала мы нашли контейнер с данными, а теперь найдем элементы HTML, которые содержат следующие данные:
  • название товара — Product;
  • цена товара — Price;
  • изображение — Image.
Для этого дадим название столбцам (Product, Price, Image), выберем тип извлекаемых данных и снова через кнопку Find найдем нужные данные. Удобнее всего выбрать родительский элемент через кнопку Select Parent, а затем, прокликивая стрелки в разделе Choose A Sibling Element, найти нужный элемент.
Создаем столбцы с данными о товарах: на шаге 3 Cols нажимаем Find → наводим курсор на данные о товарах → зажимаем Shift для добавления элементов
4 Nav: Чтобы Data Scraper смог спарсить данные о товарах, расположенных на следующих страницах каталога, нужно показать системе кнопки пагинации, то есть кнопки переключения на вторую и последующие страницы. Если в пагинации помимо номеров страниц есть кнопки переключения «Вперед» и «Назад», то достаточно через кнопку Find найти кнопку «Вперед» и указать ее.

В нашем случае в пагинации нет таких кнопок, для переключения нужно использовать кнопки с номерами страниц. Поэтому, чтобы спарсить товары на всех страницах пагинации, указываем в поле Element Selector такое выражение для идентификации всех страниц пагинации: «b-pagination_list span + a».
Чтобы проверить, верно ли вы указали элементы пагинации, выполните команду Test Navigation. Если при клике на кнопку происходит перемещение по страницам, значит, элемент указан верно.
Определяем элементы пагинации по страницам каталога: на шаге 4 Nav нажимаем Find → наводим курсор на кнопки пагинации → зажимаем Shift для добавления элемента → при необходимости редактируем элемент
5 Actions и 6 JS — необязательные шаги, пропустим их. Actions – автоматически прощелкивает элементы на странице или прокручивает страницу вниз прежде, чем извлечь из неё данные. JS – выполняет различные действия с помощью Javascript, например, очищает данные от ненужных элементов.
7 Save: дадим название проекту, сохраним его и выполним парсинг первой страницы.
Сохраняем проект парсинга: на шаге 7 Save в поле Recipe name указываем название проекта → Save → Run Recipe
Чтобы собрать данные следующих страниц в каталоге, кликнем Next Page на вкладке Pagination и нажмем Start Pagination. Выгрузим собранные данные: Download, затем «as .XLSX». Обратите внимание на количество страниц, указанное по умолчанию в меню Scrape 10 pages before stopping. Если у вас больше 10 страниц, скорректируйте значение.
Парсим данные со всех страниц каталога: Next Page → Start Pagination → Download → as .XLSX
Вы также можете спарсить сайт с помощью инструмента Import.io. О нем мы рассказали в прошлой статье.

Шаг 2. Загружаем изображения товаров

Скачаем макрос «Загрузка изображений из интернета по ссылкам в одну папку», автор Игорь Вахненко.
При открытии файла включим макросы. Удалим таблицу в файле и вставим данные из Data Scraper. Пронумеруем строки: добавим столбец со значениями «001», «002» и так далее. Затем кликнем правой кнопкой мыши по кнопке «Запуск» и выберем в меню «Назначить макрос». Чтобы отредактировать макрос, нажмем «Правка».
В коде макроса нужно указать свои значения в следующих строках:
  • Const НазваниеПапкиДляФайлов$ = "Фотографии"
    Оставим без изменения: папка, в которую будут скачаны фотографии, будет называться «Фотографии».
  • Const НомерСтолбцаСГиперссылками = 6
    Укажем 4 вместо 6: адреса изображений в нашем случае расположены в столбце 4.
  • Const НомерСтолбцаСИменамиФайлов = 4
    Укажем 1 вместо 4, чтобы фотографии были названы по значениям из столбца с нумерацией. Вы можете выбрать любой столбец, но помните, что для некоторых операционных систем существуют ограничения на использование определенных символов в названии файлов.
Сохраним изменения в коде и запустим макрос с помощью кнопки «Запуск». Дождемся завершения скачивания и перейдем в папку с фотографиями.
Выгрузка изображений в одну папку: открываем файл с макросом → включаем макросы → удаляем таблицу в файле и вставляем таблицу из Data Scraper → Запуск → назначить макрос → редактируем код → сохраняем изменения → запускаем макрос
Чтобы Photoshop смог подставить загруженные изображения в баннеры, нужно указать пути к фотографиям. В папке выделим все изображения через сочетание клавиш Ctrl+A, далее зажмем Shift и щелкнем правой кнопкой мыши. В меню выберем пункт «Копировать как путь». Для Mac: клик правой кнопкой мыши, затем зажимаем Alt и выбираем «Скопировать путь до». Возвращаемся в файл Excel и нажимаем Ctrl+V, чтобы вставить пути.
Чтобы соотнести названия товаров с путями изображений, выполним сортировку от А до Я в столбце с путями. После вставим пути изображений в столбец Image.
Добавляем в таблицу с данными пути изображений: выделяем все изображения в папке через Ctrl+A → зажимаем Shift и выбираем «Копировать как путь» → вставляем пути в файл через Ctrl+V → сортируем столбец с путями
На этом этапе мы добавили в таблицу с данными полные пути к изображениям. Если необходимо отредактировать данные в столбцах Product и Price, сделайте это сейчас. Мы добавим символ рубля в столбец Price.
Вот что у нас получилось:

Шаг 3. Готовим набор данных

В статье «Создание изображений, управляемых данными» справки Adobe Photoshop идет речь о функции Data-driven graphics. Она позволит создать баннеры на основе данных из нашей таблицы — «Набора данных» в терминологии Photoshop. Значения из столбцов Product, Price, Image будут подставляться в шаблон баннера, это позволит создать креатив под каждый товар.
Для Photoshop нужен набор данных в формате CSV. Нажмем в Excel «Файл», далее «Сохранить как», выберем тип файла CSV UTF-8 (разделитель — запятая). Файл в CSV мы будем загружать в Photoshop.

Шаг 4. Создаем шаблон баннера

Есть два способа создать шаблон:
  • купить готовый шаблон баннера на специализированном сайте — например, Envato Elements;
  • заказать изготовление баннеров у дизайнера.
Если баннер будет готовить дизайнер, предоставьте ему техническое задание. Ориентируйтесь на требования площадки, для которой готовите креативы — «Яндекс.Директ», Google Ads, Facebook и так далее. Вот какие требования мы попросили учесть дизайнера для контекстной рекламы.

Технические требования

  1. Размер файла. Для «Яндекс.Директа» максимальный размер файла — 120 КБ, для Google Ads — 150 КБ. Рекомендуем при создании ориентироваться на размер 120 КБ, чтобы он подходил двум площадкам.
  2. Формат файла. Шаблон баннера должен быть в формате .psd.
  3. Разрешение баннера. В таблице приведены требования к разрешению баннеров в пикселях. Рекомендуем создавать креативы с разрешениями: 240 х 400, 300 х 250, 300 х 600, 336 х 280, 729 х 90 — обычно они получают наибольший охват.

В таблице рекомендации по использованию баннеров разных размеров

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

  1. Баннер должен содержать информацию о рекламодателе: название магазина или организации, логотип, домен.
  2. На баннере должна быть контрастная рамка по контуру размером 1 px.

Требования к концепции

  1. В PSD-шаблоне баннера на отдельных слоях должны находиться элементы, в которые будут подставляться данные. В нашем случае это:
  • название товара — Product;
  • цена товара — Price;
  • изображение — Image.
Для удобства рекомендуем называть слои так же, как и столбцы в наборе данных. Если столбец с ценой товара в наборе данных называется Price, то и слой с ценой в Photoshop должен называться Price.
2. При выборе цветовой гаммы баннера дизайнер должен ориентироваться на цвета товаров, под которые готовится шаблон. Рекомендуем использовать нейтральные оттенки или создавать отдельные шаблоны под товары разных цветовых групп.
3. Текстовые блоки, логотип и другие элементы на баннере не должны наезжать на изображение товара.
4. В шаблоне можно разместить следующую информацию о товаре:

Все требования мы собрали в шаблоне ТЗ — вы можете взять его за основу при постановке задачи дизайнеру.
Вот шаблон, который изготовил дизайнер под наборы бритв по ТЗ:

Шаг 5. Генерим баннеры по набору данных

Откроем шаблон баннера в Photoshop. Проверим названия слоев, куда будут подставляться данные, и убедимся, что каждый элемент — это отдельный слой.
Проверяем шаблон баннера: 1. соответствуют ли названия переменных столбцам из набора данных; 2. является ли каждая переменная отдельным слоем.
Переходим на вкладку «Изображение» и выбираем команду «Переменные», а затем «Определить». В меню «Слой» для слоя Price выбираем команду «Замена текста» и указываем название столбца из набора данных — Price.
Аналогичным образом поступаем со слоем Product, а для слоя Image выбираем «Замена пикселей» со способом «Подогнать». Далее нажимаем «Вперед», затем «Импорт» и выбираем файл CSV c кодировкой Unicode (UTF-8). Дважды нажимаем кнопку «ОК».
Создаем набор переменных: Изображение → Переменные → Определить → указываем переменную для каждого слоя → импортируем CSV-файл
Чтобы оценить результат, перейдем снова на вкладку «Изображение» и выберем «Применить набор данных». Активируем чекбокс «Просмотр» и оценим результат.
Применяем набор данных: Изображение → Применить набор данных → Чекбокс «Просмотр»
Сначала сохраняем все баннеры в .psd. Перейдем на вкладку «Файл» — «Экспортировать» — «Наборы данных как файлы». Далее выбираем, в какую папку сохранить psd-файлы. Затем снова переходим на вкладку «Файл» и выбираем команду «Сценарии» — «Обработчик изображений».
В пункте «Выбрать изображения для обработки» выбираем папку с psd-файлами, а в «Выбрать место для сохранения обработанных изображений» выбираем, в какую папку сохранить готовые баннеры. Тип файла — JPEG.
Сохраняем баннеры в JPEG: Файл → Экспортировать → Наборы данных как файлы → выбираем папку для сохранения →  Файл → Сценарии → Обработчик изображений → выбираем папку с psd-файлами и папку для JPEG → Выполнить

Результат — тысячи готовых баннеров:


Авторы: Ната Нефедьева, Мариам Оганесян
Баннеры, Реклама

Маркировка рекламы

Изменения в ФЗ «О рекламе» вступили в силу еще 1 сентября 2022 года. Согласно новым требованиям, вся реклама в интернете должна: 

  • Иметь маркировку, состоящую из пометки «реклама» и информации о рекламодателе.
  • Размещаться с индивидуальным идентификатором (токеном), полученным у ОРД — оператора рекламных данных.

1 сентября 2023 г. за несоблюдение новых требований начнут штрафовать.

Партнерам, которые продвигают сервисы, необходимо самостоятельно заключить договор с ОРД, получать индивидуальные идентификаторы рекламных материалов и отчитываться за свои действия в качестве рекламораспространителя в ЕРИР.

Маркировать нужно: баннеры, видеоролики, сторис, промопосты, интеграции, если они не нативные. В инструкции ниже рассказываем, как промаркировать баннер по новым требованиям.

Работа в ЛК ОРД

Выбрать ОРД — оператора рекламных данных. Выбрать ОРД можно из списка по ссылке. В инструкции далее мы будем использовать в качестве примера Личный кабинет Ozon ОРД. 

  1. Получить доступ к личному кабинету ОРД
    Чтобы познакомиться с интерфейсом ОРД Ozon и протестировать интеграцию через API, вы можете воспользоваться тестовой версией ОРД Ozon — Sandbox.
  2. Добавить площадки
    После получения доступа к личному кабинету ОРД вам необходимо добавить площадки — информационные ресурсы, на которых планируется размещать рекламу. Например, сайт, приложение или информационная система, в которых будет демонстрироваться реклама.
    Если данные заполнены неправильно, вы получите уведомление в Центре уведомлений ЛК ОРД. 
  3. Добавить контрагентов
    При добавлении информации о контрагенте определите вашу роль в зависимости от расположения в цепочке договоров. Выберите тип контрагента:
    • рекламораспространитель — лицо, осуществляющее распространение рекламы любым способом, в любой форме и с использованием любых средств
    • оператор рекламных систем — лицо, осуществляющее деятельность по обеспечению функционирования рекламной системы
  4. Добавить договор
    Добавить документ, согласно которому вы обязуетесь разместить рекламу. В нашем случае это посреднический договор. Дата договора = дата регистрации в партнерской программе.
  5. Добавить креатив
    Креативы — это формы распространения рекламы в интернете: графические, текстовые, видео или аудиоматериалы. При регистрации креатива ОРД присваивает ему уникальный идентификатор — токен, который будет храниться в базе данных ОРД.
    ОРД передает токен в ЕРИР для регистрации. После того, как ЕРИР зарегистрирует токен, ОРД сообщит об этом пользователю.
  6. Добавить токен на креатив
    При формировании кода баннера выбираем, куда будет вести ссылка. Код партнера подтянется автоматически. Можно ввести метку SUBID отслеживания рекламной кампании для дальнейшей работы со статистикой по креативу. 
    После заполнения нажимаете «Скопировать ссылку». Далее вставьте токен в ссылку через параметр &erid=XXXXX, где вместо XXXXX вставьте код токена. Пример ссылки: https://kontur.ru/extern/order?p=код_партнера&erid=XXXXX.
  7. Разместить баннер 
    После добавления токена в ссылку баннер можно разместить на сайте. 

Предоставление статистики

Статистику нужно зарегистрировать в ЕРИР в течение 30 дней, следующих за месяцем, в котором был первый показ креатива. 

То есть при постоянном показе рекламы отображать статистику в ЛК ОРД нужно ежемесячно. Отслеживать статистику можно во вкладке Статистика кабинета партнера. Чтобы разделять рекламные кампании в статистике, рекомендуем использовать метку SUBID при создании ссылки.

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

В ссылке. Добавьте идентификатор в ссылку как параметр в виде «https://site.ru/?erid=XXXXX», где «erid=XXXXX» — токен. Дополнительно можно разместить ссылку в выпадающем меню рекламного объявления.

В тексте. Добавьте идентификатор в начале текста рекламного объявления в формате «erid: XXXXX».

На изображении. Разместите идентификатор поверх изображения текстом в формате «erid: XXXXX» или в выпадающем меню рекламного объявления.

В видео. Разместите идентификатор перед видео или в начале поверх него текстом в формате «erid: XXXXX» или в выпадающем меню рекламного объявления.

В рекламных врезках (midroll). Разместите идентификатор во время демонстрации врезки перед видео или в начале поверх него или в выпадающем меню рекламного объявления.

В трансляции. После окончания трансляции разместите идентификатор в начале видеозаписи поверх видео в формате «erid: XXXXX» или в выпадающем меню рекламного объявления. Если рекламных интеграций несколько, разместите идентификаторы одним общим текстом в несколько строк.

Кружок в Telegram. Разместите идентификатор текстом в формате «erid: XXXXX» в следующем за кружком сообщении или ответом на него — это поможет сохранить связность сообщений.

В сториз. Разместите идентификатор текстом поверх видео в начале ролика в формате «erid: XXXXX». Если в сториз изображение, разместите идентификатор поверх него текстом в формате «erid: XXXXX».

В подкасте. Разместите идентификаторы одним общим текстом в формате «erid: XXXXX» в описании выпуска подкаста.

Аудиореклама. Разместите идентификатор в интерфейсе аудиоплеера во время проигрывания рекламной врезки в формате «erid: XXXXX».

В архивной статье. Если статью опубликовали до 1 сентября 2022 года, но она еще доступна для чтения — укажите дату ее публикации. Размещать токен при этом не нужно.

Маркировка рекламы