Main page

Подключение Mini App

Чтобы подключить Mini App, нужно добавить его на соответствующей странице (Mini Apps).

Прежде чем добавлять Mini App добавьте бота если еще этого не сделали. Для подключения Mini App не обяазательно подключать самого бота, но для полноты картины мы рекомендуем это сделать. Подключив бота вы получите максимум информации.

Подключение Mini App

Система попросит вас выбрать бота к которому принадлежит Mini App и его системное название.

Системное имя нужно для сопастовления данных которые приходят в сам бот, если вы укажите не верное имя то при обнаружении таких данных система создаст Mini App с найденым именем, это приведет к путанице в данные.

Добавление счетчика в HTML код Mini App

Добавив Mini App в graspil, вы получите key и код который нужно добавить в ваш Mini App

Замените <--ВАШ КОД--> в 5 строке на key который вы получили

<script type="text/javascript">
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({key:i});
    var f=d.getElementsByTagName(s)[0],j=d.createElement(s);
    j.async=true;j.src="https://w.graspil.com";f.parentNode.insertBefore(j,f);
  })(window,document,"script","graspil","<--ВАШ КОД-->");
</script>

Этот код нужно добавить в секцию <head> вашего приложения.

Подключение MiniApp в которых нет объекта Telegram

Некоторые библиотеки для Telegram Mini App удаляют или очищают глобальный объект window.Telegram (например библиотека @telegram-apps).

Чтобы аналитика корректно работала в таких приложениях требуется дополнительно произвести следующие манипуляции:

При запуске пользователе Mini App ваше приложение должно передать объект initData и дополнительные параметры

Пример инициализации
window.graspil.push(
    {
        custom_init_data_row: Telegram.WebApp.initData, // initData в виде строки
        platform: Telegram.WebApp.platform,
        version: Telegram.WebApp.version,
        viewportHeight: Telegram.WebApp.viewportHeight,
        viewportStableHeight: Telegram.WebApp.viewportStableHeight,
        colorScheme: Telegram.WebApp.colorScheme
    }
)

Пример того как получить эти данные в @telegram-apps доступен по ссылке https://github.com/Telegram-Mini-Apps/reactjs-js-template/blob/master/src/pages/InitDataPage.jsx

Автоматический трекинг стандартных событий (таких, как mainButtonClicked, backButtonClicked и т.д) в Mini App в этом случае работать не будет.

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

В качестве значений для полей event и category используйте название события (т.е. например mainButtonClicked и т.д.)

Трекинг событий

По умолчанию система собирает события кликов по кнопкам и ссылкам, а так же все события формируемые Telegram.

При кликах в качестве названий событий используется содержимое кнопок и ссылок. Вы можете передавать свои события добавив к HTML элементам атрибут data-gs-event

Пример:

<!-- клик по элементу создаст событие с названием: --->
<a href="#">Пуск</a>  <!--event_name: Пуск -->
<a href="#" data-gs-event="Запуск игры">Пуск</a>  <!--event_name: Запуск игры -->

Свои события

Вы можете передавать свои события, вызвав код

graspil.push(
    {
        event: 'Название эвента',
        category: 'Категория эвента', // не обзязательно
        value_num: 100, // не обязательно
        unit: 'usd' // не обязательно
    }
)
Параметр
Type
Обязательный
Описание

event

string

да

Название событие

category

string

нет

Название категории

value_num

float

нет

Числовое значение, например цена (число с плавающей запятой).

unit

string(3)

да, если есть value

Код валюты, максимальная длинна строки 3. Аналогично валютам в TG Api

Трекинг UTM меток

Трекинг UTM работает в общей системе graspil, аналогично меткам в боте. Это означает если источник пользователя был определен в боте он будет сохранен (в рамках моделей атрибуций) за пользователем запустившим Mini App и наоборот.

Правила обработки меток

Метки обрабатываются в соответствии с правилами заданными боту, подробней тут

Как добавить метки?

Метки добавляются аналогично меткам в боте, за одним исключением вместо start нужно использовать параметр startapp

Пример: https://t.me/graspil_bot/app?startapp=source-doc

Трекинг кнопки запуска

По умолчанию graspil умеет определять откуда был запуск Mini App из публичного канала/чата или из вашего бота. Но помимо этого у вас есть возможность настроить трекинг запусков с конкретной кнопки.

Это не связано с utm метками. Это две разные, не зависимые системы определения источника трафика.

Например, ваш бот предоставляет пользователю 3 кнопки для запуска Mini App:

  1. Кнопка меню (стандартная кнопка рядом с полем ввода)

  2. Кнопка "Open App" на странице бота (там где описание бота и юзернейм)

  3. И скорей всего вы отправляете стартовое сообщение пользователю с кнопкой запуска App

У каждой такой кнопки вы задаете https адрес вашего приложение например: https://example.com/myapp если к этому адресу вы добавите параметр gs_source=my_button то это значение будет использовано как источник сессии в Mini App и вы сможете увидеть эти данные в соответствующих отчетах.

Примеры:

В качестве примеров возьмем кнопки перечисленные выше, добавим параметр gs_source к каждой ссылке:

  1. Кнопка меню - https://example.com/myapp?gs_source=menu_button

  2. Кнопка "Open App" - https://example.com/myapp?gs_source=main_button

  3. Кнопка в стартовом сообщении - https://example.com/myapp?gs_source=start_msg

Если в вашей ссылке уже используются параметры, вы можете добавить gs_sourceчерез амерсанд & https://example.com/myapp?myparam=val&gs_source=menu_button

Вы можете использовать параметр gs_source везде, где используется прямая ссылка на App, в остальных случаях используйте UTM метки.

PreviousПодключение исходящих данныхNextПодключение бота на конструкторе

Last updated