Подключить сайт

Один скрипт на сайте — заявки, метрика посещений, JS-ошибки и цели. TypeScript, автозахват форм, отслеживание конверсий.

Установка

npm

npm install @notix-hub/sdk

import { Notix } from '@notix-hub/sdk';

Подключение скрипта

Скрипт хостится у нас. Добавьте на сайт, он инициализируется автоматически:

<script src="https://notix-hub.ru/js/notify.js"
         data-site-id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
         data-metric="true"
         data-errors="true"></script>

Возможности SDK

AI-сканирование сайта и готовые цели

Вам не нужно размечать формы вручную. В панели Notix для источника SDK есть кнопка «Настроить сканирование и цели»: наш агент обходит страницы сайта (по sitemap и ссылкам), рендерит JavaScript при необходимости и находит все интерактивные блоки — формы заявок, регистрации, заказа, кнопки «в корзину», телефоны tel:, подписки.

Для каждого найденного блока панель показывает снимок именно того элемента на странице, предложенный CSS-селектор и тип события. Вы в один клик превращаете блок в цель трёх видов:

• Лид — заявка с формы (имя, телефон, email, комментарий).
• Заказ — оформление заказа с составом корзины.
• Событие — произвольное действие с кодом события (клик по кнопке, звонок, подписка).

Поля формы маппятся на CSS-селекторы автоматически (AI подсказывает #phone, [name="email"] и т.п.), но любой селектор можно поправить руками. К цели можно сразу привязать цветные теги и шаблоны заголовка уведомления. После сохранения панель генерирует готовый script-тег с атрибутом data-goals — вставляете его на сайт, и SDK начинает отслеживать эти цели без дополнительного кода.

Формы: data-mapping

Подход: вы размечаете форму data-атрибутами. SDK при submit собирает значения полей в payload и отправляет как уведомление. Никаких шаблонов — все поля попадают в raw_payload на бекенде.

Пример: форма заявки (lead)

<form data-notify
      data-notify-type="lead"
      data-notify-title="Новая заявка"
      data-notify-tags='["Сайт", {"name":"VIP","color":"#FF0000"}]'>

  <input name="name" placeholder="Ваше имя" required>
  <input name="phone" placeholder="Телефон">
  <textarea name="message" placeholder="Сообщение"></textarea>
  <button type="submit">Отправить</button>
</form>

Теги (tags)

Теги позволяют организовать уведомления. Можно указать как одиночный тег (tag), так и массив (tags).

notix.notify() — через код

// Одиночный тег
await notix.notify({
  title: 'Новая заявка', type: 'lead', tag: 'Лендинг'
});

// Массив тегов (строки)
await notix.notify({
  title: 'Срочный заказ', type: 'order', priority: 'urgent',
  tags: ['заказ', 'оплата', 'срочно']
});

// Массив с цветами
await notix.notify({
  title: 'VIP клиент', type: 'lead', priority: 'high',
  tags: [
    { name: 'VIP', color: '#FF0000' },
    { name: 'Лендинг', color: '#3B82F6' }
  ]
});

data-notify-tags — через атрибуты формы

JSON-массив строк или объектов {name, color}:

<form data-notify
      data-notify-type="lead"
      data-notify-title="Заявка с сайта"
      data-notify-tags='["лендинг", {"name":"VIP","color":"#FF0000"}]'>
  <input name="name">
  <input name="phone">
</form>

// Первая отправка — задаём цвет
tags: [{ name: 'VIP', color: '#FF0000' }, 'лендинг']

// Повторная — цвет VIP уже сохранён
tags: ['VIP', 'лендинг']

Пример: заказ (order) — через JS

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

<button id="checkout-btn">Оформить заказ</button>

<script>
document.getElementById('checkout-btn').addEventListener('click', async () => {
  await notix.notify({
    title: 'Новый заказ',
    type: 'order',
    priority: 'high',
    tags: ['заказ', 'оплата'],
    payload: {
      items: [
        { name: 'Товар 1', price: 1200, qty: 2 },
        { name: 'Товар 2', price: 800, qty: 1 }
      ],
      total: 3200,
      customer: 'Иван',
      phone: '+7 917 000-00-00'
    }
  });
});
</script>

data-notify-payload — дополнительные поля

Добавьте статичный JSON в payload формы:

<form data-notify
      data-notify-type="lead"
      data-notify-tags='["Лендинг"]'
      data-notify-title="Заявка"
      data-notify-payload='{"page": "landing-1", "utm_source": "google"}'>
  <input name="name">
  <input name="phone">
</form>

data-notify-label — читаемые имена полей

По умолчанию в payload попадают name атрибуты. Для русских названий:

<input name="phone" data-notify-label="Телефон">
<input name="email" data-notify-label="Email">

data-notify-fields — фильтр полей

Включить только указанные поля (остальные игнорируются):

<form data-notify data-notify-fields="name,phone">
  <input name="name">
  <input name="phone">
  <input name="hidden_field"> <!-- не попадёт -->
</form>

Ручная отправка: notix.notify()

const notix = new Notix({ token: 'ntx_live_xxxxxxxxxx' });

await notix.notify({
  title: 'Новый заказ',
  type: 'order',
  priority: 'high',
  tag: 'Заказы',
  payload: { amount: 12000, items: 3 }
});

// Минимально — только title
await notix.notify({ title: 'Сервер перезапущен' });

Метрика посещений

Включите data-metric="true" в script-теге — SDK собирает данные о посетителях: просмотры страниц, время на каждой, глубину прокрутки, устройство, UTM-метки. При закрытии вкладки все данные отправляются одной пачкой.

<script src="..." data-token="ntx_..." data-metric="true"></script>

Ручное включение:

const notix = new Notix({ token: '...', metricEnabled: true });

notix.trackPageView('/catalog', 'https://google.com/search?q=...');

Метрика не создаёт уведомлений в ленте. Данные агрегируются и доступны на дашборде аналитики. Push приходит раз в 10 минут со сводкой: «3 посетителя, из них 1 новый».

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

Включите data-errors="true" — SDK перехватывает JS-ошибки (window.onerror, unhandledrejection) и сохраняет их в localStorage. При закрытии вкладки все накопленные ошибки отправляются одной пачкой на сервер.

<script src="..." data-token="ntx_..." data-errors="true"></script>

// Ручное включение
new Notix({
   token: '...',
   errorTrackingEnabled: true
});

Ошибки не создают уведомлений в ленте. Сервер агрегирует их, классифицирует по severity и после 10 минут затишья отправляет один push со сводкой на дашборд ошибок.

Конфигурация (NotixConfig)

Метод notix.notify(payload)

Атрибуты форм

Атрибуты script-тега

Другие методы

Типы уведомлений

Допустимые значения для type (предопределены в системе):

Яндекс.Метрика

SDK автоматически определяет window.ym и отправляет события:

• notix_sent — уведомление отправлено
• notix_error — ошибка отправки
• notix_form_captured — захвачена форма

Отключить:

new Notix({ token: '...', metrika: { enabled: false } });