Данные пользователей вашего сайта через серверный Google Tag Manager

02.02.2025

Всем привет! Очередная порция, на мой взгляд, полезного контента о возможностях sGTM (серверный контейнер).

По поим предыдущим статьям понятно, что я не люблю много писать, а записываю видео. В этой статье хочу показать как можно узнать данные пользователей Telegram если они зашли на ваш сайт через TG приложение Mini App.

А делать мы будем это через Google Tag Manager WEB + Server. Естественно я обратился к официальной документации, которую уже приложил чуть выше, чтобы понять механику работы и параметры активации. Теперь после вводной информации переходим к самой настройке.

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

Для начала нам понадобится вставить в веб-контейнер Google Tag Manager 2 тега типа Пользовательский HTML:

1. HTML код (триггер DOM Ready)

<!-- Подключаем библиотеку Telegram Mini Apps -->
<script src="https://telegram.org/js/telegram-web-app.js?56"></script>
<script>
(function() {
function log(msg) {
if (typeof console !== 'undefined') {
console.log("[TG Mini App] " + msg);
}
}

// Проверяем, что приложение запущено внутри Telegram API
if (typeof Telegram === 'undefined' || !Telegram.WebApp) {
log("Сайт открыт не внутри Telegram WebApp.");
return;
}

// Инициализируем Telegram
var tg = Telegram.WebApp;
tg.ready();

// Извлекаем данные из Telegram
var initData = tg.initDataUnsafe || {};
var user = initData.user || null;

if (!user) {
log("Нет информации о пользователе (user).");
return;
}

// Формируем объект с параметрами
var payload = {
// Уникальный идентификатор пользователя
id: user.id || 'N/A',
// Логин или username пользователя Telegram
username: user.username || 'N/A',
// Имя пользователя (first name)
first_name: user.first_name || 'N/A',
// Фамилия пользователя (last name)
last_name: user.last_name || 'N/A',
// Код языка пользователя (например, "ru")
language_code: user.language_code || 'N/A',
// URL аватара пользователя
photo_url: user.photo_url || 'N/A',
// Telegram Premium
is_premium: (user.is_premium === true || user.is_premium === 'true') ? 'Да' : 'Нет',
// Разрешено ли писать пользователю в личные сообщения
allows_write_to_pm: (user.allows_write_to_pm === true || user.allows_write_to_pm === 'true') ? 'Да' : 'Нет',
// Добавлен ли бот в меню вложений
added_to_attachment_menu: (user.added_to_attachment_menu === true || user.added_to_attachment_menu === 'true') ? 'Да' : 'Нет',
// Уникальный идентификатор запроса, переданный Telegram
query_id: initData.query_id || 'N/A',
// Дата авторизации, преобразованная из UNIX-времени в читаемый формат
auth_date: initData.auth_date ? new Date(initData.auth_date * 1000).toLocaleString() : 'N/A',
// Параметр запуска, переданный при запуске приложения
start_param: initData.start_param || 'N/A',
// Платформа, на которой запущен Telegram
platform: initData.platform || 'N/A',
// Версия приложения Telegram
version: initData.version || 'N/A',
// Цветовая схема Telegram
color_scheme: Telegram.WebApp.colorScheme || 'N/A',
// Дополнительные параметры темы (объект с настройками цветов и стилей)
theme_params: Telegram.WebApp.themeParams || {}
};
// Отправляем событие в dataLayer
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "TGMiniApp",
tgData: payload
});

log("Данные TG Mini App отправлены в dataLayer: ");
})();
</script>

2. Data Tag. Найти этот тег можно в галерее шаблонов.

Примечание: в демонстрационном видео я использовал этот метод клиента. Вы можете делать на другом типе клиента для передачи данных в серверный контейнер.

И в Server-side GTM вставить клиента Data Client (отличается название от веба):

  • Тип тега – HTTP-Запрос
  • Целевой URL – https://api.telegram.org/token вашего бота/sendMessage
  • Метод HTTP – POST
  • Ключ заголовка запроса – Content-Type
  • Значение заголовка запроса – application/json
  • Тело запроса –
{
"chat_id": ваш чат айди,
"parse_mode": "HTML",
"text": "<b>Пользователь открыл TG MiniApp:</b>\n\n<b>ID:</b> {{TG id}}\n<b>Имя:</b> {{TG first_name}}\n<b>Фамилия:</b> {{TG last_name}}\n<b>Username:</b> @{{TG username}}\n<b>Фото:</b> {{TG photo_url}}\n<b>Язык:</b> {{TG language_code}}\n<b>Telegram Premium:</b> {{TG is_premium}}\n<b>Разрешено отправлять в личку:</b> {{TG allows_write_to_pm}}\n<b>Добавлен Бот в меню вложений:</b> {{TG added_to_attachment_menu}}\n<b>Контекст запуска:</b>\n<b>query_id:</b> {{TG query_id}}\n<b>Дата:</b> {{TG auth_date}}\n<b>Параметр запуска:</b> {{TG start_param}}\n<b>Платформа:</b> {{TG platform}}\n<b>Версия Telegram:</b> {{TG version}}\n<b>Цветовая схема:</b> 15"
}

Далее приступаете к просмотру видео (YouTube или Rutube):

Перейти по внешней ссылке
Категории:
Веб-аналитика
Виктор Кончишин
Виктор Кончишин

Веб-Аналитик - Эксперт по GTM (Web и Server Side), автор курса по sGTM. Делал аналитику для 200+ e-commerce и 500+ landing page. Спец: GA4, Я.Метрика, Pixel (FB/IG, VK, TikTok)

Добавить комментарий