Уведомления о 404 ошибках в Telegram с помощью Яндекс Тег Менеджера

15 августа, 2025

В предыдущем материале мы подробно рассмотрели основные способы отслеживания 404 ошибок на сайте с использованием Яндекс Тег Менеджера. Из этого руководства вы узнаете, как настроить автоматическую отправку уведомлений о таких ошибках в Telegram для быстрого мониторинга и своевременного внесения изменений в структуру вашего сайта.

Пример уведомления в Telegram о 404 ошибках

В моем блоге за последние полгода опубликовано более 20 материалов, посвященных настройке и отслеживанию событий с помощью Яндекс Тег Менеджера. В каждом из этих руководств подробно разбираются шаги настройки и методы проверки корректности внедрения. Ранее для отладки использовались шаблон тега Мини дебагер триггеров и переменных, а также режим _ym_debug=2 от Яндекс Метрики. С 20 ноября 2025 года в Яндекс Тег Менеджере появилась полноценная панель отладки, и часть описанных ранее подходов устарела. Поэтому, пожалуйста, пользуйтесь новой панелью отладки ЯТМ для проверки ваших настроек и обращайте внимание на актуальность информации в текущих статьях.

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

Читать еще:

Настроив триггер на отслеживание 404 ошибок, мы можем приступать к отправке данных в Telegram.

Примечание: все приведенные ниже шаги могут быть использованы не только по 404 ошибкам, но и для отправки других данных в Telegram. Например, для передачи заявок с сайта, информации об источнике перехода, времени совершения события, номере сеанса пользователя, User-Agent, IP-адресе посетителя, географических данных (страна, город), типе устройства пользователя и многом другом.

Содержание

Создание бота Telegram

Дополнительные материалы по этой теме:

Для удобства работы и тестирования установите десктопную версию Telegram. Чтобы создать телеграм-бота, вам необходимо найти самого главного - @botfather (с галочкой):

Главный бот BotFather

Нажмите на кнопку Start или введите /start:

Команда Start

Вы увидите список команд для создания бота или управлениями текущими (уже созданными):

Команды для бота

В списке есть команда /newbot. Данная функция позволяет создать нового бота. Вы можете прописать эту команду вручную в поле отправки сообщения или просто нажать на эту команду в списке:

Команда /newbot

Придумайте имя для бота и нажмите Enter (например - analyticsbot):

Название Telegram-бота

На следующем шаге выберете логин (username) для вашего бота. Он должен заканчиваться на bot. Например: TetrisBot или tetris_bot (в моем примере - yakov_analytics_bot):

Логин (username) Telegram-бота

Если логин занят, вам придет уведомление: Sorry, this username is already taken. Please try something different. Вам нужно будет придумать другой username для своего бота.

Сохраните токен, который бот вам пришлет в ответном сообщении. Он понадобится вам в дальнейшем:

Токен

Затем следует активировать бота. Чтобы это сделать, вам нужно найти его в поиске Telegram и нажать на Start:

Активация Telegram-бота

Теперь необходимо получить chat id. Вставьте в браузер ссылку:

https://api.telegram.org/botXXXXXXXXXXXXXXXXXXXXXXX/getUpdates

1	https://api.telegram.org/botXXXXXXXXXXXXXXXXXXXXXXX/getUpdates

, где XXXXXXXXXXXXXXXXXX – ваш токен.

Первый результат в браузере должен быть примерно такой:

Первый результат в браузере

Как видите, chat id не отобразился. Попробуйте в своем боте написать любое сообщение и отправить его:

Отправьте любое сообщение в чат своего бота

А затем вернитесь назад и повторите действия в браузере. Так вы запустите созданного бота и должны увидеть chat id:

Получение chat id

Сохраните chat id (в моем примере - 49472219). Он понадобится вам в дальнейшем. На этом настройка Telegram-бота завершена.

Добавление кода в Apps Script

Перейдите в Google Таблицы по https://docs.google.com/spreadsheets/u/0/ и создайте новую таблицу. Откройте меню Расширения – Apps Script:

Расширения – Apps Script

Добавьте этот код в редактор, удалив предварительно все лишнее:

function sendToTelegram(text) {
  var botId = 'token_bot';
  var chatId = 'chat_id';
  var payload = {
    method: 'post',
    contentType: 'application/json',
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    payload: JSON.stringify({
      chat_id: chatId,
      parse_mode: 'HTML',
      text: text
    }),

  };

  UrlFetchApp.fetch('https://api.telegram.org/bot' + botId + '/sendMessage', payload);

}

function doPost(e) {
  var jsonString = e.postData.getDataAsString();
  var jsonData = JSON.parse(jsonString);


  var response =
  'Страница с ошибкой: ' + jsonData.url + '\n' +
  'С какой страницы перешли на 404: ' + jsonData.referrer;


  sendToTelegram(response);
}

function sendToTelegram(text) {

var botId = 'token_bot';

var chatId = 'chat_id';

var payload = {

method: 'post',

contentType: 'application/json',

headers: {

'Access-Control-Allow-Origin': '*'

payload: JSON.stringify({

chat_id: chatId,

parse_mode: 'HTML',

text: text

}),

};

UrlFetchApp.fetch('https://api.telegram.org/bot' + botId + '/sendMessage', payload);

}

function doPost(e) {

var jsonString = e.postData.getDataAsString();

var jsonData = JSON.parse(jsonString);

var response =

'Страница с ошибкой: ' + jsonData.url + '\n' +

'С какой страницы перешли на 404: ' + jsonData.referrer;

sendToTelegram(response);

}

В переменную botId добавьте свой токен, который вы получили при создании бота. В переменную chatId вставьте chat id, который вы получили, когда вставляли в браузер ссылку. Одинарные кавычки с двух сторон должны быть:

botId и chatId

Важное в этом коде - это конструкция после var response =, в которой объявляются все нужные переменные для отслеживания 404 ошибок. У нас это:

var response

полный URL страницы текущей страницы, где была обнаружена ошибка;
реферер - адрес страницы, с которой пришел пользователь на текущую страницу.

После этого нажмите на кнопку Начать развертывание – Новое развертывание:

Начать развертывание – Новое развертывание

В открывшемся окне выберите тип Веб-приложение:

Тип - Веб-приложение

В настройках укажите:

Запуск от имени - От моего имени
У кого есть доступ - Все

Настройки веб-приложения

В завершение нажмите кнопку Начать развертывание. Вас попросят предоставить разрешение для доступа к данным Google. Сделайте это:

Предоставление доступов

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

Перейти на страницу проекта

Далее разрешаете доступ к аккаунту Google (Allow). На заключительном шаге вы получите ссылку вида https://script.google.com/macros/..., которую нужно скопировать:

Скопируйте ссылку URL

Если цель - просто отправить сообщение боту прямо с сайта, то Google Apps Script не обязателен. Но есть нюанс - Telegram API требует токен бота, и если вы вставите его прямо в HTML-код сайта в Яндекс Тег Менеджере, то любой человек сможет его увидеть в коде страницы, скопировать и использовать. Это огромная дыра в безопасности.

Поэтому существуют три варианта:

через сервер/бэкенд (безопасно): Google Apps Script, PHP, Node.js и т.п. - токен хранится на сервере, клиент его не видит;
через клиент (безопасность нулевая): можно отправить запрос прямо из браузера с <script> или пользовательским HTML тегом в конструкторе сайтов, но тогда токен будет открыт (очень плохо!);
через формы, которые сами шлют в Telegram без кода: используются готовые сервисы (Formspree, Tally, Telegram Forms), но они внутри все равно работают по схеме "сервер-посредник".

Вот как выглядит пример небезопасного способа:

<script>
fetch("https://api.telegram.org/botВАШ_ТОКЕН/sendMessage", {
  method: "POST",
  headers: {"Content-Type": "application/json"},
  body: JSON.stringify({
    chat_id: "ВАШ_CHAT_ID",
    text: "Привет! Это сообщение с сайта."
  })
})
.then(r => r.json())
.then(data => console.log(data))
.catch(err => console.error(err));
</script>

fetch("https://api.telegram.org/botВАШ_ТОКЕН/sendMessage", {

method: "POST",

headers: {"Content-Type": "application/json"},

body: JSON.stringify({

chat_id: "ВАШ_CHAT_ID",

text: "Привет! Это сообщение с сайта."

})

.then(r => r.json())

.then(data => console.log(data))

.catch(err => console.error(err));

</script>

Когда вы вставите этот скрипт в Яндекс Тег Менеджере в Пользовательский HTML тег и добавите ваш токен бота Telegram, то любой посетитель сайта сможет открыть код страницы и забрать ваш токен, а потом слать сообщения от имени бота. Такой сценарий крайне нежелателен. Именно поэтому мы используем в бесплатной реализации Google Apps Script, скрывая свои намерения и токен от посторонних глаз.

Заключительный тег в Яндекс Тег Менеджере

Для создания окончательного тега, который будет отправлять данные об отслеживаемых 404 ошибках в вашего бота Telegram, вам необходимо активировать опцию Пользовательский HTML в настройках счетчика Яндекс Метрики.

Для этого перейдите в раздел Настройки - Счетчик:

Настройки - Счетчик

И включите функцию Пользовательский HTML:

Активация пользовательского HTML

Пользовательский HTML в Yandex Tag Manager (YTM) - это тип тега, который позволяет добавлять на сайт произвольный HTML-код, JavaScript или другие скрипты, которые не поддерживаются стандартными тегами и которых нет в каталоге шаблонов. Код будет выполняться при срабатывании триггера, в нем также можно использовать переменные для динамической подстановки нужных значений.

Сохраните изменения.

Вернитесь в Яндекс Тег Менеджер и создайте тег типа Пользовательский HTML:

Шаблон тега "Пользовательский HTML"

В поле HTML вставьте нижеприведенный фрагмент кода:

<script type="text/javascript">
if (document.location.href.indexOf('gtm-msr.appspot.com/render2') === -1) {
    var webhookUrl = "URL вашего веб-приложения";

    var params = {
        "url": '{{Page URL}}',
        "referrer": '{{Referrer}}'
    };

    setTimeout(function() {
        fetch(webhookUrl, {
            method: 'POST',
            headers: {
                "Content-Type": "application/json"
            },
            mode: 'no-cors',
            body: JSON.stringify(params)
        })
        .then(function(response) {
            console.log("Запрос на Telegram выполнен успешно");
        })
        .catch(function(error) {
            console.error("Ошибка выполнения запроса:", error);
        });
    }, 3000); // 3000 миллисекунд = 3 секунды
}
</script>

if (document.location.href.indexOf('gtm-msr.appspot.com/render2') === -1) {

var webhookUrl = "URL вашего веб-приложения";

var params = {

"url": '{{Page URL}}',

"referrer": '{{Referrer}}'

};

setTimeout(function() {

fetch(webhookUrl, {

method: 'POST',

headers: {

"Content-Type": "application/json"

mode: 'no-cors',

body: JSON.stringify(params)

})

.then(function(response) {

console.log("Запрос на Telegram выполнен успешно");

})

.catch(function(error) {

console.error("Ошибка выполнения запроса:", error);

});

}, 3000); // 3000 миллисекунд = 3 секунды

}

</script>

, где:

для параметров url и referrer вы должны использовать встроенные переменные Page URL и Referrer, позволяющие извлекать полный URL-адрес страницы с 404 ошибкой и реферер;
для переменной webhookUrl укажите URL вашего веб-приложения (ссылку https://script.google.com/macros/...).

Примечание: с 14 августа в Яндекс Тег Менеджере поддерживается шаблонизация в теге Пользовательский HTML. То есть вы можете в собственном JavaScript-коде ссылаться на другие переменные, которые вы раннее создали в своем контейнере, используя шаблон {{ Как только вы начнете вводить двойные фигурные скобки, вам откроется список доступных переменных, из которого вы можете выбрать нужные:

Шаблонизация в теге "Пользовательский HTML"

В качестве триггера активации используйте тот же триггер, который вы создали для отслеживания 404 ошибок и передачи данных в Яндекс Метрику.

Итоговый код HTML будет выглядеть примерно так:

Итоговый тег для отправки данных в Telegram

Сохраните тег.

Проверка настроек

Для проверки всех выполненных настроек опубликуйте контейнер Яндекс Тег Менеджера. В качестве примера я заранее создал битую ссылку на сайте и разместил ее в этом руководстве (Битая ссылка). При переходе открывается страница с 404 ошибкой.

Страница 404

В этот же момент в Telegram должно отправиться сообщение такого вида:

Пример уведомления в Telegram о 404 ошибках

Теперь каждый раз, когда на вашем сайте будет срабатывать событие 404, в Telegram вы будете получать уведомление с полным URL-адресом страницы с ошибкой и реферером (адресом страницы, с которой пришел пользователь на текущую страницу). Это даст вам возможность быстро отслеживать 404 и оперативно вносить изменения в страницы/ссылки вашего сайта.

Метки: 404 ошибка, Apps Script, Telegram, Яндекс Тег Менеджер

Уведомления о 404 ошибках в Telegram с помощью Яндекс Тег Менеджера

Создание бота Telegram

Добавление кода в Apps Script

Заключительный тег в Яндекс Тег Менеджере

Проверка настроек

Еще статьи