Отображение модального окна, когда пользователи покидают сайт
Удержать клиентов на веб-сайте может быть непросто, но есть трюк, который работает как шарм: отображение модального окна подписки, когда они собираются уйти. Это не только повышает конверсию, но и улучшает удержание клиентов на вашем сайте. В этом посте мы узнаем, как реализовать эту функцию с помощью JavaScript DOM. Давайте начнем!
Отслеживание мыши
Как поясняется в этой ссылке, когда пользователи закрывают или перезагружают браузер, происходит событие beforeunload. К сожалению, невозможно настроить предупреждающее сообщение или пользовательский интерфейс по умолчанию, добавив собственное сообщение.
Вместо этого мы будем отслеживать движения мыши пользователя и отображать модальное окно, когда обнаруживаем, что он собирается покинуть страницу.
Чтобы добиться этого, нам нужно определить, когда пользователь собирается уйти со страницы. Мы можем сделать это, отслеживая mouseleave событие по всему document. Вот пример:
const handleMouseLeave = (e) => {
console.log('User left the page');
};
document.addEventListener('mouseleave', handleMouseLeave);Примечание
Мы отслеживаемmouseleaveсобытие, а неmousemoveсобытие, поскольку оно обеспечивает более точное указание на намерение пользователя покинуть страницу. Событиеmousemoveсрабатывает постоянно, пока мышь движется, что может привести к ложным срабатываниям и повлиять на производительность.
Напротив,mouseleaveсобытие срабатывает только один раз, когда мышь покидает область документа, что дает нам более надежный сигнал для запуска нашей логики модального отображения. Этот подход не только обеспечивает лучший пользовательский опыт, но и оптимизирует производительность веб-сайта за счет сокращения ненужных обработчиков событий.
Для начала мы начнем с регистрации сообщения в консоли всякий раз, когда пользователь покидает страницу. Отсюда мы можем перейти к определению положения мыши. К счастью, мы можем легко добиться этого, используя свойства clientX и clientY объекта MouseEvent. Посмотрите пример ниже:
const handleMouseLeave = (e) => {
console.log('User left the page', e.clientX, e.clientY);
};Этот код будет регистрировать x и y координаты мыши каждый раз, когда она покидает страницу. Мы можем использовать эти координаты, чтобы проверить, находится ли мышь в правом верхнем углу браузера. Например, мы можем отображать модальное окно, когда мышь находится в пределах 10 пикселей от верхнего края. Вы можете настроить это условие в соответствии со своими требованиями.
Наконец, мы также удаляем обработчик событий при выполнении условия. Удаление обработчика событий может показаться странным, но на самом деле это хорошая практика, позволяющая оптимизировать производительность. Благодаря этому странице больше не нужно отслеживать мышь, что обеспечивает более плавное и быстрое взаимодействие с пользователем.
Вот как вы можете обработать это событие mouseleave:
const handleMouseLeave = (e) => {
if (e.clientX < 10) {
// Show the modal
modalEle.classList.remove('modal--hidden');
modalEle.classList.add('modal--visible');
// Stop tracking the mouse
document.removeEventListener('mouseleave', handleMouseLeave);
}
});Используйте файлы cookie или локальное хранилище
Когда мы добавляем модальное окно, которое появляется, когда пользователь перемещает указатель мыши в правый верхний угол браузера, мы хотим быть уверены, что он не будет бомбардироваться им каждый раз, когда посещает страницу. Чтобы избежать этого, мы можем использовать файлы cookie или локальное хранилище, чтобы запомнить, закрыл ли пользователь модальное окно, и предотвратить его повторное появление.
Чтобы это произошло, мы добавим прослушиватель событий к модальному элементу, который прослушивает, когда пользователь нажимает кнопку «Закрыть». Когда они это сделают, мы можем установить значение файла cookie или локального хранилища, которое сообщит веб-сайту, что модальное окно больше не будет отображаться. Вот пример:
const COOKIE_NAME = 'exit-popup';
const closeButton = document.getElementById('closeButton');
const closeModal = () => {
// Hide the modal ...
// Set cookie value indicating that modal should not appear again
const date = new Date();
date.setTime(date.getTime() + 365*24*60*60*1000);
document.cookie = `${COOKIE_NAME}=true; expires=${date.toUTCString()}`;
};
closeButton.addEventListener('click', closeModal);Этот код добавляет прослушиватель событий к кнопке «Закрыть» в нашем модальном элементе. При нажатии кнопки устанавливается файл cookie exit-popup со значением true. Срок действия файла cookie истекает через один год.
Чтобы установить дату истечения срока действия, мы создаем новый объект Date и добавляем к нему миллисекунды за 1 год. Затем мы преобразуем полученную дату в формат UTC с помощью метода toUTCString() и используем ее в качестве значения атрибута cookie expires. Это гарантирует, что срок действия файла cookie истечет в указанное время, и он будет удален из браузера пользователя.
Прежде чем показывать модальное окно, мы проверяем наличие этого файла cookie с помощью свойства document.cookie. Если он содержит значение, указывающее на существование файла cookie, мы предполагаем, что пользователь уже закрыл модальное окно, и пропускаем его повторный показ.
Вот пример реализации, который вы можете попробовать:
const hasModalShown = () => {
const cookie = `; ${document.cookie}`.split(`; ${COOKIE_NAME}=`).pop().split(';').shift();
return cookie === 'true';
};Обработчик событий mouseleave должен проверить положение мыши и правильность отображения модального окна.
const handleMouseLeave = (e) => {
if (e.clientY < 10 && !hasModalShown()) {
// Show the modal ...
}
});Помимо файлов cookie, вы можете использовать локальное хранилище, чтобы проверить и указать, отображалось ли модальное окно.
Посмотрите нашу демонстрацию ниже: попробуйте навести указатель мыши на демонстрационную область, а затем вверх. Вы увидите, что появляется модальное окно.
Хорошая практика
При разработке модального окна подписки важно помнить, что пользователи могут счесть всплывающие окна навязчивыми или раздражающими. Чтобы гарантировать, что ваше модальное окно будет хорошо воспринято посетителями, подумайте о предложении поощрения за регистрацию, например, кода скидки или бесплатного пробного периода. Это побудит пользователей подписаться и сделает процесс более приятным для них.
Заключение
В заключение, добавление модальности подписки на ваш веб-сайт может стать мощным способом увеличения конверсии и удержания клиентов. Отслеживая положение мыши пользователя и отображая модальное окно, когда он собирается уйти, вы можете создать интерактивную функцию, которая привлекает пользователя и мотивирует его зарегистрироваться.
