Сбор метрик использования

Для начала работы с библиотекой Toastify необходимо подключить её к проекту. Библиотека распространяется через CDN и npm.

Через CDN:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

Через npm:

npm install toastify-js
import Toastify from 'toastify-js';
import "toastify-js/src/toastify.css";

После подключения можно создавать уведомления методом Toastify({...}).showToast();.

Основные параметры Toastify

Для настройки уведомлений используются следующие ключевые параметры:

  • text – текст уведомления. Обязательный параметр.
  • duration – время отображения в миллисекундах. По умолчанию 3000.
  • gravity – позиция по вертикали: "top" или "bottom".
  • position – позиция по горизонтали: "left", "center", "right".
  • backgroundColor – цвет фона, может быть HEX, RGB или градиент.
  • className – CSS-класс для кастомного оформления.
  • close – добавление кнопки закрытия (true/false).
  • onClick – функция обратного вызова при клике на уведомление.

Пример базового уведомления:

Toastify({
  text: "Успешная операция",
  duration: 5000,
  gravity: "top",
  position: "right",
  backgroundColor: "#4CAF50",
  close: true
}).showToast();

Отслеживание и сбор метрик использования

Для сбора метрик работы уведомлений необходимо использовать обратные вызовы и дополнительные события. Toastify предоставляет следующие возможности:

Отслеживание кликов

Параметр onClick позволяет зарегистрировать действие пользователя:

Toastify({
  text: "Нажми меня",
  onClick: function() {
    console.log("Уведомление кликнуто");
    sendMetrics("click");
  }
}).showToast();

В функцию sendMetrics можно передавать идентификаторы уведомлений, время появления и другие данные.

Отслеживание закрытия уведомления

Использование close: true автоматически создаёт кнопку закрытия. Для сбора метрик важно логировать как закрытия пользователем, так и автоматические исчезновения:

function showToastWithMetrics(id) {
  Toastify({
    text: "Сообщение с метриками",
    duration: 4000,
    close: true,
    onClick: function() {
      sendMetrics({id, event: "click"});
    },
    callback: function() {
      sendMetrics({id, event: "dismiss"});
    }
  }).showToast();
}

Важно: параметр callback вызывается после завершения анимации закрытия уведомления.

Время отображения уведомления

Для оценки вовлечённости полезно фиксировать длительность видимости уведомления:

const startTime = Date.now();
Toastify({
  text: "Измеряем время видимости",
  duration: 5000,
  callback: function() {
    const endTime = Date.now();
    sendMetrics({event: "display_duration", duration: endTime - startTime});
  }
}).showToast();

Классификация уведомлений

Для комплексного анализа рекомендуется использовать уникальные идентификаторы и категории уведомлений:

const toastData = {
  id: "user_signup_01",
  type: "success"
};

Toastify({
  text: "Регистрация завершена",
  duration: 3000,
  onClick: () => sendMetrics({ ...toastData, event: "click" }),
  callback: () => sendMetrics({ ...toastData, event: "dismiss" })
}).showToast();

Такой подход упрощает построение отчетов по типам уведомлений и действиям пользователей.

Интеграция с системами аналитики

Метрики можно отправлять в любую аналитическую платформу: Google Analytics, Яндекс.Метрику, собственный сервер. Пример отправки на сервер через fetch:

function sendMetrics(data) {
  fetch("/api/metrics", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
  });
}

Сбор данных включает:

  • event – тип события (click, dismiss, display_duration)
  • toastId – уникальный идентификатор уведомления
  • timestamp – время события
  • duration – продолжительность отображения

Дополнительные методы

Для расширенного анализа удобно создавать обёртки над Toastify, которые автоматически добавляют метрики:

function trackedToast(options) {
  const id = options.id || `toast_${Date.now()}`;
  const startTime = Date.now();

  Toastify({
    ...options,
    onClick: () => {
      if (options.onClick) options.onClick();
      sendMetrics({id, event: "click", timestamp: Date.now()});
    },
    callback: () => {
      if (options.callback) options.callback();
      sendMetrics({
        id,
        event: "dismiss",
        duration: Date.now() - startTime,
        timestamp: Date.now()
      });
    }
  }).showToast();
}

Использование такой обёртки позволяет консистентно собирать метрики для всех уведомлений без дублирования кода и обеспечивает единый формат данных для аналитики.

Визуальные различия уведомлений

Для анализа эффективности уведомлений полезно разделять их по визуальному оформлению:

  • Цвета (backgroundColor) для разных категорий (success, error, warning)
  • Позиция (gravity и position) для выявления наиболее кликабельных зон
  • Длительность (duration) для проверки оптимального времени отображения

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

Хотите, я могу дополнительно подготовить подробную схему архитектуры сбора метрик с Toastify в реальном проекте, включая серверные и клиентские компоненты? Это покажет, как данные проходят полный путь от уведомления до аналитики.

Оглавление