# Инструкция по интеграции оператора {% hint style="info" %} Обратите внимание на то, что отображаемые в данной статье фрагменты кода предназначены для использования исключительно для целей оценки и тестирования. Прежде чем включиться в процесс, напишите по адресу: . {% endhint %} ## Библиотека процесса интеграции Библиотека процесса интеграции в формате Front Row Seat распространяется со сборкой в виде модуля ES и сборкой UMD. В приведенных ниже примерах для ясности и демонстрации простейших вариантов реализации используется синтаксис UMD. Пакет распространяется с помощью npm, в котором доступны как сборка в виде модуля ES, так и сборка UMD: Сборка UMD доступна на unpkg: Подробнее о том, как использовать unpkg, см. в их документации: [https://unpkg.com](https://unpkg.com/) ## Порядок действий Чтобы интегрировать Центр мероприятий Абсолютного бойцовского чемпионата (UFC) IMG Arena в свой веб-сайт, вам нужно выполнить следующие действия: 1. Добавить «***контейнерный***» HTML DOM элемент туда, где должна отображаться информация о данном Центре мероприятий. 2. Включить в него сценарий библиотеки процесса интеграции. 3. Инициализировать библиотеку процесса интеграции. ```javascript IMG Arena Event Centre
``` ### Целевой элемент Могут быть случаи, когда для целевого пункта назначения центра мероприятий предпочтительнее будет вместо строки передать узел элемента. Свойством `targetElementSelector` может выступать либо строка выбора DOM-элемента, либо сам узел элемента. ```javascript const targetElement = document.querySelector('#img-arena-event-centre'); const eventCentreInstance = frontRowSeat.eventCentre({ operator: "[OPERATOR-NAME]", sport: "ufc", version: "latest", eventId: "705", language: "en", targetModule: "full", targetElementSelector: targetElement }); ``` ## Авторизация Каждый интегрированный клиент получает собственный уникальный URL-адрес Центра мероприятий IMG Arena. В целях предотвращения потенциального веб-скрапинга мы нередко отслеживаем несанкционированное использование этого URL-адреса и можем заблокировать любое подозрительное использование. ## Инициализация Для выполнения синхронизации Центра мероприятий UFC с вашим сайтом есть два метода, зависящие от возвращаемого значения инициализатора `eventCentre`: `on` и `emit`. При асинхронном обмене сообщениями оба эти метода действуют по шаблону pub/sub. Метод `on` предназначен для получения сообщений из Центра мероприятий, тогда как метод `emit` предназначен для отправки сообщений в Центр мероприятий. ## Подписка ```javascript .on(MESSAGE_TOPIC_NAME, (messageData) => { // operate on received messageData, see below for returned fields for each topic }) ``` Метод `on` доступен для возвращаемого значения инициализатора `eventCentre`. Применяется он для оформления подписки на сообщения, отправляемые из Центра мероприятий. Поддерживаемые темы сообщений зависят от области имен `eventCentreUtils`, `eventCentreUtils.MessageTopics`, и подробно описаны ниже. С обратным вызовов поступает единственное значение, представляющее собой объект, содержащий в себе соответствующие поля для темы сообщений, на которую оформлена подписка. ## Генерирование ```javascript // See below the fields to include on object passed for each topic .emit(MESSAGE_TOPIC_NAME, messageData) ``` Метод `emit` доступен для возвращаемого значения инициализатора `eventCentre`. Применяется он для отправки сообщений в Центр мероприятий. Передаваться в Центр мероприятий будут только сообщения на поддерживаемые темы. ## Языки Как видно из примеров, параметр «язык» задается как переменная. См.: [language-translations-available](https://docs.sportradar.com/ufc-5.0/ufc-5.0-russian/language-translations-available "mention") ## Тематика Тематика центра мероприятий можно настроить путем передач значения параметра `theme`. `theme: "dark"` активирует отображение темной версии центра мероприятий. Обратите внимание на тот факт, что, если параметр `theme` вы не передадите, отображаться будет светлая версия центра мероприятий. {% embed url="" %} ## **Параметры** В поле `options` могут быть заданы некоторые дополнительные параметры.
| Имя параметра | Описание | По умолчанию | Пример | | ---------------------- | ------------------------------------------------------------- | ------------ | --------------- | | `videoPlaybackEnabled` | Позволяет просматривать трансляции по мере их доступности | false | true либо false | | `disablePeopleImages` | Отключает изображения людей, показывая вместо них заполнители | false | true либо false | | `userId` | Используется для отслеживания средствами Google Analytics | undefined | "123e4567" |