09.09.2025 11:20
vladislav_lukashenko 0 153 Источник

Теперь в рекламном кабинете Telegram Ads появился пиксель - инструмент для отслеживания действий пользователей на сайте после перехода по рекламе. Это значит, что можно:

  • видеть заявки, покупки и другие действия прямо в Telegram Ads,

  • автоматически считать CPL и CPA,

  • больше не сводить вручную статистику из Метрики, GA4 и других систем.

Разберем, как это настроить - от установки кода до получения данных в интерфейсе Telegram.

Приветствую, Хабр! Сегодня пока готовлю большой цикл статей по тег менеджерам на нашем рынке решил запостить небольшую но не менее важную инструкцию настройки аналитики для рекламы в Телеграм. Реклама в ТГ становится все востребованней и чем точнее настроено ваше отслеживание тем меньше бюджета вы сольете впустую. =)

Влад Лукашенко

Head of SEO, Тензор (разработчик saby.ru), автор ТГ-канал "ВладПРО"

Я более 10 лет занимаюсь аналитикой, SEO и управлением командами в digital-маркетинге. А в своем Телеграм канале пишу еще больше про всякое из реального маркетинга. Консультирую по аналитике web-проектов и настройке инструментов маркетинга, помогаю проводить технические собеседования специалистов по различным типам трафика.

Что такое пиксель и как он работает

Пиксель Telegram Ads - это небольшой JS-скрипт, который вы размещаете на своем сайте. Он передает в рекламный кабинет информацию о действиях пользователя после перехода по объявлению. Например:

  • просмотр страницы,

  • отправка формы,

  • оформление заказа и др.

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

Telegram Ads использует модель атрибуции Post-View. Это значит, что даже если пользователь просто увидел рекламу (но не кликнул), а позже сам нашел сайт и совершил действие - оно все равно засчитается.

Общая схема настройки пикселя

Чтобы пиксель начал работать, нужно сделать три вещи:

  1. Установить базовый код (Base Code) на сайт.

  2. Создать событие (например, «Заявка») и получить Event Code.

  3. Привязать событие к объявлению при его создании.

Установка базового пикселя на сайт

Base Code - это основной фрагмент кода, который должен быть размещен на всех страницах сайта. Он не отслеживает действия, а лишь подготавливает сайт к их фиксации.

Вот где его взять:

Перейдите в кабинет Telegram Ads → раздел Manage Events.

Нажмите Create a pixel.

Скопируйте код Base Code, который появится в всплывающем окне.

Далее добавьте этот код в раздел <HEAD> вашего сайта. Разберем это на популярных примерах.

Примечание для крутых разработчиков =): 

  1. Скрипт загружается синхронно.

  2. Инициализирует глобальную функцию window.tgp(...).

  3. Отложенные вызовы (tgp.queue) сохраняются до полной загрузки скрипта.

Основной скрипт должен быть размещен на всех страницах сайта, иначе события не будут отправляться (в SPA - обрабатывается отдельно, см. ниже).

Совсем простой вариант установки для сайт на Tilda

  1. Зайдите на tilda.ru/projects, выберите нужный сайт → Настройки сайта.

  2. Перейдите в раздел Еще → HTML-код для вставки в <HEAD>.

  3. Вставьте код из Telegram в открывшееся поле.

  4. Сохраните изменения и опубликуйте все страницы сайта.

Вариант для продвинутых через Google Tag Manager или напрямую в код

Если вы используете GTM, то вставьте Base Code как пользовательский HTML-тег, который срабатывает на всех страницах.

Создаем событие для отслеживания действий (Event Code)

После установки базового кода, самое время создать событие, которое будет фиксировать нужное нам действие - например, отправку формы или нажатие кнопки «Оформить заказ».

Шаги:

В Telegram Ads перейдите в Manage Events.

Нажмите Add an Event.

В появившемся окне задайте:

  • название события (например, Заявка),

  • тип события (например, Lead / Sign Up - это влияет только на название, не на работу пикселя),

  • нажмите Save.

Как передаются события

Telegram  не раскрывает подробности работы пикселя, но, по опыту, такие технологии используют один из стандартных протоколов отправки данных - вероятнее всего navigator.sendBeacon или fetch.. Отправка событий происходит в фоне, без блокировки основного потока.

Формат запроса, судя по заголовкам в devtools, минимальный JSON с идентификатором пикселя, ID события и, возможно, информацией о браузере и сессии.

Настраиваем отслеживание события на сайте

После создания события Telegram покажет два кода:

  • Base Code (мы уже установили),

  • Event Code - именно он нужен для фиксации конкретного действия на сайте.

Из Event Code нам нужен ID события - это набор символов, который следует сразу после tgp('event', '...').

Как «прикрепить» событие к кнопке отправки формы (на примере Tilda):

  1. Перейдите на свой сайт и найдите кнопку, нажатие которой вы хотите отслеживать.

  2. Кликните по кнопке правой кнопкой → Просмотреть код (в браузере).

  3. Найдите значение внутри class="..." и запомните текст кнопки (например: t-submit, текст: Отправить).

4. Перейдите в Настройки сайта → Еще → HTML-код для HEAD.

5. Вставьте следующий шаблон кода под уже добавленным Base Code:

<script>
window.addEventListener('load', function () {
    const eventCode = 'EVENT_ID';
    const buttonSelector = '.КЛАСС_КНОПКИ';
    const expectedText = 'ТЕКСТ_КНОПКИ';

    const submitButton = document.querySelector(buttonSelector);

    if (submitButton) {
        submitButton.addEventListener('click', function () {
            const buttonText = submitButton.textContent.trim();

            if (buttonText.includes(expectedText)) {
                tgp('event', eventCode);
                console.log('Событие отправлено');
            } else {
                console.log(`Текст кнопки не соответствует: "${buttonText}"`);
            }
        });
    } else {
        console.log('Кнопка не найдена');
    }
});
</script>

Замените:

  • 'EVENT_ID' на ID вашего события,

  • '.КЛАСС_КНОПКИ' на класс кнопки (с точкой в начале),

  • 'ТЕКСТ_КНОПКИ' - на текст, отображаемый на кнопке.

7. Нажмите Сохранить. Вернитесь в «Мои сайты» и нажмите Опубликовать все страницы.

Проверяем, работает ли событие

Перед запуском рекламы убедимся, что событие действительно срабатывает.

Способ через консоль браузера:

  1. Откройте сайт.

  2. Кликните правой кнопкой мыши → Просмотреть код → вкладка Консоль.

  3. Заполните форму и нажмите кнопку.

Если все сделано правильно - в консоли появится сообщение: 'событие отправлено'.

Также можно проверить в Telegram Ads:

  • Перейдите в раздел Manage Events.

  • В колонке «Last Event Time» появится время последнего срабатывания.

Для продвинутых вот еще список более точных методов проверки:

Проверка через вкладку Network

  1. Откройте DevTools (F12) на нужной странице.

  2. Перейдите на вкладку Network.

  3. Фильтруйте по ключевым словам: tgp, event, beacon, collect, telegrampixel, pixel, event.

  4. Выполните целевое действие (например, нажмите на кнопку).

  5. Ищите в списке XHR или Beacon-запрос, отправленный на сервер Telegram.

Как выглядит:

  • Тип запроса: beacon или fetch.

  • Адрес: может быть вида https://ads-telegram-collect.telegram.org/…

  • Статус: 200 OK или 204 No Content.

  • Тело запроса (payload) будет содержать ID события, ID пикселя и метаданные.

Если вы не видите таких запросов, скорее всего, скрипт не загрузился или событие не вызвалось.

Локальный мок-режим (эмуляция без отправки)

Если вы не хотите реально слать события в Telegram (например, на этапе разработки), можно захардкодить мок-функцию, которая имитирует отправку, но ничего не делает.

Пример:

if (typeof window.tgp !== 'function') {
  window.tgp = function (...args) {
    console.log('? MOCK: tgp called with:', args);
  };
}

Полезно, если вы работаете локально без подключения скрипта Telegram или в staging-среде.

Безопасная обертка для SPA

Создайте функцию, которая будет надежно и безопасно вызывать событие: 

export function sendTelegramEvent(eventId: string) {
  if (typeof window !== 'undefined' && typeof window.tgp === 'function') {
    window.tgp('event', eventId);
    console.log(`[Telegram Pixel] Sent event: ${eventId}`);
  } else {
    console.warn(`[Telegram Pixel] Not ready. Event "${eventId}" not sent`);
  }
}

Привязываем событие к объявлению в Telegram Ads

Хорошо, разобрались со всеми серьезными правилами постановки пикселя, теперь надо привязать событие к объявлению, иначе ничего работать не будет. Для этого осталось указать, какое именно событие считать конверсией при запуске рекламы.

Шаги:

  1. В рекламном кабинете Telegram Ads нажмите Create a new ad.

  2. Заполните:

    • URL you want to promote - ссылку на сайт (не забудьте про UTM-метки),

    • Website name - заголовок для отображения в рекламе.

  3. Прокрутите страницу почти до конца и найдите поле Conversion event.

  4. В выпадающем списке выберите нужное событие (например, «Заявка»), которое вы создали ранее.

Важно: Можно выбрать только одно событие на одно объявление.

После запуска рекламы Telegram Ads начнет автоматически фиксировать все выполненные действия по заданному событию - прямо в статистике объявления.

Что дальше: данные, оптимизация и тесты

Поздравляю! Вы настроили пиксель Telegram Ads, и теперь данные о заявках, покупках и других действиях пользователей отображаются прямо в кабинете Telegram, без необходимости использовать сторонние аналитические системы. События можно использовать не только для статистики, но и в будущем - для оптимизации показов (если Telegram внедрит автооптимизацию).

Комментарии (0)