National Puppy Menace

    @qlean/york-analytics
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published

    york-analytics — это набор компонентов и утилит, призванный упростить сбор аналитических данных.

    TL / DR

    Для минимальной настройки необходимо добавить в корень приложения RootAnalyticsProvider. После этого все Button, Screen и Page начнут отправлять события автоматически.

    import React from 'react'
    import { RootAnalyticsProvider } from '@qlean/york-analytics'
    
    const App = () => (
      <RootAnalyticsProvider appId="exampleApp" trackEvent={console.log}>
        // Остальной код приложения
      </RootAnalyticsProvider>
    )

    Как это работает?

    Вся система работает через React Context. Ключевым модулем является AnalyticsProvider, который передает дочерним элементам аналитический контекст. Провайдеры можно бесконечно вкладывать друг в друга, создавая новые контексты, при этом дочерние элементы будут брать информацию из ближайшего к ним провайдера.

    Как выглядит аналитическое событие?

    У любого события есть как минимум 3 свойства: category, label и action. По умолчанию к каждому событию добавляется свойство analyticsRoute, с помощью которого можно понять где именнов приложении произошло событие. К событию можно добавить любое количество других данных.

    {
      category: String, // Категория события, как правило совпадает с названием экрана или страницы
      label: String, // Название элемента, отправляющего событие
      action: String, // Название действия
      analyticsRoute: String // Генерируется автоматически из иерархии провайдеров
      ...analyticsPayload: Object, // Дополнительные данные, которые нужно приложить к событию
    }
    
    // Примеры:
    
    {
      category: 'ExampleButton',
      label: 'doExampleAction',
      action: 'click',
    }
    
    {
      category: 'ExamplePage',
      label: 'ExamplePage',
      action: 'mount',
      orderId: '123',
      address: 'Просто улица, д. 1'
    }
    
    Стандартные названия действий содержатся в модуле `eventActionTypes`.

    Как события отправляются на сервер?

    В RootAnalyticsProvider передается проп trackEvent - функция, которая принимает событие и передает его в транспорт. Транспорт может быть разный у разных приложений. После передачи этой функции, все дочерние провайдеры и подключенные компоненты получат к ней доступ через контекст.

    Совместимые компоненты

    Ряд компонентов йорка уже включает в себя аналитические модули.

    york-web

    Page — автоматически создает аналитический контекст и отправляет событие pageView. Категория события равна свойству name Button — автоматически отправляет событие click при нажатии. Категория события берется из ближайшего провайдера. Header — автоматически отправляет события при клике на элементы, вызывающие коллбэки. Категория: header.

    york-react-native

    Screen — автоматически создает аналитический контекст и отправляет событие pageView. Категория события равна свойству name Button — автоматически отправляет событие press при нажатии. Категория события берется из ближайшего провайдера.

    Добавление трекинга к кастомным компонентам

    import React, { useContext } from 'react'
    import PropTypes from 'prop-types'
    import { eventActionTypes, useAnalytics } from '@qlean/york-analytics'
    
    const CustomButton = ({ onClick, analyticsPayload, ...rest }) => {
      const { trackEvent, category } = useAnalytics()
    
      const handleClick = e => {
        trackEvent({
          category,
          label: name,
          action: eventActionTypes.click,
          ...analyticsPayload,
        })
        onClick(e)
      }
    
      return <button name={name} onClick={handleClick} {...rest} />
    }
    
    CustomButton.defaultProps = {
      analyticsPayload: {},
    }
    
    CustomButton.propTypes = {
      onClick: PropTypes.func.isRequired,
      analyticsPayload: PropTypes.object,
    }
    
    export default CustomButton

    Keywords

    none

    Install

    npm i @qlean/york-analytics

    DownloadsWeekly Downloads

    26

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    38.2 kB

    Total Files

    35

    Last publish

    Collaborators

    • snnikitin
    • m.fleitman
    • a.vasyukov
    • qlean-pt
    • a.nazarov
    • qlean-team
    • burlak
    • stetsd
    • kirillvs
    • gorynych
    • hardcorepoet