Рекомендації на сайті | Підтримка eSputnik

Email

Омніканальність

Автоматизація

Створення й налаштування рекомендацій на сайті

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

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

Приклади блоків:

  • Вам можуть сподобатися;
  • Покупців, які переглядали цей товар, також цікавить;
  • Спеціально для вас;
  • Не забудьте купити;
  • З цим товаром купують;
  • Підібрано на основі ваших запитів;
  • Найкраще в категорії тощо.

Усе це – товарні рекомендації, додані на сайт, щоб відвідувач не пішов без покупки.

Персональні рекомендації формуються за наявності даних про інтереси користувача. Щоб вони збиралися, у вас має бути налаштований вебтрекінг. Аби почати використовувати рекомендації на сайті, підключіть один із тарифних планів Extra.

Створення нової рекомендації

Перш ніж приступити до створення нової рекомендації, ви можете попередньо створити:

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

Або їх можна налаштувати в процесі створення рекомендації.

Важливо!

Ви можете отримувати товарні рекомендації через API. Їхній вигляд, розташування та заголовки можна налаштовувати на вашій стороні. Докладніше>>

Щоб додати нову рекомендацію, зайдіть у розділ “Сайт” → вкладка “Рекомендації”, виберіть “Створити рекомендацію”.

Додавання нової рекомендації

Далі перейдіть до налаштування блоку для показу на сайті.

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-селектора.

Укажіть місце розміщення

Щоб його знайти, клацніть правою кнопкою миші в будь-якому місці на сторінці та виберіть "Подивитися код".

Активуйте інструмент "Вибрати елемент зі сторінки", натиснувши на іконку зі стрілкою:

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

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

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

Потрібний елемент у самій консолі буде виділено. Клацніть правою кнопкою миші по цьому рядку коду та в меню виберіть Copy → Copy Selector.

Копіювання селектора

Скопіюваний селектор вставте в спеціальне поле вгорі сторінки налаштування в eSputnik:

Укажіть розміщення блоку

Вкажіть метод розміщення блоку рекомендацій на сторінці щодо елемента на сайті:

  • перед;
  • після;
  • усередині (перший);
  • усередині (останній).

Метод додавання

Завершення створення рекомендації

Щоб завершити створення нової рекомендації, натисніть внизу кнопку “Готово”. Ви потрапите до списку рекомендацій.

Виберіть створену рекомендацію. На цьому етапі її видно тільки вам. Для перегляду на сайті натисніть кнопку "Дивитися на сторінці".

Дивитися на сторінці

Коли ви переконаєтеся, що верстка блоків коректна, а товари підтягнулися правильно, змініть статус рекомендації з “Бачите тільки ви” на “Видно відвідувачам сайту”.

Увімкнення/вимкнення видимості

З цього моменту вона стає доступною для всіх користувачів, і починає збиратися статистика роботи блоку.

Відображення в особистому кабінеті

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

1) Пошук за ключовим словом.

Пошук

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

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

Фільтр рекомендацій

3) Праворуч над списком можна відфільтрувати дані за період: 1 день / 7 днів / 28 днів / поточний місяць / минулий місяць / весь час / потрібний період.

Фільтр за періодом

Або за показниками: переглядами / переходами / CTR / кількістю покупок / кількістю проданих товарів / сумою покупок / середнім чеком.

Фільтр за показниками

Після додавання рекомендацій та їхнього показу на сайті у списку рекомендацій з'явиться статистика:

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

Статистика

Піктограма "Пуск" перед назвою рекомендації свідчить про те, що рекомендація виводиться на сайті. А перекреслене око – про те, що рекомендацію видно лише вам.

Піктограми активності

Видалити рекомендацію та статистику за нею можна, натиснувши на три крапки в кінці рядка:

Три крапки

Звіт

Щоб переглянути деталі звіту, клацніть назву рекомендації у списку.

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

Статистика

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

Вибір періоду

Відсоток тих, хто перейшов і купив, виводиться відносно тих, хто переглянув рекомендацію.

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

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

Наприкінці представлена історія змін із датою та описом внесених правок. Вона пишеться, лише якщо рекомендація перебуває в режимі "Видно відвідувачам сайту".

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

Вкладка "А/В-тести"

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

У вкладці "А/В-тест" у створеній рекомендації додаються варіанти для тестування. Щоб додати варіанти тестування, натисніть кнопку “Почати А/В-тест”.Почати тест

Запустити тестування також можна у вкладці "Параметри", натиснувши кнопку "Почати А/В-тест".

Почати тест

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

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

Опис

Вага – частка аудиторії, якій будуть показані рекомендації. Вона може бути розподілена рівномірно – натисніть відповідну кнопку або вкажіть вручну потрібні пропорції.

Розподіл ваги

За замовчуванням перевіряються два варіанти – це мінімум. Для додавання нового клацніть кнопку “Додати варіант” під таблицею.

Додати варіант

Максимальна кількість варіантів – 8.

Нижче виберіть параметри, які тестуватимете. Найкраще перевіряти по одному параметру за один раз.

Місце розміщення. Вкажіть потрібні місця розміщення рекомендації на сторінці. Для зміни клацніть стрілку в кінці назви та іконку оновлення. Виберіть потрібне з доступних місць розташування.

Вибір місця розміщення

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

Вибір зовнішнього вигляду

Заголовок. Пропишіть різні варіанти, щоб зрозуміти, який із них привабливіший.

Заголовки

Джерело даних. Вкажіть, за яким із доступних алгоритмів виводитимуться рекомендації. Для його зміни клацніть на варіант і у списку виберіть потрібний.

Вибір джерела даних

Після внесення потрібних правок натисніть “Зберегти” у верхній частині сторінки.

Збереження налаштувань

Якщо ви не запускаєте А/В-тест, то у вкладці “Параметри” відображатиметься опис доданої рекомендації.

Опис блоку

Статус тестування та його оцінка

Кожна рекомендація, для якої проводилося A/B-тестування, має відповідну позначку у вигляді кнопки. Це видно у загальному списку створених рекомендацій.

Перегляд результатів

Залежно від поточного статусу (завершено / не завершено) та ключових результатів (за CTR та досягнутими конверсіями) кнопка забарвлюється у різні кольори. У разі наведення на неї відкривається перегляд із коротким звітом. Натиснувши кнопку “Перегляд тесту”, можна переглянути результати детально.

Кольорові позначення:

  • Зелена кнопка – тестування завершено, є переможець за CTR та конверсією:
    Зелена кнопка
    Якщо навести курсор, відкриється короткий звіт про отримані результати:
    Короткий звіт
  • Сіро-жовта кнопка свідчить про те, що для визначення переможця за CTR недостатньо даних, а по конверсії отримані однакові результати:
    Кнопка
  • Кнопка жовтого кольору – за CTR та конверсією однакова статистика, тестування продовжується:
    Кнопка
  • Зелено-жовта кнопка означає, що є переможець за CTR, а за конверсією однакова статистика. Тестування продовжується:
    Кнопка
  • Жовто-зелена кнопка – є переможець за конверсією, за CTR отримані однакові результати:
    Кнопка
  • Сіра кнопка – немає достатньо даних для визначення переможця за жодним із показників:
    Кнопка

Звіт про результати тестування

Перейти до звітів про тестування можна одним зі способів:

  • клацнути кнопку у загальному списку рекомендацій;
  • клацнути кнопку "Перегляд тесту" в прев’ю результатів;
    Перегляд результатів тесту
  • вибрати рекомендацію у загальному списку та перейти на вкладку “А/В-тест”.

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

Якщо даних вам достатньо, то можете зупинити тест, натиснувши кнопку "Вибрати варіант А і завершити тест" (жирним текстом буде прописаний варіант, який найкраще показав себе).

Якщо переможці за CTR і за конверсією – різні варіанти, то найкращим може бути лише переможець за конверсією, оскільки продажі важливіші, ніж показник клікабельності.

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

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

Звіт за всіма параметрами

У зелену рамку взято показники CTR і конверсії варіанта, що переміг. Якщо навести курсор на показник, підсвічується довірчий інтервал – показник, який свідчить про точність вимірів. Чим більше людей бачило рекомендації та здійснило цільову дію, тим більший інтервал і тим менша стандартна помилка. Якщо % стандартної помилки великий, є сенс почекати, доки збереться достатньо даних.

Довірчий інтервалВ останньому блоці звіту (“Динаміка активності”) гістограми візуалізують отримані результати порівняно з іншими варіантами тесту.

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

Якщо навести курсор на графік, відкривається його опис:

Гістограма

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

Історія

Для досягнення кращих продажів обов'язково тестуйте різні елементи для блоку рекомендацій, місця розміщення. Визначайте найефективніші варіанти та створюйте нові блоки, спираючись на результати тестів.

Залишилися питання?
Спеціалісти обов'язково нададуть відповідь та допоможуть вирішити вашу проблему!
Зворотний дзвінок
Залишіть заявку – і наш спеціаліст зв'яжеться з вами в робочий час.
Відправити заявку
Консультація в чаті
Готові до ваших запитань!
Написати в чат
Електронна пошта
Напишіть в службу підтримки eSputnik.
Надіслати email