Перехват AJAX с помощью функции XMLHttpRequest (GET)
<

Перехват AJAX с помощью функции XMLHttpRequest (GET)

2025-05-11

В этой статье мы рассмотрим, как перехватывать AJAX-запросы, отправляемые с помощью XMLHttpRequest (метод GET), и выполнять определённые действия при успешном добавлении товара в корзину или отправке формы обратной связи.

Так же скрипт перехватывает Jquery ajax запросы

Пример ajax (метод GET) на сайте wordpress

На сайте WordPress по нажатию на кнопку происходит AJAX-запрос на добавление товара в корзину. В консоли разработчика запрос выглядит так:
/wp-admin/admin-ajax.php?method=add_item
Наша задача — отследить этот запрос и выполнить цель в Яндекс.Метрике, если URL запроса содержит строку method=add_item.

Код для перехвата AJAX-запросов

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/* Константы */
const SUCCESS_STATUS = 200;
const ADD_ITEM_METHOD_ID = 'method=add_item';
const ADD_ITEM_METHOD_NAME = 'addItem';
const YM_TARGET = 'product-add-to-cart';

/* Список отслеживаемых URL */
const trackedUrls = [
  {
    id: ADD_ITEM_METHOD_ID,
    method: ADD_ITEM_METHOD_NAME,
    ymTarget: YM_TARGET,
  }
];

/* Функции для работы с Яндекс.Метрикой */
const createAnalyticsMethods = (ymId) => {
  return {
    addItem: (targetId) => {
      ym(ymId, 'reachGoal', targetId);
      console.log('Yandex.Metrica target:', targetId);
    }
  };
};

/* Инициализация методов аналитики */
const analyticsMethods = createAnalyticsMethods(12345678);

/* Сохраняем оригинальный метод send */
XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send;

/* Переопределяем метод send для перехвата запросов */
XMLHttpRequest.prototype.send = function(body) {
  this.addEventListener('load', () => {
    try {
      const responseUrl = this.responseURL;
      const status = this.status;

      /* Проверяем каждый элемент в списке отслеживаемых URL */
      for (const trackedUrl of trackedUrls) {
        if (status === SUCCESS_STATUS && responseUrl.includes(trackedUrl.id)) {
          analyticsMethods[trackedUrl.method](trackedUrl.ymTarget);
        }
      }
    } catch (error) {
      console.error('Error processing XMLHttpRequest:', error);
    }
  });

  /* Вызываем оригинальный send */
  this.realSend(body);
};

Объяснение кода

1. Константы

1
2
3
4
const SUCCESS_STATUS = 200;
const ADD_ITEM_METHOD_ID = 'method=add_item';  
const ADD_ITEM_METHOD_NAME = 'addItem';
const YM_TARGET = 'product-add-to-cart';
  • SUCCESS_STATUS: статус ответа, указывающий на успешное выполнение запроса.
  • ADD_ITEM_METHOD_ID: уникальный идентификатор для метода добавления товара.
  • ADD_ITEM_METHOD_NAME: название метода, который будет вызван для обработки события.
  • YM_TARGET: цель, которая будет передана в аналитику.

2. Список отслеживаемых URL

Массив trackedUrls содержит объекты с параметрами для поиска и обработки запросов. Это позволяет легко добавлять новые события для отслеживания.

1
2
3
4
5
6
7
const trackedUrls = [
  {
    id: ADD_ITEM_METHOD_ID,
    method: ADD_ITEM_METHOD_NAME,
    ymTarget: YM_TARGET,
  }
];

3. Методы для Яндекс.Метрики

Функция createAnalyticsMethods возвращает объект с методами, которые вызывают ym — функцию Яндекс.Метрики для отправки целей.

1
2
3
4
5
6
7
8
const createAnalyticsMethods = (ymId) => {
  return {
    addItem: (targetId) => {
      ym(ymId, 'reachGoal', targetId);
      console.log('Yandex.Metrica target:', targetId);
    }
  };
};

4. Переопределение XMLHttpRequest.send

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
XMLHttpRequest.prototype.send = function(body) {
  this.addEventListener('load', () => {
    try {
      const responseUrl = this.responseURL;
      const status = this.status;

      /* Проверяем каждый элемент в списке отслеживаемых URL */
      for (const trackedUrl of trackedUrls) {
        if (status === SUCCESS_STATUS && responseUrl.includes(trackedUrl.id)) {
          analyticsMethods[trackedUrl.method](trackedUrl.ymTarget);
        }
      }
    } catch (error) {
      console.error('Error processing XMLHttpRequest:', error);
    }
  });

  /* Вызываем оригинальный send */
  this.realSend(body);
};
  • Сохраняем оригинальный метод send в realSend.
  • Переопределяем send, добавляя слушатель события load.
  • При завершении запроса проверяем URL и статус.
  • Если запрос соответствует нужному событию, вызываем метод для отправки цели в Яндекс.Метрику.
  • Вызываем оригинальный send для отправки запроса.

Итог

Данный подход позволяет перехватывать AJAX-запросы, отправляемые через XMLHttpRequest, и выполнять нужные действия при успешном ответе сервера. Это удобно для аналитики пользовательских действий, например, добавления товара в корзину.

<