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

Сайт є основним інструментом продажу для 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, покупки, середній чек, сума покупок.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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