Товарные рекомендации на сайте

Сайт – основной инструмент продаж для ecommerce. Чем лучше он конвертирует посетителей в покупателей, тем больше прибыль бизнеса и ROI не только от интернет-магазина, но и от рекламы и рассылок.

Блоки товарных рекомендаций решают эту задачу: посетители делают больше покупок за счет персональных рекомендаций и upsell-предложений, при этом улучшается покупательский опыт, т.к. алгоритмы подбора товаров учитывают интересы, ценовые предпочтения и сокращают время на поиск.

Примеры блоков:

  • Вам могут понравиться;
  • Покупатели, которые просматривали этот товар, также интересуются;
  • Специально для вас;
  • Не забудьте купить;
  • С этим товаром покупают;
  • Подобрано на основе ваших запросов;
  • Лучшее в своем роде и т. д.

Все это товарные рекомендации, которые добавлены на сайт, чтобы покупатель не ушел без покупки.

Персональные рекомендации формируются при наличии данных об интересах пользователя. Для того чтобы они собирались, у вас должен быть настроен веб-трекинг. Для начала использования рекомендаций на сайте подключите один из тарифных планов Extra.

Создание новой рекомендации

Прежде чем приступить к созданию новой рекомендации вы можете предварительно создать:

  • места размещений ваших рекомендаций;
  • внешний вид блока в стиле сайта.

Вкладки раздела

Или настроить их в процессе создания рекомендации.

Для добавления новой рекомендации зайдите в раздел “Сайт” → вкладка “Рекомендации” и кликните “Новая рекомендация”.

Добавление новой рекомендации

Далее переходите к настройке блока для показа на сайте.

1. Выбор страницы размещения рекомендации

Рекомендация может быть добавлена на страницы сайта одного из типов:

  • главная;
  • категория товаров;
  • карточка товара;
  • корзина;
  • 404.

От выбора страницы, где будет выводиться блок, зависит перечень доступных алгоритмов. Например, на главной можно вывести общие рекомендации, такие как товары-бестселлеры. Или персональные рекомендации, если пользователь заходит на сайт не первый раз и уже собрана его история просмотров. На странице товара доступны другие алгоритмы: товары, которые вы смотрели; похожие товары; с этим товаром покупают и т. д.

Тип страницы

Для настройки рекомендаций на страницах конкретного типа кликните по нему в предложенном списке. Если тип не выбрать и нажать внизу кнопку “Далее”, то по умолчанию откроются настройки для главной страницы.

2. Выбор источника рекомендаций

После выбора страницы показа вам открывается список возможных видов рекомендаций, которые вы можете использовать для нее.

Главная страница

Для вернувшихся пользователей на главной странице можно вывести блок с товарами, которые они просматривали ранее. А для тех, кто зарегистрирован, можно порекомендовать товары, отталкиваясь от их предыдущей активности в интернет-магазине.

Для показа блока рекомендаций выберите один из доступных алгоритмов для данной страницы. Это могут быть рекомендации на основе данных о контакте:

  • покупки каждого пользователя, которые собраны в бестселлеры;
  • персональные предпочтения, сформированные из предыдущей истории покупок пользователей.

Рекомендации на основе данных контактов

Или же можно применить один из общих алгоритмов:

  • Популярное на сайте – товары, которые чаще всего просматривают.
  • Бестселлеры на сайте – товары, которые чаще всего покупают.

Алгоритмы с общими рекомендациями

Важно!

Если о пользователе нет данных, то ему выводятся товары-бестселлеры.

Страница 404

Для страницы ошибки доступны те же алгоритмы, что и для главной.

Страница категории

Выберете один из алгоритмов формирования рекомендаций на основе данных о контакте или из общих рекомендаций.

По данным о контакте можно сформировать уникальный список товаров каждому пользователю. Для страницы доступны алгоритмы:

Рекомендации на основе данных контактов

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

Общие алгоритмы – такие же, как и для главной страницы:

  • Бестселлеры на сайте – товары, которые чаще всего покупают.
  • Популярное на сайте – товары, которые чаще всего просматривают.

Алгоритмы с общими рекомендациями

Страница товара

Для страницы товара доступно большее количество рекомендательных алгоритмов, построенных на

данных о контакте:

  • Персонально для вас, на основе бестселлеров на сайте (на основе покупок пользователя, самые продаваемые товары);
  • Персонально для вас (на основе покупок пользователя);
  • Персонально для вас из этой категории (на основе просмотров каждого пользователя).

Рекомендации на основе данных контактов

товарных данных:

  • Похожие товары (на основе категории, описания, названия и цены товара);
  • С этим товаром покупают (на основе покупок каждого пользователя).

Рекомендации на основе товарных данных

общие:

  • Бестселлеры на сайте (товары, которые чаще всего покупают);
  • Популярное на сайте (товары, которые чаще всего просматривают).

Алгоритмы с общими рекомендациями

Корзина

В корзине доступны все те же алгоритмы, что и на странице товара, только отсутствует алгоритм “Персонально для вас из этой категории” в группе на основе данных о контакте:

Рекомендации на основе данных контактов

Настройка фильтров

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

Новые правила

Для этого откройте настройки по стрелке в верхнем правом углу → перейдите в раздел “Источники данных” → найдите в списке интересующий алгоритм → нажмите “+ Добавить правило”. На открывшейся странице нужно вписать название и кликнуть по кнопке “Добавить правило”. Выберите тип правила из списка и настройте условие для фильтрации товаров.

Источники данных

3. Указание названия

После того как выбрана страница для размещения блока рекомендаций и алгоритм, по которому он будет формироваться, задайте название для блока. Так его будет проще найти в общем списке. Добавьте описание, чтобы сразу понимать, какая логика была заложена при создании данной рекомендации.

Название рекомендации

4. Выбор внешнего вида блока

На данном шаге настраивается внешний вид блока, который состоит из:

1) заголовка, который будет отображаться на сайте;

2) подборки рекомендаций в виде карточек товара.

Вид блока рекомендаций на сайте

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

Следующий шаг – выбор визуального оформления блока и товаров нем. Можно выбрать один из представленных готовых видов или загрузить свой HTML-код с CSS-стилями.

Выбор визуального оформления блока

Чтобы в доступных внешних видах у вас появился блок в стиле вашего сайта, загрузите его в разделе “Сайт” → “Внешний вид”.

Новый внешний вид

При клике на кнопку “Новый внешний вид” откроется редактор кода, где можно настроить блок рекомендаций в своем дизайне.

Редактор кода

HTML

Рекомендовано добавлять только содержимое тега

во вкладку HTML.

Если вы используете шаблон с ограниченной шириной, убедитесь, что на вашем сайте достаточно места.

CSS

Поскольку рекомендации будут встроены в сайт, стили сайта могут влиять на стили рекомендаций. Чтобы избежать этого, используйте уникальные классы (например, определенный префикс класса, который не используется в других местах на вашем сайте):

.es-productsContainer--link

Если этого недостаточно, нужно усилить вес селектора за счет промежуточного класса, например:

.es-productsContainer.es-productsContainer--link

При создании новой таблицы стилей используйте какое-либо оглавление. Это поможет вам быстро найти нужные фрагменты кода, когда его будет много. Например:

/* Container styles start */

Если вам нужно создать одно и то же правило CSS для нескольких элементов, поместите его в отдельный класс.

Velocity

Для вывода данных используется динамический контент Velocity.

Для отображения заголовка добавьте class с обращением к $!recom.header, пример:

$!recom.header

Все контейнеры рекомендаций нужно вставить внутрь цикла, пример:

#foreach( $!product in $!products )

//recommendation container

#end

Для обращения к переменным источника, например "названия", нужно обращаться через структуру $!product.name. Список стандартных переменных выводится в подсказке, если начать вносить $!pr, обращение ко всем остальным (кастомным) полям фида происходит через tags_ Пример:

$!product.tags_oldprice

С помощью velocity можно задать условие отображения значения, например отображать элемент только если значение поля равняется или не равняется заданному значению. Например, если поле Description из фида не пустое, для отображения кнопки "Описание" поместите её структуру в:

#if ($!product.descr != '')
$!product.get('descr')

#end

Пример пересчёта стоимости товара с учетом старой и новой цены:

#set($saleDiff = $product.tags_oldprice – $product.price)

#if($saleDiff > 0)

– $saleDiff грн.

#end

Пример отображения рейтинга продукта как 1-5 звезд (обязательно должно быть поддержано в CSS):

#set($filled = '') #set($notFilled = '') #set($start = 1) #set($end = 5) #set($range = [$start..$end]) #foreach($i in $range) #if ($i <= $product.tags_rating) $filled #end #if ($i > $product.tags_rating) $notFilled #end #end

Если вам подходит один из стандартных шаблонов, выберите его в качестве внешнего вида. Вы можете скопировать шаблонный вариант и на его основе создать собственный блок или же просто отредактировать копию шаблона под стиль своего сайта.

Шаблоны внешних видов

5. Указание места размещения рекомендации на странице

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

Выбор места размещения на странице

Для создания места размещения зайдите в “Сайт” → “Места размещения”, кликните по кнопке “Новое место размещения”:

Создание нового места размещения

Выберите страницу, где будет размещен блок.

Выбор страницы для размещения блока

Пропишите название рекомендации. Для удобства сформулируйте его с описанием места размещения блока и укажите саму страницу, где он будет находиться. Например: “На странице товара под ценой”.

Новое место размещения на странице товара

Укажите место размещение на сайте при помощи CSS-селектора.

Указание места размещения на странице сайта

Чтобы его найти, кликните правой кнопкой мыши в любом месте на странице и выберите “Посмотреть код”.

Активируйте инструмент “Выбрать элемент со страницы”, нажав на иконку со стрелкой:

Выбор элемента на странице

Кликните по элементу на странице, относительно которого будет размещена рекомендация (перед элементом/после/внутри элемента в его начале или в конце).

Выбор css-селектора

Нужный элемент в самой консоли будет выделен. Кликните правой кнопкой мыши по этой строке кода и в меню выберите Copy → Copy Selector.

Копирование селектора

Скопированный селектор вставьте в специальное поле вверху страницы настройки в eSputnik:

Указание расположения блока

Укажите метод размещения блока рекомендаций на странице по отношению к элементу на сайте:

  • перед;
  • после;
  • внутри (первый);
  • внутри (последний).

Метод вставки места размещения

Завершение создания рекомендации

Для завершения создания новой рекомендации нажмите внизу кнопку “Готово”. Вы попадете в список рекомендаций.
Зайдите в рекомендацию. На данном этапе она видна только вам. Для предпросмотра на сайте нажмите кнопку “Смотреть на странице”.

Просмотр отображения блока на сайте

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

Включение/выключение видимости рекомендаций на сайте

С этого момента она становится доступной всем пользователям и начинает собираться статистика работы блока.

Отображение в личном кабинете

Для удобства работы с рекомендациями на сайте доступны такие инструменты:

1) Поиск по ключевому слову.

Поиск по ключевому слову

2) Фильтр по страницам размещения. При переключении страниц размещения слева в списке рекомендаций будут отображаться только те, что размещены на соответствующей странице.

Цвет шрифта места размещения в списке соответствует цвету маркера типа страницы слева. Например, рекомендации на главной будут прописаны фиолетовым, страницы с товаром – желтым и т. д.

Фильтр рекомендаций по страницам размещения

3) Справа над списком можно отфильтровать данные за период: 1 день/7 дней/28 дней/текущий месяц/прошлый месяц/все время/нужный период.

Фильтр по периоду

Или по показателям: просмотрам/переходам/CTR/количеству покупок/количеству проданных товаров/сумме покупок/среднему чеку.

Фильтр по показателям

После добавления рекомендаций и их показа на сайте в списке рекомендаций отобразится статистика по ним:

  • просмотры;
  • переходы;
  • CTR;
  • количество покупок (транзакций);
  • продано товаров (количество единиц товара);
  • сумма покупок;
  • средний чек.

.Статистика по блокам рекомендаций

Пиктограмма “Пуск” перед названием рекомендации говорит о том, что рекомендация выводится на сайте. А перечеркнутый глаз – о том, что рекомендация видна только вам.

Пиктограммы активности рекомендаций на сайте

Удалить рекомендацию и статистику по ней можно, нажав на три точки в конце строки.

Удаление рекомендации и статистики по ней
Отчет

Для просмотра деталей отчета кликните по названию рекомендации в списке.

Вкладка “Статистика”

Вкладка Статистика

Первый блок отчета – воронка: просмотрели → перешли → купили. Данный отчет можно смотреть за нужный период: 1 день/7 дней/28 дней/текущий месяц/прошлый месяц/все время/период.

Выбор периода

Процент перешедших и купивших выводится по отношению к посмотревшим рекомендацию.

Ниже в виде графиков визуализирована динамика активности по тем же показателям: посмотревшим, купившим, CTR, покупкам, среднему чеку, сумме покупок.

Динамика активности

В конце представлена история изменений с датой и описанием внесенных правок. Она пишется, только если рекомендация находится в режиме “Видна посетителям сайта”.

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

Вкладка “А/В-тесты”

А/В-тесты важны для определения лучшего названия, внешнего вида, места размещения, в целом рекомендаций, которые будут приносить больше продаж.

Во вкладке “А/В-тест” в созданной рекомендации добавляются варианты для тестирования. Для добавления вариантов тестирования нажмите кнопку “Начать А/В-тест”.

Начать А/В-тест

Запустить тестирование также можно во вкладке “Параметры”, кликнув по кнопке “Начать А/В-тест”.

Начало А/В-теста на вкладке Параметры

Вкладка “Параметры”

Описание. На первом экране укажите, сколько вариантов будут участвовать в тестировании, вес каждого и опишите их.

Описание А/В-теста

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

Распределение веса между вариантами теста

По умолчанию проверяются 2 варианта – это минимум. Для добавления нового кликните по кнопке “+ Добавить вариант” под таблицей. 

Кнопка Добавить вариант

Максимальное количество вариантов – 8.

Ниже выберите сами параметры, которые будете тестировать. Лучше всего проверять по одному параметру за раз:

Место размещения. Укажите нужные места размещения рекомендации на странице. Для изменения кликните по стрелке в конце названия и на иконку обновления. Выберите нужное из доступных мест размещений.

Выбор места размещения

Внешний вид. Укажите варианты, которые будут участвовать в тесте, тем же способом, что и места размещения. Замена вариантов также доступна.

Выбор внешнего вида

Заголовок. Пропишите разные варианты, чтобы понять, какой из них более привлекательный.

Заголовки

Источник данных. Укажите, по какому из доступных алгоритмов будут выводиться рекомендации. Для его изменения кликните на вариант и в открывшемся списке выберите нужный.

Выбор источника данных

После внесения нужных правок нажмите “Сохранить” в верху страницы.

Сохранение настроек

Если вы не запускаете А/В-тест, то во вкладке “Параметры” будет отображаться описание добавленной рекомендации.

Описание блока на вкладке параметры

Статус тестирования и его оценка

Каждая рекомендация, для которой проводилось A/B-тестирование, имеет соответствующую пометку в виде кнопки. Это видно в общем списке созданных рекомендаций.

Быстрый просмотр результатов А/В-теста

В зависимости от текущего статуса (завершено/не завершено) и ключевых результатов (по CTR и достигнутым конверсиям) кнопка окрашивается в разные цвета. При наведении на нее открывается предпросмотр с кратким отчетом. По кнопке “Просмотр теста” можно просмотреть его результаты детально.

Цветовые обозначения:

  • Зеленая кнопка – тестирование завершено, есть победитель по CTR и по конверсии.

Зеленая кнопка

При наведении откроется краткий отчет о полученных результатах.

Краткий отчет

  • Серо-желтая кнопка говорит о том, что для определения победителя по CTR недостаточно данных, а по конверсии получены одинаковые результаты.

Серо-желтая кнопка

  • Кнопка желтого цвета – по CTR и конверсии одинаковая статистика, тестирование продолжается.

Желтая кнопка

  • Зелено-желтая кнопка означает, что есть победитель по CTR, а по конверсии одинаковая статистика. Тестирование продолжается.

Зелено-желтая кнопка

  • Желто-зеленая кнопка – есть победитель по конверсии, по CTR получены одинаковые результаты.

Желто-зеленая кнопка

  • Серая кнопка – нет достаточно данных для определения победителя ни по одному из показателей. 

Серая кнопка

Отчет о результатах тестирования

Перейти к отчетам о тестировании можно одним из способов:

  • кликнуть по кнопке в общем списке рекомендаций;
  • кликнуть по кнопке “Просмотр теста” в превью результатов;

Просмотр результатов теста

  • кликнуть по рекомендации в общем списке и перейти во вкладку “А/В-тест”.

На странице будет представлен отчет о результатах тестирования. На первом экране выводится победитель с указанием полученных результатов. Для его определения один из вариантов должен лидировать с вероятностью не менее 90% и разница в вероятности между вариантами должна составлять более 5%. Пока не будет достигнут этот минимальный порог, тестирование продолжается.

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

Если победители по CTR и по конверсии – разные варианты, то лучшим может быть только победитель по конверсии, так как продажи важнее, чем показатель кликабельности.

Результаты теста

После описания лучшего представлен отчет с результатами тестирования по каждому из вариантов.

Отчет по всем параметрам А/В-теста

В зеленую рамку взяты показатели CTR и конверсии победившего варианта. При наведении на них подсвечивается доверительный интервал – показатель, который указывает на точность измерений. Чем больше людей видело рекомендации и совершило целевое действие, тем больше интервал и тем меньше стандартная ошибка. Если % стандартной ошибки большой, то есть смысл подождать, пока соберется достаточно данных.

Доверительный интервал для CTR

В последнем блоке отчета (“Динамика активности”) гистограммы визуализируют полученные результаты в сравнении с другими вариантами, участвующими в тесте.

Динамика активности

При наведении на график открывается его описание.

Гистограмма  результатов

В самом низу вкладки “А/В-тест” вы сможете найти историю уже завершенных тестов:

История завершенных тестов

Для достижения лучших продаж обязательно тестируйте разные элементы для блока рекомендаций, места размещений. Определяйте самые эффективные варианты и создавайте новые блоки, опираясь на результаты тестов.

Остались вопросы?
Специалисты обязательно ответят и помогут решить вашу проблему!
Обратный звонок
Оставьте заявку – и наш специалист свяжется с вами в рабочее время.
Отправить заявку
Консультация в чате
Готовы к вашим вопросам!
Написать в чат
Электронная почта
Напишите в службу поддержки eSputnik.
Отправить email