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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Страница 404

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

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

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

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

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

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

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

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

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

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

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

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

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

общие:

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

Корзина

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML

Рекомендовано добавлять только содержимое тега body во вкладку 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-селектора.

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

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

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

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

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

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

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

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