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

Правильные рекомендации — это залог прогресса любого Интернет магазина. Если пользователю неудобно бегать по сайту — он быстро с него уходит к конкуренту.

Типичный магазин предоставляет нам продукты списками или долгими столбиками:



Недостатком является то, что в процессе поиска много времени идёт на просмотр всех опций. Даже имея нужные детали в списке, люди хотят просмотреть полное описание продукта, так как там может быть важная информация нужная для принятия решения: покупать, или не покупать.

Типично процесс происходит где-то так: увидел список, нажал на первое понравившееся наименование, подождал пока загрузится страница, просканировал, вернулся обратно, открыл другой продукт, подождал пока загрузиться страница,… после 10-ти просмотров повторно открыл первый вариант… и т.д.… много кликов, много времени уходит на ожидание и перегрузку страниц.

Лично я пробегаюсь по списку, открываю всё в табах, а потом зондирую, чтобы не бегать туда и обратно и лишний рас не ждать. Но опять же, открытие 20 наименований, — это 20 кликов. Утомляет. И даже открытие каждой страницы в отдельном табе это не просто клик, а: i) или правая кнопка и тогда «открыть в новом табе», ii) или Ctrl+Click, iii) или другая комбинация.

Недавно появился новый сервис позволяющий пересылать много сайтов одной ссылкой — и я подумал, а давайте его использовать для визуального ускорения работы других сайтов.

Раньше я фокусировался на алгоритмах улучшая качество самих рекомендаций (статья 1 и статья 2) но на в этот раз улучшение заключается не так в методе подбора рекомендаций как в их визуализации.

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

Но если у Вас таких наборов на сайте миллионы — руками их не склеить. Надо автоматизировать процесс.

Генерация табов на ходу с помощью PHP

Возьмём простой пример на PHP, когда ссылки на продукты, которые клиенту было бы нужно посмотреть сразу, у вас собраны в массиве $entry_array:

1.  
2. <?php
3. $n = count ( $entry_array );
4. $parameters = '';
5.  
6. for ( $i= 0; $i<$n; $i++ ) {
7.   if ( $url = trim ( $entry_array [$i] ) ) {
8.     $parameters .= '&url' . ($i+1) . '=' . urlencode ( $url ) .
9.                    '&caption' . ($i+1) . '=' . urlencode ( 'Предмет ' . ($i+1) );
10.   }
11. }
12.  
13. if ( $parameters ) {
14.   $bundled_link = 'http://many.at/links2tabs/?toc=' . urlencode ( 'Меню' ) . $parameters;
15.   echo '<a href="' . $bundled_link . '" target="_blank">' . 'открыть весь список одним кликом' . '&lt/a>';
16. }
17. ?>

В результате в добавок к стандартным уже всеми используемыми меню «сюда 1, 2, 3,… туда» появляется полезный линк:

«сюда 1, 2, 3,… туда» «открыть весь список одним кликом»

…
… списки и картинки между верхним и нижним навигационным меню
…

«сюда 1, 2, 3,… туда» «открыть весь список одним кликом»

Нажимая на нём, пользователь может просмотреть восемь переносных дисков на WikiMart.

Меню оглавление можно скрыть совсем, для этого нужно в запросе вызвать toc=off. Выбрать произвольный таб, чтобы он открывался по умолчанию, можно с помощью параметра selected. Подписи в табах задаются через API, так что контролировать их можна меняя caption1, caption2,… Можно также поменять цветовую гамму и другие подписи. Больше деталей на странице API.

Конечно, как всегда, есть недостатки, надо ждать несколько секунд пока все страницы загрузятся, но зато потом всё просматривается без всякого ожидания и перескакивать между табами очень приятно.

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

Работа с рассылками

Другим направлением улучшения нужно считать рассылки электронной почтой. Вот последний мейл с рекомендациями который пришёл мне в ящик на Gmail:



Гугл почему-то намертво отрубил все картинки, и чтобы посмотреть товары, мне всё равно надо было кликать по каждой ссылке. Было бы гораздо удобнее, если бы мейл был короткий вот c таким одним линком:

Здравствуйте, Дима!

Мы высылаем Вам сегодняшние рекомендации. Нажмите эту ссылку чтобы открыть все наименования сразу в отдельных табах.

С уважением,
Ваш OZON.ru

И теперь я одним кликом могу посмотреть всё и сразу.

Так как API гибкий, можно генерировать также и суб-табы. Вот такую рассылку, 5 категорий по 4 рекомендации:



можно превратить в один УРЛ со всеми наименованиями в табах 5 x 4 проганяя через такой PHP код:

1. <?php
2.  
3. // Структура данных
4. $categories = array ();
5. $categories [] = array (
6.   "name" => "Книжные новинки весны",
7.   "products" => array (
8.     array ( "url" => "http://www.ozon.ru/context/detail/id/5561766/",
9.             "name" => "И. Ильф, Е. Петров. Двенадцать стульев (подарочное издание)" ),
10.     array ( "url" => "http://www.ozon.ru/context/detail/id/5813135/",
11.             "name" => "Мэри Роуч. Обратная сторона космонавтики" ),
12.     array ( "url" => "http://www.ozon.ru/context/detail/id/5505592/",
13.             "name" => "Милена Сигаева. Странности животной сексуальности. Как они делают это...?" ),
14.     array ( "url" => "http://www.ozon.ru/context/detail/id/5801663/",
15.             "name" => "Стивен Джуан. Могут ли поцелуи продлить жизнь?" ),
16.   ),
17. );
18. // ...
19. $categories [] = array (
20.   "name" => "Свежие предложения электроники ",
21.   "products" => array (
22.     array ( "url" => "http://www.ozon.ru/context/detail/id/5592866/",
23.             "name" => "Мобильный телефон Nokia N8" ),
24.     array ( "url" => "http://www.ozon.ru/context/detail/id/5862823/",
25.             "name" => "Мобильный телефон LG P500 Optimus One" ),
26.     array ( "url" => "http://www.ozon.ru/context/detail/id/5623463/",
27.             "name" => "Ноутбук MSI Megabook CX620-292" ),
28.     array ( "url" => "http://www.ozon.ru/context/detail/id/5819885/",
29.             "name" => "Настольный жесткий диск Iomega Prestige 1TB, USB" ),
30.   ),
31. );
32.  
33. // Код
34. $top_parameters = '';
35. $i = 1;
36.  
37. foreach ( $categories as $key => $category ) {
38.   $parameters = '';
39.   $j = 1;
40.   foreach ( $category["products"] as $product ) {
41.     if ( $url = trim ( $product["url"] ) ) {
42.       $parameters .= '&url' . $j . '=' . urlencode ( $url ) .
43.                      '&caption' . $j . '=' . urlencode ( $product["name"] );
44.       $j++;
45.     }
46.   }
47.   if ( $parameters ) {
48.     $categories [$key] ["bundled_link"] = 'http://ozon.cheap.ly/?toc=off&title=OZON.ru&description=' .
49.       urlencode ( $category["name"] ) . $parameters;
50.     $categories [$key] ["bundled_shortlink"] = bit_ly_shorten ( $categories [$key] ["bundled_link"] );
51.     $top_parameters .= '&url' . $i . '=' . urlencode ( $categories [$key] ["bundled_shortlink"] ) .
52.                        '&caption' . $i . '=' . urlencode ( $categories [$key] ["name"] );
53.     $i++;
54.   }
55. }
56.  
57. if ( $top_parameters ) {
58.   $bundled_link = 'http://ozon.what-el.se/?toc=' . urlencode ( 'Меню' ) . $top_parameters;
59.   echo '<a href="' . $bundled_link . '" target="_blank">' . 'открыть весь список одним кликом' . '</a>';
60. }
61. ?>

И отослать простое но удобное письмо:

Здравствуйте, Дима!

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

С уважением,
Ваш OZON.ru

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



Если не подходят базовые УРЛы которые используется в примерах — можно поменять на свою API страницу, поставить личный логотип, прописать другие цвета. В настройках можно ограничить с каких доменов принимать API ссылки, чтобы никто не смог подставлять чужые страницы. Вот проверка что линк с ozon.ru попадёт в таб, а ссылка с d3.ru будет проигнорирована.

Инструкцию по созданию базового API линка можно найти здесь (пока только на английском). Можно даже использовать собственный домен и Google Analytics. Вот как получилось открыть русские книги на Амазоне на суб-домене super.cheap.ly.

Бонус — вставка фидов

Если у Вас есть фид, то можно открывать последние новости тоже одним кликом. Например, вот ссылка которая загрузит 10 последних новостей с Лента.ру.