@sm-monobrands/personalization-event-manager v1.0.1

Personalization Event Manager Plugin

Плагин для отправки событий в PersGate

Installation

Плагин должен быть подключен после создания экземпляра приложения с внедренным роутером. Вторым аргументом должен быть передан объект настроек, в котором должен находиться экземпляр созданного приложения app, метод отправки данных sendEventMethod и необязательный объект опций options

// @/app.js

import Vue from 'vue'
import { createRouter } from '@/router'
import personalizationEventManagerPlugin from '@/plugins/personalization-event-manager/personalization-event-manager'
import api from '@/api/entry-api'

const { sendEventMethod } = api

const router = createRouter()
const app = new Vue({
  router,
  ...
})

Vue.use(personalizationEventManagerPlugin, {
  app,
  sendEventMethod,
  options
})

app

Экземпляр созданного приложения с внедренным роутером.

sendEventMethod

Метод отправки данных на бэк. Принимает 2 параметра:

• eventType: string - Тип события, например 'page-view'
• eventData: object - Данные события, передаваемые на бэк

options

Необязательный объект дополнительныйх настроек

• options.breakpoints - Объект, содержащий константы брейкпоинтов, для определения параметра ADAPTATION. По умолчанию:

const DEFAULT_BREAKPOINTS = {
  MOBILE: 320,
  TABLET: 768,
  DESKTOP: 1280
}

• options.storage - Хранилище для данных менеджера. Должно иметь методы getItem(key) и setItem(key, value). По умолчанию: localstorage

Usage

Интерфейс плагина доступен во всех компонентах через поле this.$personalization

Для отправки события в PersGate нужно вызвать соответствующий метод плагина. События отправляются только из клиентской части приложения. Попытка отправки события на стороне сервера будет проигнорирована.

Page Type

Среди данных, отправляемых с каждым событием, есть поле page.type, определяющее тип страницы. Оно должно соответствовать справочнику типов страниц МДМ (@sm-monobrands/page-type-registry), его значение устанавливается в конфигурации роутера и может быть сконфигурировано для страницы двумя способами:

1. Роут имеет единственный возможный тип страницы

В таком случае можно передать pageType напрямую в meta.pageType. Дополнительная конфигурация не ребуется.

// @/router/index.js

const PAGE_TYPE = require('@sm-monobrands/page-type-registry')

export function createRouter () {
  return new Router({
    // ...
    routes: [
      // ...
      {
        // ...
        name: MAIN_PAGE.name,
        meta: {
          pageType: PAGE_TYPE.MAIN,
        }
      }
    ]
  })
}

2. Роут имеет несколько возможных типов страницы

В таком случае в meta.pageType нужно передать объект с возможными типами страницы, а в самом компоненте страницы объявить option resolvePageType, который является функцией. Она принимает единственным аргументом объект, указанный в конфигурации роута meta.pageType и должна вернуть строковое значение, которое должно быть установлено в pageType.

// @/router/index.js

const PAGE_TYPE = require('@sm-monobrands/page-type-registry')

export function createRouter () {
  return new Router({
    // ...
    routes: [
      // ...
      {
        // ...
        name: CATALOG_PAGE.name,
        component: () => import(/* webpackChunkName: "pages/catalog" */ '@/pages/catalog-page'),
        meta: {
          pageType: {
            notFound: PAGE_TYPE.ERROR,
            search: PAGE_TYPE.SEARCH_RESULTS,
            catalog: PAGE_TYPE.CATALOG
          }
        }
      }
    ]
  })
}

// @/pages/catalog-page

export default {
  name: 'catalog-page',

  resolvePageType ({ notFound, search, catalog }) {
    if (this.IS_NOT_FOUND_PAGE) {
      return notFound
    }
    if (this.isSearch) {
      return search
    }
    return catalog
  },
  // ...
}

Если тип страницы не был определен ни одним из этих способов, в page.type будет установлена значение по-умолчанию Other

API

setPageType (pageType)

Явно устанавливает тип текущей страницы для последующей отправки событий

getChildrenComponentsResolvedPageType (pageTypeData)

Находит среди дочерних компонентов приложения компонет, у которого есть option-функция resolvePageType, выполняет его и возвращает полученный результат.

sendPageView

Отправляет событие page-view в PersGate. Вызов данного метода не требуется, так как он вызывается автоматически для каждой страницы в хуке роутера afterEach.