Analytics

Analytics - модуль для упрощения интеграции сторонний сервисов отслеживания

Основой модуля является класс AnalyticsManager, через который подключаются сторонние сервисы, имеющие тип AnalyticsService, и добавление таких глобальных свойств, как $analytics и $reachGoal. Основная идея состоит в стандартизации API сервисов через такие методы, как getMeta, sendEvent и init.

Module options

src

• type: string
• required: true

Путь к файлу с экземпляром AnalyticsManager текущего приложения. Инстанс должен экспортироваться как default.

Class AnalyticsManager

Properties

services

• type: AnalyticsService[]
• default: []

Массив подключенных сервисов.

Methods

sendEvent

• type: (event: string, params?: Record<string, any>) => void

Метод отправки события для всех сервисов.

init

• type: () => void

Метод инициализации всех сервисов.

getMeta

• type: () => MetaObject

Метод получение мета тэгов всех сервисов

Abstract class AnalyticsService

Static properties

key

• type: string
• required: true

Название сервиса для доступа через глобальное свойство $analytics.

Methods

sendEvent

• type: (event: string, params?: Record<string, any>) => void

Метод отправки события сервиса

init

• type: () => void

Метод инициализации сервиса

getMeta

• type: () => MetaObject

Метод получение мета тэгов сервиса

Composition

useReachGoal

• type: () => (event: string, params?: Record<string, any>) => void

Возвращает фукнцию типа ReachGoal, в которой вызывается sendEvent метод инстанса AnalyticsManager.

useAnalytics

• type: () => Record<string, AnalyticsService>

Возвращает объект типа AnalyticsServiceMap, представляющий собой объект инстансов сервисов, доступных через соответствующего статическое поле key.

Usage

<template>
  <div>
    Analytics Module

    <button @click="onClick">
      Trigger analytics event
    </button>
  </div>
</template>

<script>
import { onMounted } from 'vue';

import { useAnalytics, useReachGoal } from 'shared-front/lib/modules/analytics';

export default {
  setup() {
    const $analytics = useAnalytics();
    const $reachGoal = useReachGoal();

    onMounted(() => {
      $analytics.ga.setUser('some-id');
    });

    function onClick() {
      $reachGoal('ButtonClick', {
        label: 'Some label'
      })
    }

    return {
      onClick,
    };
  },
};
</script>