> For the complete documentation index, see [llms.txt](https://docs.graspil.com/ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.graspil.com/ru/connect-bot/mini-app.md). # Подключение Mini App Чтобы подключить Mini App, нужно добавить его на соответствующей странице ([Mini Apps](https://app.graspil.com/webapps)). {% hint style="info" %} Прежде чем добавлять Mini App добавьте бота если еще этого не сделали. Для подключения Mini App не обяазательно подключать самого бота, но для полноты картины мы рекомендуем это сделать.\ Подключив бота вы получите максимум информации. {% endhint %} ## Подключение Mini App Система попросит вас выбрать бота к которому принадлежит Mini App и его системное название. {% hint style="warning" %} Системное имя нужно для сопастовления данных которые приходят в сам бот, если вы укажите не верное имя то при обнаружении таких данных система создаст Mini App с найденым именем, это приведет к путанице в данные. {% endhint %} ## Добавление счетчика в HTML код Mini App Добавив Mini App в graspil, вы получите `key` и код который нужно добавить в ваш Mini App *Замените* `<--ВАШ КОД-->` *в 5 строке на* `key` *который вы получили* {% code overflow="wrap" lineNumbers="true" %} ```javascript ``` {% endcode %} Этот код нужно добавить в секцию \ вашего приложения. #### Доп. настройки При инициализации можно передать несколько дополнительных настроек.
ПеременнаяЗначениеОписание
trackClicksfalse, taggedНастройка определяет будут ли автоматически создаватся события при кликах, по умолчанию true.

false - события не будут создаватся автоматичски
tagged - События будут создаватся только если указан data-gs-event
trackTgEventsfalse,trueОпределяет будут ли автоматически создаватся события при сервесных событиях Mini App
{% hint style="info" %} **Отключение автоматического создания событий** **позволит** уменьшить кол-во событий в системе и следовательно позволит **оптимизировать расходы на сервис** {% endhint %} #### Пример кода с настройками ```javascript ``` ## Переименование глобальной переменной (если `window.graspil` уже занят) По умолчанию скрипт работает через глобальную переменную `window.graspil`. Если в вашем Mini App это имя уже занято другим скриптом, его можно поменять — за это отвечает четвёртый аргумент вызова в сниппете: ```javascript ``` Здесь `"graspil"` заменён на `"myQueueName"`. После этого весь конфиг и вызовы `graspil.push(...)` нужно заменить на `myQueueName.push(...)`. {% hint style="warning" %} Не убирайте часть `?l="+l` в строке с `j.src` — именно через неё скрипт узнаёт, под каким именем вы решили его разместить. Без этой части скрипт продолжит использовать `window.graspil`, даже если вы поменяли имя в четвёртом аргументе. {% endhint %} ### Подключение MiniApp в которых нет объекта Telegram Некоторые библиотеки для Telegram Mini App удаляют или очищают глобальный объект `window.Telegram` (например библиотека [@telegram-apps](https://docs.telegram-mini-apps.com/)). Чтобы аналитика корректно работала в таких приложениях требуется дополнительно произвести следующие манипуляции: При запуске пользователе Mini App ваше приложение должно передать объект [initData](https://core.telegram.org/bots/webapps#initializing-mini-apps) и дополнительные параметры {% code title="Пример инициализации" overflow="wrap" lineNumbers="true" %} ```javascript 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 } ) ``` {% endcode %} *Пример того как получить эти данные в* [*@telegram-apps*](https://docs.telegram-mini-apps.com/) *доступен по ссылке* [*https://github.com/Telegram-Mini-Apps/reactjs-js-template/blob/master/src/pages/InitDataPage.jsx*](https://github.com/Telegram-Mini-Apps/reactjs-js-template/blob/master/src/pages/InitDataPage.jsx) Автоматический трекинг [стандартных событий](https://core.telegram.org/bots/webapps#events-available-for-mini-apps) (таких, как `mainButtonClicked`, `backButtonClicked` и т.д) в Mini App в этом случае работать не будет. Если вы хотите передавать такие события вам придется передавать их вручную, используя код для [трекинга событий](#treking-sobytii). В качестве значений для полей `event` и `category` используйте название события (т.е. например `mainButtonClicked` и т.д.) ## Трекинг событий По умолчанию система собирает события кликов по кнопкам и ссылкам, а так же все события формируемые Telegram. При кликах в качестве названий событий используется содержимое кнопок и ссылок. Вы можете передавать свои события добавив к HTML элементам атрибут `data-gs-event` {% hint style="info" %} Вы можете [отлючить](#dop.-nastroiki) автоматическое создание событий, чтобы уменьшить их количство. {% endhint %} **Пример:** {% code overflow="wrap" lineNumbers="true" %} ```html Пуск Пуск ``` {% endcode %} ### Свои события Вы можете передавать свои события, вызвав код {% code overflow="wrap" lineNumbers="true" %} ```javascript graspil.push( { event: 'Название эвента', category: 'Категория эвента', // не обзязательно value_num: 100, // не обязательно unit: 'usd' // не обязательно } ) ``` {% endcode %}
ПараметрTypeОбязательныйОписание
eventstringдаНазвание событие
categorystringнетНазвание категории
value_numfloatнетЧисловое значение, например цена (число с плавающей запятой).
unitstring(3)да, если есть valueКод валюты, максимальная длинна строки 3. Аналогично валютам в TG Api
## Трекинг UTM меток Трекинг UTM работает в общей системе graspil, аналогично [меткам в боте](/ru/app/start-utm.md). Это означает если [источник](/ru/app/start-utm/source.md) пользователя был определен в боте он будет сохранен (в рамках [моделей атрибуций](/ru/app/attribution-models.md)) за пользователем запустившим Mini App и наоборот. #### Правила обработки меток Метки обрабатываются в соответствии с правилами заданными боту, [подробней тут](/ru/app/start-utm.md) #### Как добавить метки? Метки добавляются аналогично меткам в боте, за одним исключением вместо `start` нужно использовать параметр `startapp` Пример: `https://t.me/graspil_bot/app?startapp=source-doc` ## Трекинг кнопки запуска По умолчанию graspil умеет определять откуда был запуск Mini App из публичного канала/чата или из вашего бота. Но помимо этого у вас есть возможность настроить трекинг запусков с конкретной кнопки. {% hint style="info" %} Это не связано с utm метками. Это две разные, не зависимые системы определения источника трафика. {% endhint %} Например, ваш бот предоставляет пользователю 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` {% hint style="info" %} Если в вашей ссылке уже используются параметры, вы можете добавить `gs_source`через амерсанд **&** `https://example.com/myapp?myparam=val&gs_source=menu_button` {% endhint %} Вы можете использовать параметр `gs_source` везде, где используется прямая ссылка на App, в остальных случаях используйте UTM метки.