Зарегистрируйтесь бесплатно
Имя
Телефон
Ваш email
Сайт
ГлавнаяБлогКак сделать всплывающие нотификации а-ля booking.com при просмотре товара

Как сделать всплывающие нотификации а-ля booking.com при просмотре товара

16 декабря 2015

После того, как мы запустили новый тип виджета - Нотификация, одним из наиболее частых запросов в нашу тех. поддержку, связанных с этим виджетом, стал примерно такой: "Хочу, чтобы на моем сайте при просмотре товаров отображались всплывающие уведомления, как при просмотре отелей на booking.com!".

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

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

Чем же они хороши?

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

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

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

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

Как сделать такой виджет в Convead

Создаем виджет

а) Идем в раздел виджеты, создаем новый виджет и выбираем его тип - Нотификация:

б) Оформляем дизайн виджета на свой вкус. Я для примера сделал его очень похожим на виджеты booking.com, для этого задал ему черный цвет фона, радиус скругления углов 10px и в поле CSS написал opacity: 0.7; чтобы сделать его полупрозрачным. Получилось вот так:

в) Если вам достаточно написать на виджете какую-либо статическую фразу, например "Этого товара на складе осталось мало, поторопитесь!" или "Цены на данный товар изменятся с завтрашнего дня", то просто кладете на виджет компонент "Текст" и пишете то, что вам нужно.

Но что если хочется добавить интерактива и написать например, что этот товар сейчас просматривают 11 человек? Понятно, что цифра должна меняться, иначе не интересно. Тогда кладем на виджет компонент "Ваш код" и добавляем в него немного магии:

<script>
function randomInteger(min, max) {
var rand = min + Math.random() * (max + 1 - min);
rand = Math.floor(rand);
return rand;
}

html = "За последние 24 часа этот товар просмотрели " + randomInteger(5, 20) + " человек."

document.getElementById("widget_notification_content").innerHTML = html;
</script>
<p id="widget_notification_content"></p>

Не пугайтесь, в редакторе это будет выглядеть не очень красиво, но на сайте все будет в порядке, можете убедиться в этом, нажав кнопку "Предпросмотр":

Давайте разберемся, что делает этот код. Здесь я написал простейшую JavaScript-функцию randomInteger(), которая принимает в качестве аргументов минимальное и максимальное значение и возвращает результат в виде случайного числа в пределах указанных значений.

Далее мы формируем надпись, которая будет выводиться на виджете:

html = "За последние 24 часа этот товар просмотрели " + randomInteger(5, 20) + " человек."

Ну а последняя строка только выводит эту надпись в специально подготовленный элемент внутри виджета с идентификатором "widget_notification_content":

document.getElementById("widget_notification_content").innerHTML = html;

Таким образом, мы получим всплывающую нотификацию с текстом "За последние 24 часа этот товар просмотрели N человек.", где N - случайное число от 5 до 20. Думаю, вам не составит труда поменять текст и числа на то, что вам нужно. Используйте кнопку "Предпросмотр", чтобы контролировать, как будет выглядеть виджет на вашем сайте.

Настраиваем параметры показа

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

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

Во-первых, конечно же не имеет смысла показывать этот виджет на всех страницах сайта. Поэтому я предлагаю ограничить область показа только страницами карточек товаров. На скриншоте отмечена Ключевая страница "Product", которая в моем примере представляет все страницы товаров на сайте. Если у вас еще нет такой ключевой страницы, то самое время ее создать.

Во-вторых, я установил задержку перед показом в 2 секунды и задержку перед автоматическим закрытием в 3 секунды, чтобы виджет не наскакивал на посетителя, как черт из табакерки, а интеллигентно и плавно появлялся в углу через пару секунд нахождения на странице, и так же тихо исчезал.

Ну и в-третьих такие виджеты не имеет смысл показывать на телефонах, поэтому снимаем галочку "На мобильных устройствах".

В итоге вот, что у меня получилось:

Еще примеры

Различные варианты сообщений

Booking.com при просмотре отеля пишет: "Последний раз этот объект размещения был забронировал 57 минут назад гостем из ОАЭ". Хотите что-то подобное? Все просто! В компоненте "Ваш код" пишем:

<script>
var messages = [
"сегодня купил посетитель из Москвы",
"вчера купил посетитель из Казани",
"прямо сейчас покупает посетитель из Твери"
];

html = "Этот товар " + messages[Math.floor(Math.random() * messages.length)];

document.getElementById("widget_notification_content").innerHTML = html;
</script>
<p id="widget_notification_content"></p>

В результате виджет будет случайным образом показывать один из вариантов сообщений:

  • Этот товар сегодня купил посетитель из Москвы
  • Этот товар вчера купил посетитель из Казани
  • Этот товар прямо сейчас покупает посетитель из Твери

Данный пример очень легко адаптировать под ваши нужды: просто добавьте в массив messages любое количество фраз по своему усмотрению.

Запоминаем, кому мы что обещали

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

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

<script>
var cookie_name = "widget_1234_content";
var messages = [
"сегодня купил посетитель из Москвы",
"вчера купил посетитель из Казани",
"прямо сейчас покупает посетитель из Твери"
];

loseCode = function(str){ var hash = 0; for (i = 0; i < str.length; i++) { char = str.charCodeAt(i); hash += char; } return hash; }
cookie_name = cookie_name + "_" + loseCode(window.location.pathname);

if(Cookies.get(cookie_name)) {
var index = parseInt(Cookies.get(cookie_name));
} else {
var index = Math.floor(Math.random() * messages.length);
Cookies.set(cookie_name, index, {expires: 86400});
}

html = "Этот товар " + messages[index];

document.getElementById("widget_notification_content").innerHTML = html;
</script>
<p id="widget_notification_content"></p>

Давайте разбираться. Вот что делает этот код:

  • Для данного конкретного виджета он сохраняет значение, которое было показано конкретному посетителю. Значение сохраняется в cookie внутри браузера посетителя.
  • При повторном просмотре виджета он проверяет, есть ли сохраненное значение. Если есть, то берет его. Если нет, то это первый просмотр и значение берется случайным образом (как в предыдущем примере).

Таким образом, сколько бы раз наш посетитель ни обновлял страницу, он всегда будет видеть один и тот же результат. Причем этот результат запоминается в привязке к текущему URL, так что если мы показали, что "Товар 1" купили вчера, а "Товар 2" - сегодня, то так и будет отображаться. Это важно, иначе бы посетитель видел одно и то же сообщение на всех страницах, на которых работает виджет.

Как доработать этот код под себя:

  1. В первой строке, где задается переменная cookie_name, замените "1234" на ID вашего виджета. Его можно посмотреть в адресной строке браузера когда вы находитесь в редакторе виджета. Строка будет иметь вид:
    https://app.convead.io/accounts/<ID аккаунта>/widgets/<ID виджета>.
  2. Заполните массив messages во второй строке вашими вариантами текста.
  3. Я сделал запоминание отображаемого варианта виджета на 24 часа, чтобы на следующий день показать уже какой-нибудь другой вариант. Если вам нужно запоминание в течение другого промежутка времени, то отыщите в коде цифру 86400 и напишите вместо нее количество секунд, на которое нужно запомнить значение. Время задается в секундах!

Интеграция с сайтом

Если вы хотите передавать в виджет какие-то реальные данные, то для этого придется немного напрячь ваших программистов, чтобы они выводили на странице, где будет показываться виджет, необходимые данные в JavaScript-переменную. Виджет сможет использовать эту переменную в тексте. Например, мы хотим показать, сколько единиц данного товара осталось на складе. Для этого:

а) Попросите вашего программиста на странице с товаром выводить остаток в JavaScript-переменную:

<script>var product_inventory_balance = 65;</script>

где 65 - это реальный остаток товара на складе.

б) В виджете в компонент "Ваш html" добавьте следующий код:

<script>
var html = "Остаток этого товара на складе: "
if (typeof(product_inventory_balance) != 'undefined') {
  html = html + product_inventory_balance + " шт."
} else {
  html = html + "менее 10 шт."
}
html
document.getElementById("widget_notification_content").innerHTML = html;
</script>
<p id="widget_notification_content"></p>

В результате наш виджет покажет: "Остаток этого товара на складе: 65 шт.".

В случае, если вдруг по ошибке на странице не окажется JavaScript переменной product_inventory_balance, виджет покажет "Остаток этого товара на складе: менее 10 шт.". Традиционно, текст можете менять по своему усмотрению :)

Ну вот и все

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

Не бойтесь экспериментировать и не забывайте про кнопку "Предпросмотр", а наша служба технической поддержки всегда готова прийти на помощь!

Подпишитесь на блог о маркетинге
в интернет-магазинах
Никакого спама. Только наши собственные статьи.
Tild3665 3338 4631 b339 383237626630  arrow blue