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

Кейс Muehle Россия и агентства по контекстной рекламе Adgasm.io. Рассказываем, как создать тысячи баннеров под каждый продукт интернет-магазина с помощью бесплатных сервисов, минимальных знаний Photoshop и одного дизайнера.

Шаг 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​
На скриншоте примеры 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 найти кнопку «Вперед» и указать ее.

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

В нашем случае в пагинации нет таких кнопок, для переключения нужно использовать кнопки с номерами страниц. Поэтому, чтобы спарсить товары на всех страницах пагинации, указываем в поле 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.

Вот что у нас получилось:

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

Шаг 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. В шаблоне можно разместить следующую информацию о товаре:

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

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

Вот шаблон, который изготовил дизайнер под наборы бритв по ТЗ:

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

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

Откроем шаблон баннера в Photoshop. Проверим названия слоев, куда будут подставляться данные, и убедимся, что каждый элемент — это отдельный слой.

Проверяем шаблон баннера: 1. соответствуют ли названия переменных столбцам из набора данных; 2. является ли каждая переменная отдельным слоем.

Переходим на вкладку «Изображение» и выбираем команду «Переменные», а затем «Определить». В меню «Слой» для слоя Price выбираем команду «Замена текста» и указываем название столбца из набора данных — Price.

Аналогичным образом поступаем со слоем Product, а для слоя Image выбираем «Замена пикселей» со способом «Подогнать». Далее нажимаем «Вперед», затем «Импорт» и выбираем файл CSV c кодировкой Unicode (UTF-8). Дважды нажимаем кнопку «ОК».

​Создаем набор переменных: Изображение → Переменные → Определить → указываем переменную для каждого слоя → импортируем CSV-файл

Чтобы оценить результат, перейдем снова на вкладку «Изображение» и выберем «Применить набор данных». Активируем чекбокс «Просмотр» и оценим результат.

Применяем набор данных: Изображение → Применить набор данных → Чекбокс «Просмотр»

Сначала сохраняем все баннеры в .psd. Перейдем на вкладку «Файл» — «Экспортировать» — «Наборы данных как файлы». Далее выбираем, в какую папку сохранить psd-файлы. Затем снова переходим на вкладку «Файл» и выбираем команду «Сценарии» — «Обработчик изображений».

В пункте «Выбрать изображения для обработки» выбираем папку с psd-файлами, а в «Выбрать место для сохранения обработанных изображений» выбираем, в какую папку сохранить готовые баннеры. Тип файла — JPEG.

​Сохраняем баннеры в JPEG: Файл → Экспортировать → Наборы данных как файлы → выбираем папку для сохранения →  Файл → Сценарии → Обработчик изображений → выбираем папку с psd-файлами и папку для JPEG → Выполнить

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

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

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

Больше хаков и нюансов контекстной рекламы — в Telegram-канале Заметки Adgasm.io

222222
95 комментариев

Вот это полезная статья, Спасибо!

29
Ответить

Спасибо 🙏

4
Ответить

Используйте фигму и плагин Google Sheets Sync. Это то же самое, но избавит от кучи файлов, + картинки не нужно будет сохранять локально и делать все по кругу при изменении каталога. 

в добавок, к такой связке можно настроить один баннер так, что все (или большинство) его ресайзов можно будет получить от исходного. 

11
Ответить

Тоже об этом подумал. Слишком много манипуляций в Ps.
Еще и русифицированный, организм прям отторгает )))

1
Ответить

В закладки!

10
Ответить

Однозначно! 

1
Ответить

ГОДНОТИЩА!

5
Ответить