JS-плагин для работы с целями метрики

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

По завершению разработки, сайт сам по себе не несет никакой пользы, если его никто не видит. Всегда должна быть следующая итерация по привлечению посетителей – seo-оптимизация или/и запуск рекламы. Но каким бы способом сайт не «раскручивали», нужно отслеживать и понимать действия пользователей. Чтобы на основе этих данных доработать сайт или внести корректировки в продвижение. Отслеживать посетителей можно большим количеством инструментов, но основной – это яндекс метрика.

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

JS-события нужно вызывать «руками» через код, отлавливая конкретное действие пользователя на сайте. Это типовая задача, но каждый раз нужно писать обработчики. Чтобы упростить себе жизнь, написали плагин, который имеет набор самых типовых обработчиков и достаточно только вызывать с нужным селектором или параметром.

Сейчас плагин умеет обрабатывать следующее:
– клик на элемент
– установку фокуса в инпут/текстарею
– доскралливание страницы на определенное количество пикселей
– доскралливание страницы до элемента
– вход на определенную страницу, конкретный урл
– вход на определенную страницу, по вхождению урла
– уход с определенной страницы, конкретный урл
– уход с определенной страницы, по вхождению урла

Так же для старых версий метрики, которые все еще используются на некоторых сайтах, добалена ее поддержка. Чтобы инициализовать плагин под старую версию, достаточно вызывать плагин с параметром 'typeСounter': 'old'. По умолчанию инициализация происходит под свежую версию яндекс.метрики.

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

Для использования достаточно подключить плагин по CDN и сразу использовать на страницах сайта. Или устновить его в сборку через пакетный менеджер npm: npm i @owlagency/yandexmetrika.

Пример использования:

// инициализация плагина var yaHelperNew = new YandexMetrikaHelper({ 'idСounter': 12345678, // id счетчика метрики }); // отправка в метрику цели с именем "id-click-btn" // при клике на элемент с классом ".class-btn" yaHelper.setAction('clickEl', '.class-btn', 'id-click-btn')

Подробное описание всех методов плагина собрано в readme репозитория.

Ссылки на плагин:
Пакет в npmjs: ссылка.
Открытый репозиторий: ссылка.

Спасибо за внимание. Надеюсь, кому-нибудь пригодится наша наработка. Если есть пожелания, рекомендации или советы по улучшению плагина, то пишите их в комментариях или присылайте в телеграм: мне в ЛС или группу «БАГодельня».