Всем привет! Очередная порция, на мой взгляд, полезного контента о возможностях 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):