Уведомления о действиях пользователей на сайте в Telegram. Просто и без кода. Wordpress + Nodul

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

Детали: к примеру, пользователь в размещенном рекламном сообщении в паблике района нажимает на ссылку "Перейти на сайт", попадает на наш сайт. В этот момент нам чат-бот в ТГ присылает сообщение, что с такого-то паблика на сайт пришел посетитель по такой-то ссылке. Далее, если пользователь на главной странице нажимает на кнопку "Загрузить приложение" и переходит на страницу загрузки, то мы также получаем уведомление об этом в ТГ. На странице загрузки приложения посетитель сайта может перейти в App store, Google Play, RuStore или App Gallery, об этом мы также получаем уведомление в ТГ. Помимо этого у нас есть QR-коды в оффлайн, каждый QR уникален и мы также получаем уведомления о переходах с них. Таким образом, мы в режиме реального времени можем понимать в какой день, какое время, с каких площадок идут пользователи, какой их путь, как они далее конвертируются в загрузки приложения. При этом не нужно тратить время на изучение ретроданных о посещениях пользователей. Вся собранная информация аккумулируется и в 00:00 отправляется отчет с суммаризацией всех данных о действиях на сайте.

Далее я расскажу, как и вы можете сделать такой мониторинг и любые Алерты на своем сайте без знаний языков программирования и каких-либо навыков разработки.

Настройка сайта.

Важным моментом является то, на какой CMS реализован ваш сайт. В моем примере речь пойдет о сайте, сделанном на WordPress. Прежде всего необходимо установить плагин под названием Uncanny Automator. Этот плагин позволит нам легко и просто настраивать любые автоматизации на нашем сайте.

Если необходимо отслеживать внешние переходы или переходы по ссылкам с внешних площадок на внешние ресурсы и контролировать эти переходы, то устанавливаем плагин Redirection.

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

Настройка Nodul.

Итак, мы выполнили необходимую подготовку нашего сайта, теперь необходимо настроить внешний сервис, который поможет нам связать наш сайт с телеграмм ботом. Называется этот инструмент Nodul и представляет собой no-code платформу интеграции разных сервисов друг с другом. Nodul не сложен в использовании и его освоит даже школьник. Переходим и регистрируемся по ссылке - nodul.ru

Создание Телеграмм бота

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

После выбора этого пункта отвечаем на два вопроса:

Результатом будет сообщение об успешном создании вашего бота. Вы получите сообщение с токеном, который необходимо указать в Nodul.

Переходим в Nodul и добавляем связку с Телеграмм ботом. Для этого в левом меню выбираем "Авторизации", далее нажимаем кнопку "Новая авторизация" и в поле с поиском начинаем вводить Telegram

В результатах поиска выбираем Telegram. Далее, в открывшемся списке выбираем "Telegram bot" и в открывшемся окне вводим полученный ранее от BotFather токен доступа.

Жмем "Авторизоваться" и если мы все правильно сделали, то в списках авторизаций видим созданную нами авторизацию с телеграмм-ботом.

Создание автоматизации

Сейчас нас ждет увлекательный квест по соединению всех наших сервисов в единый рабочий механизм, который позволит нам отслеживать все действия на нашем сайте. Сначала может показаться, что это сложно, но на самом деле это не так. Проделав это действие один раз вы поймете, что ничего сложного в этом нет. Объемный текст моей инструкции вызван лишь тем, что я ориентируюсь на неподготовленного пользователя и объясняю мельчайшие детали. Более опытным пользователям больше половины текста можно не читать.

В Nodul жмем на кнопку "Создать новый сценарий"

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

Нажимаем на "+" в центре экрана чтобы создать первый узел. Нашим первым узлом будет вебхук (сообщение) от нашего сайта. В открывшемся списке узлов в поле поиска начинаем вводить webhook и выбираем узел "Trigger on Webhook"

После создания узла мы видим окно с детальной информацией о данных созданного нами узла. В этом окне нам необходимо скопировать ссылку из поля "Адрес"

Пока что мы уходим из Nodul в WordPress чтобы настроить интеграцию с нашим сайтом. Благодаря тому, что мы ранее установили модуль автоматизации, в левом меню админки сайта появился раздел Automator. Заходим в него и переходим во вкладку All recipes. В этом разделе живут все созданные нами автоматизации. В открывшемся окне нажимаем кнопку Add new recipe.

В открывшемся окне выбираем URL

Далее, в разделе Action, выбираем Webhook

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

Давайте начнем с простой, но понятной задачи. Предположим, что мы хотим разместить рекламный пост на каком-либо ресурсе и отслеживать с него переходы на наш сайт. Наш сайт имеет адрес https://наш_сайт.ru/ К адресу сайта нам необходимо добавить параметр, по которому мы будем идентифицировать переход, поэтому к адресу сайта в конце добавляем знак вопроса и название нашего параметра, оно может быть любым, но желательно понятное вам, к примеру https://наш_сайт.ru/?par Именно значение "?par" будет отслеживаться в нашем сценарии.

Возвращаемся к настройкам нашей автоматизации на сайте. В Настройках сценария кликаем на URL parameter и в поле Parameter name указываем имя того параметра, который мы хотим отслеживать. Чуть выше для теста мы определили название par, поэтому его и будем дальше использовать. Вводим и сохраняем.

Далее, в разделе Action кликаем на webhook и в поле URL вводим скопированный нами ранее из Nodul адрес для отправки сообщений.

Чтобы в будущем нам можно было обрабатывать сообщения с разными параметрами и не создавать множество сценариев, в поле Body нажимаем кнопку Add pair и добавляем значения в поле Key и Value. Поле Key будет всегда постоянным, назовем его "parameter" и введем в соответствующее поле, а значение Value будет содержать имя того параметра, который мы отслеживаем, в нашем случае это снова значение "pam". Вводим и сохраняем.

После сохранения нам необходимо перевести нашу автоматизацию из состояния Draft (Черновик) в Состояние Live (Работает)

С настройками сайта мы завершили. Осталось сделать сценарий в Nodul. Переходим в него. Добавляем следующий узел на нашей доске со сценарием

В открывшемся списке в поле поиска начинаем вводить Telegram и выбираем соответствующий модуль

В открывшемся списке действий выбираем Send Text Message or Reply

У нас создался узел, который необходимо настроить. Для этого в поле Connection выбираем созданную ранее нами связку с чат-ботом в Телеграмм, нажимаем Использовать.

После выбора связи у нас появятся поля Chat ID и Text. С их заполнением придется немного заморочиться, но это нужно будет проделать один раз.

Суть такова: в поле Chat ID необходимо указать ID нашего чата в Телеграмм, но раздобыть его не так просто, как может казаться. Для начала нам необходимо создать тот самый чат, данные которого мы хотим сюда подставить. Зайдите в Телеграмм и создайте новый чат. На скриншотах я буду использовать веб-версию ТГ, именно она нам понадобится для извлечения значения Chat ID.

В созданную нами группу добавляем ранее созданного нами бота

Задаем название группы и сохраняем. После создания группы в адресной строке браузера мы видим путь, в котором есть значение, начинающееся на -100.... Именно это и есть Chat ID.

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

Копируем значение из URL браузера, возвращаемся в Nodul и добавляем в поле Chat ID. В поле Text вводим то сообщение, которое мы хотим получать в случае наступления события на нашем сайте, в моем примере это будет "На сайт пришел посетитель со статьи на VC". Добавляем и сохраняем

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

В появившемся окне вместо GET выбираем POST и сворачиваем окно (можно кликнуть на пространстве вне окна, чтобы оно пропало)

Для того чтобы проверить, приходят ли сообщения от нашего сайта, необходимо в браузере ввести адрес нашего сайта и добавить в конце параметр, в нашем примере это https://наш_сайт.ru/?par Переходим по адресу. Если мы все правильно сделали, то на экране сценария Nodul мы увидим изменения состояния наших узлов. Зеленые цифры в кружочках означают то, что каждый узел выполнил 1 действие с положительным результатом.

Также в телеграмм пришло сообщение

Поздравляю! Созданный нами сценарий успешно работает, но мы запустили только тестовую версию и для того, чтобы все работало постоянно, нам нужно выполнить еще одну небольшую операцию. В Nodul заходим в узел Trigger on Webhook и в настройках кликаем по Production URL, копируем значение (адрес для приема сообщений с сайта)

Теперь заходим в настройки нашей автоматизации на сайте и меняем значение URL на скопированный из модуля адрес. Сохраняем настройки.

Возвращаемся в Nodul, внизу экрана нажимаем "Развернуть"

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

Группа в ТГ с ботом - https://t.me/tlbx_test/Ссылка на сайт - https://tlbx.ru/?par

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

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

Обо мне:

Серийный предприниматель. Ex-PO, CPO, PD в Иннотех, МКБ, Почта Банк.

Запускаю стартап Тулбокс. Проект полностью "запилен" на нукоде.

В работе применяю инструменты: FlutterFlow, n8n, node Red

Мой канал - https://t.me/likhvin

Спасибо всем, кто дочитал до конца. Надеюсь, материал принесет кому-нибудь пользу.