Подключение событий сайта

статья в переработке

Инструкция по размещению JavaScript кода

Инструкция по размещению JavaScript кода для отслеживания событий на вашем сайте:

Шаги для интеграции:

Копирование Кода: Скопируйте следующий JavaScript код.

const API_URL = '&lt;https://example.com/api/event>'; // Замените URL на ваш реальный адрес API
const HEADERS = \{
  'Content-Type': 'application/json'
\};

async function sendEventToServer(eventData) \{
  try \{
    const response = await fetch(API_URL, \{
      method: 'POST',
      headers: HEADERS,
      body: JSON.stringify(eventData)
    \});

    if (response.ok) \{
      const data = await response.json();
      console.log('Событие успешно отправлено на сервер:', data);
    \} else \{
      console.log('Ошибка сервера:', response.status, response.statusText);
    \}
  \} catch (error) \{
    console.error('Ошибка при отправке события на сервер:', error);
  \}
\}

document.addEventListener('DOMContentLoaded', function() \{
  sendEventToServer(\{
    eventName: 'PageView',
    actorId: 'fingerprint_or_user_id',
    elementId: 'page',
    context: Date.now()
  \});

  document.body.addEventListener('click', function(event) \{
    const targetElement = event.target;
    sendEventToServer(\{
      eventName: 'ElementClick',
      actorId: 'fingerprint_or_user_id',
      elementId: targetElement.id || targetElement.tagName,
      context: Date.now()
    \});
  \});
\});

Добавление на Сайт: Вставьте скопированный код в HTML вашего сайта между тегами <head> и </head> или перед закрывающим тегом </body>.
Замена URL: Обязательно замените https://example.com/api/event на реальный URL вашего сервера, который будет обрабатывать события.
Настройка ActorID: Замените значение fingerprint_or_user_id на идентификатор пользователя или другой уникальный идентификатор, который вы хотите использовать.
Тестирование: После добавления кода на сайт, откройте веб-страницу и проверьте, что события правильно отправляются на ваш сервер. Возможно, для этого потребуется открыть консоль браузера и проверить, нет ли ошибок.

Теперь ваш сайт будет автоматически отправлять события PageView при загрузке страницы и ElementClick при кликах на элементы страницы.

Как добавить новое событие

Инструкция по добавлению нового события с использованием скрипта:

Шаг 1: Определение типа события

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

Шаг 2: Редактирование скрипта

Откройте скрипт, который вы уже добавили на ваш сайт, и добавьте новый обработчик событий для вашего типа события. Например, для события "MouseOver":

document.body.addEventListener('mouseover', function(event) {
  const targetElement = event.target;
  sendEventToServer({
    eventName: 'MouseOver',
    actorId: 'fingerprint_or_user_id', // замените на уникальный идентификатор
    elementId: targetElement.id || targetElement.tagName,
    context: Date.now()
  });
});

Добавьте этот код внутрь блока document.addEventListener('DOMContentLoaded', function() { ... }); чтобы убедиться, что ваш код будет выполняться после полной загрузки страницы.

После того, как вы добавили новый обработчик, откройте ваш сайт и проверьте, что новое событие корректно отрабатывает и данные отправляются на сервер. Откройте консоль браузера, чтобы увидеть, нет ли ошибок или вывода от console.log.

Шаг 4: Отладка и оптимизация

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

Пример

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

document.body.addEventListener('keydown', function(event) {
  const targetElement = event.target;
  sendEventToServer({
    eventName: 'KeyDown',
    actorId: 'fingerprint_or_user_id',
    elementId: targetElement.id || targetElement.tagName,
    context: { key: event.key, timestamp: Date.now() }
  });
});

Этот код следует добавить внутрь document.addEventListener('DOMContentLoaded', ...);.

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

В качестве actorID может использоваться уникальный идентификатор (fingerprint) устройства пользователя или ID пользователя