<!DOCTYPE html>
<html>
  <head>
    <script>
      // код @mrgis/snitch-mini-apps (https://unpkg.com/@mrgis/snitch-mini-apps@latest/dist/iife.min.js)
    </script>
    <script>
      // инициализация счетчика snitch:
      window.snitch = createSnitch({
        initialScreen: { screenType: 'loading' },
        flagApiEndpoint: 'https://flags.com/api/v1/' // опциональный параметр
      })
    </script>
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

⚠️ Важно подключать код библиотеки непосредственно в код страницы (inline) перед кодом приложения. Можно скопировать и вставить код в разметку вручную отсюда https://unpkg.com/@mrgis/snitch-mini-apps@latest/dist/iife.min.js или организовать вставку на этапе сборки проекта, например с помощью webpack-плагина InlineChunkHtmlPlugin

TypeScript

Для использования snitch через TypeScript вам понадобится декларировать типы:

type SnitchEventPayload = {
  [key: string]: string | number
}

type Flag = {
  flagKey: string
  match: boolean
  variant?: string
  attachment?: string
}

type FlagEvaluationContext = Record<string, string | number | boolean>

interface Snitch {
  (eventName: string, eventPayload?: SnitchEventPayload): void
  getFlag(flagKey: string, context?: FlagEvaluationContext): Promise<Flag>
  getFlags(flagKeys: string[], context?: FlagEvaluationContext): Promise<Flag[]>
}

declare global {
  interface Window {
    snitch: Snitch
  }
}

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

Функция snitch имеет сигнатуру (eventName: string, eventPayload?: { [key: string]: string | number }) => void. Для трекинга события необходимо вызвать функцию snitch передав имя события и опциональные параметры, например:

snitch('startPlayingButtonPress') // пользователь нажал на кнопку «Начать игру»
snitch('characterLevelUp', { characterId: '123', level: 12 }) // пользователь прокачал персонажа с id '123' до 12 уровня

Трекинг навигации пользователя по экранам приложения

Чтобы собирать статистику о навигации пользователя внутри приложения вводится понятие экрана. Экран приложения описывается объектом с полем screenType и опциональным полем screenId, например: { screenType: 'onboarding', screenId: 'step1' }

screenType: string — указывает на тип экрана, например: 'сatalogue', 'product', 'cart'.
screenId: string — позволяет, когда это требуется, уточнить информацию об экране. Например, экран со статьей «Как есть печенье и не толстеть?» screenType может иметь значение 'article', а screenId значение 'how-to-eat-cokies-and-not-get-fat' — уникальный slug статьи.

Пример разметки экранов приложения

Чтобы настроить трекинг навигации, необходимо:

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

window.snitch = createSnitch({
  initialScreen: { screenType: 'loading' } // <- экран загрузки
})

При показах пользователю нового экрана необходимо отправлять событие screenChange с информацией об экране в качестве параметров события, например:

snitch('screenChange', { screenType: 'catalogue' }) // пользователь перешел на экран каталога
snitch('screenChange', { screenType: 'product', screenId: 'wagon-wheels-cookies' }) // пользователь перешел на экран продукта «Печенье Wagon Wheels»
snitch('screenChange', { screenType: 'cart' }) // пользователь перешел в корзину

Флаги

Snitch позволяет работать с feature flags. Для этого при инициализации счетчика в параметре flagApiEndpoint нужно указать URL эндпоинта сервиса флагов. Значения флагов можно получать методом snitch.getFlag или батч методом snitch.getFlags. Ответ будет содержать флаг или массив флагов в виде объекта с полями:

flagKey: string — уникальное имя флага
match: boolean — включен или отключен флаг
variant: string — вариант, если флаг имеет варианты
attachment: string — дополнительные данные в формате JSON-строки

Пример использования getFlag:

snitch.getFlag('test-app-button-color').then(console.log)

{
    "flagKey": "test-app-button-color",
    "match": true,
    "variant": "red",
    "attachment": ""
}

Пример использования getFlags:

snitch.getFlags(['test-app-button-color', 'test-app-illustration-toggle']).then(console.log)

[
    {
        "flagKey": "test-app-button-color",
        "match": true,
        "variant": "red",
        "attachment": ""
    },
    {
        "flagKey": "test-app-illustration-toggle",
        "match": false,
        "variant": "",
        "attachment": ""
    }
]

FAQs

What is @mrgis/snitch-mini-apps?

Is @mrgis/snitch-mini-apps popular?

Is @mrgis/snitch-mini-apps well maintained?

Package last updated on 31 May 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install