Premonish – библиотека JavaScript для предсказывания действий пользователя
Сайтодел
Premonish – это библиотека JavaScript, задача которой – анализировать движение курсора по экрану и предсказывать, с какими элементами на странице пользователь будет взаимодейстововать.
В этом уроке вы узнаете:
1) Преимущества Premonish;
2) Как запустить библиотеку;
3) Как с ней работать.
1) Преимущества библиотеки
Библиотека Premonish предсказывает, с каким DOM-элементом пользователь будет взаимодействовать в следующий раз.
Это позволяет использовать на сайте триггеры анимации и выделять призывы к действию. Таким образом, можно влиять на поведение пользователя на веб-странице.
Полученную информацию можно использовать для улучшения работы сайта. Для коммерческих страниц таким способом можно увеличить конверсию за счет повышения удобства сайта и расставления нужных акцентов на экране.
2) Как запустить библиотеку?
Чтобы начать работать с Premonish, необходимо установить библиотеку на свое устройство. Для этого в командную строку введите следующее:
$ npm install premonish
Теперь библиотека установлена.
Запустим Premonish на компьютере:
import Premonish from 'premonish';
const premonish = new Premonish({
selectors: ['a', '.list-of' '.selectors', '.to', '#watch'],
elements: []
});
Для того, чтобы запустить библиотеку, импортируем ее, создадим новый объект через new Premonish(), а затем подключим к работе селекторы и элементы.
3) Как работать с Premonish?
Теперь перейдем к инициализации JavaScript-библиотеки.
var premonish = new Premonish({
selectors: [], // список селекторов
elements: [] // список DOM-элементов
});
Для нормальной работы необходимо добавить хотя бы один селектор или элемент.
Каждый раз, когда пользователь соберется взаимодействовать с одним из просматриваемых элементов, Premonish будет вызывать callback-функцию onIntent:
premonish.onIntent(({el, confidence}) => {
// el – это ожидаемый DOM-элемент
// confidence – это число от 0 до 1, которое показывает, насколько мы уверены в предсказании
});
Callback-функция onMouseMove позволяет пользователям посмотреть на некоторые внутренние вычисления, которые производит библиотека Premonish.
premonish.onMouseMove(({ position, velocity, expected }) => {
// Each value is an object { x: number, y: number }.
// `expected` is the approximate point premonish thinks the
// user is moving the mouse to.
});
Как только вы закончили работать с библиотекой, вызовите функцию stop(), чтобы очистить ее используемые события.
Надеемся, что статья была интересной и полезной. Применяйте знания в своей практике и не забудьте подписаться на наш канал!
До скорой встречи!
Ссылка на канал: https://t.me/sitodel