Instrucciones de integración del operador

Tenga en cuenta que los fragmentos de código que se muestran en este artículo están destinados a ser utilizados únicamente con fines de evaluación y prueba. Antes de comenzar, comuníquese con integrations@imgarena.com.

Librería de Integración

La biblioteca de integración de Front Row Seat se distribuye con una compilación de módulo ES y una compilación de UMD. Los siguientes ejemplos usan la sintaxis de UMD para mayor claridad y para mostrar la implementación más simple.

El paquete se distribuye mediante npm, donde están disponibles tanto el módulo ES como las compilaciones UMD: https://www.npmjs.com/package/@img-arena/front-row-seat

La compilación UMD está disponible en unpkg: https://unpkg.com/@img-arena/front-row-seat

Para obtener más información sobre cómo usar unpkg, consulte sus documentos: https://unpkg.com

La integración del Centro de Eventos UFC de IMG Arena en su sitio web se puede lograr mediante los siguientes pasos:

Añada un elemento HTML DOM "container" para el lugar donde debe aparecer el Centro de eventos.
Incluya el script de la biblioteca de integración.
Inicialice la biblioteca de integración.

<!DOCTYPE html>
<html>
  <head>
    <title>IMG Arena Event Centre</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <div id="img-arena-event-centre"></div>
    <script src="https://unpkg.com/@img-arena/front-row-seat"></script>
    <script>
      const { MessageTopics } = frontRowSeat.eventCentreUtils;
      const eventCentreInstance = frontRowSeat.eventCentre({
        operator: "OPERATOR-NAME",
        sport: "ufc",
        targetModule: "full",
        eventId: "EventID",
        version: "version number",
        targetElementSelector: "#img-arena-event-centre",
        language: "en"
      });

      eventCentreInstance.on(MessageTopics.CONTEXT_UPDATE, msg => {
        console.log(msg);
      });

      eventCentreInstance.on(MessageTopics.HANDSHAKE_FAILED, () => {
        console.log("Handshake failed");
      });
    </script>
  </body>
</html>

Elemento de destino

Puede haber ocasiones en las que sea preferible pasar un nodo de elemento en lugar de una cadena para el destino del Centro de Eventos.

La propiedad targetElementSelector puede ser una cadena para la selección de un elemento DOM o un nodo de elemento en sí mismo.

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
});

Autorización

Cada cliente integrado recibe su propia URL única del Centro de Eventos de IMG Arena. Para evitar un posible web scraping, supervisamos con frecuencia el uso no autorizado de esta URL y tenemos la capacidad de cerrar cualquier uso sospechoso.

Inicialización

Para manejar la sincronización del Centro de Eventos UFC con su sitio, hay dos métodos expuestos en el valor de retorno del inicializador eventCentre: on y emit. Ambos métodos siguen el patrón pub/sub para el intercambio de mensajes asincrónicos. El método on es para recibir mensajes del Centro de Eventos, mientras que el método emit es para enviar mensajes al Centro de eventos.

Suscripción

.on(MESSAGE_TOPIC_NAME, (messageData) => {
  // operate on received messageData, see below for returned fields for each topic
})

El método on está disponible en el valor de retorno del inicializador de eventCentre, se utiliza para suscribirse a los mensajes emitidos desde el Centro de Eventos. Los temas de los mensajes admitidos se exponen en el espacio de nombres eventCentreUtils, eventCentreUtils.MessageTopics, y se detallan a continuación. La retrollamada recibe un valor único que es un objeto que contiene los campos respectivos al tema del mensaje al que se suscribió.

Emisión

// See below the fields to include on object passed for each topic
.emit(MESSAGE_TOPIC_NAME, messageData)

El método emit está disponible en el valor de retorno del inicializador de eventCentre Se, se utiliza para enviar mensajes al Centro de Eventos. Solo los temas de mensajes admitidos se pasarán al Centro de eventos.

Idiomas

Como se puede ver en los ejemplos, 'language' (idioma) se puede configurar como una variable. Consulte: Idiomas disponibles

Tema

TElEl tema del Centro de Eventos se puede configurar pasando un valor para el parámetro theme. theme: "dark" mostrará la versión oscura del Centro de Eventos. Tenga en cuenta que , si no pasa el parámetro theme, se mostrará la versión ligera del Centro de Eventos.

Opciones

Algunas opciones adicionales se pueden especificar en el campo options.

Nombre de opción

Descripción

Por defecto

Ejemplo

videoPlaybackEnabled

Permite ver transmisiones cuando

están disponibles

false

"true" o "false"

disablePeopleImages

Deshabilita las imágenes de personas, mostrando marcadores de posición en su lugar

false

"true" o "false"

userId

Utilizado para seguimiento de análisis de Google

undefined

"123e4567"

NextMódulos de Centro de Eventos UFC

Last updated 1 year ago