Подключение 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?l="+l;f.parentNode.insertBefore(j,f);
  })(window,document,"script","graspil","<--ВАШ КОД-->");
</script>

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

Доп. настройки

При инициализации можно передать несколько дополнительных настроек.

Переменная

Значение

Описание

trackClicks

false, tagged

Настройка определяет будут ли автоматически создаватся события при кликах, по умолчанию true. false - события не будут создаватся автоматичски tagged - События будут создаватся только если указан data-gs-event

trackTgEvents

false,true

Определяет будут ли автоматически создаватся события при сервесных событиях Mini App

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

Пример кода с настройками

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

Переименование глобальной переменной (если `window.graspil` уже занят)

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

<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?l="+l;f.parentNode.insertBefore(j,f);
  })(window,document,"script","myQueueName","<--ВАШ КОД-->");
</script>

Здесь "graspil" заменён на "myQueueName". После этого весь конфиг и вызовы graspil.push(...) нужно заменить на myQueueName.push(...).

Не убирайте часть ?l="+l в строке с j.src — именно через неё скрипт узнаёт, под каким именем вы решили его разместить. Без этой части скрипт продолжит использовать window.graspil, даже если вы поменяли имя в четвёртом аргументе.

Подключение 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

да

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

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

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

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

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

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

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

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

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

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

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

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

Кнопка меню (стандартная кнопка рядом с полем ввода)
Кнопка "Open App" на странице бота (там где описание бота и юзернейм)
И скорей всего вы отправляете стартовое сообщение пользователю с кнопкой запуска App

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

Примеры:

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

Кнопка меню - https://example.com/myapp?gs_source=menu_button
Кнопка "Open App" - https://example.com/myapp?gs_source=main_button
Кнопка в стартовом сообщении - https://example.com/myapp?gs_source=start_msg

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

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

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

Последнее обновление 13 дней назад