Context Driven Markets Display

Please note that the code snippets displayed in this article are intended to be used for assessment and testing purposes only. Prior to going live, please reach out to integrations@imgarena.com.

Context Driven Markets

The Event Centre supports being initialised with a specific UI state. This is achieved by passing in a "Context Update" message object, detailed below, when initialising the Event Centre. These can include specific tournaments, rounds, players etc.

View

Required initial context fields

Optional initial context fields

leaderboard

view

player-detail-hole

view, teamNo

roundNo, holeNo

player-detail-scorecard

view, teamNo

roundNo

player-detail-shots

view, teamNo

roundNo

playoff-detail-hole

view, groupId

roundNo, holeNo°

playoff-detail-shots

view, groupId

roundNo, holeNo°

groups

view

GroupDetail

view, groupNo, roundNo

holeNo

group-detail-hole

view, groupId

roundNo, holeNo

group-detail-scorecard

view, groupId

roundNo, holeNo

group-detail-shots

view, groupId

roundNo, holeNo

course

view

course-live-streams

view, holeNo

course-detail-hole

view, holeNo

course-detail-scorecard

view, holeNo

courseId

course-detail-shots

view, holeNo

courseId

In the example below, the event centre is sending context updates to the console with different views such as Leaderboard, Groups, Course as the user navigates through.

In the example below, if a user navigates to a particular hole or group, the event centre sends the relevant data to the console contain group id's, group no's, hole no's etc.

The golf odds feed is integrated with IMG data feed, therefore, the same information can be found within the meta data field.

{
  "mode": "push",
  "type": "market",
  "publish_time": "2023-03-30 09:29:26.941665",
  "msg": {
    "id": "golf_18119_oneball_hole|golfer_ids=100|hole_num=15|round_num=3",
    "name": "Hole Score (Round 3, Hole 15) - Padraig Harrington",
    "event_id": "ev.golf_18119",
    "tags": [
      "sp.golf",
      "comp.golf_603974",
      "ev.golf_18119",
      "mt.oneball_hole"
    ],
    "start_time": null,
    "stage": "pre_play",
    "numwinners": 1,
    "meta": {
      "event_id": "1479",
      "round_num": 3,
      "hole_num": 15,
      "golfer_id": 53,
      "group_id": 8
    }
  }
}

Golf Match Play (covers Ryder Cup) Views

View

Fields

Optional Fields

match-play-list

tournament, view

match-play-detail-hole

tournament, view, matchNo

holeNo

match-play-detail-scorecard

tournament, view, matchNo

holeNo

match-play-detail-shots

tournament, view, matchNo

holeNo

match-play-streaming

tournament, view

match-play-streaming-hole

tournament, view, holeNo

° For playoff views the holeNo field MUST take it's value from the holeOrder field from DDE feeds

The following are examples of these message objects and their corresponding UI states:

Full Event Centre with Event ID 207

const eventCentreInstance = frontRowSeat.eventCentre({
  operator: '[OPERATOR-NAME]',
  sport: 'golf',
  eventId: '275',
  targetModule: 'full',
  version: 'latest',
  language: 'en',
  targetElementSelector: '#img-arena-event-centre',
});

A Group Detail Page, with Event Id 207, Round Number 1, Group Number 19. Hole Number is optional.

const eventCentreInstance = frontRowSeat.eventCentre({
  operator: '[OPERATOR-NAME]',
  sport: 'golf',
  eventId: '275',
  targetModule: 'full',
  version: 'latest',
  language: 'en',
  targetElementSelector: '#img-arena-event-centre',
  initialContext: {
    view: 'group-detail-hole',
    roundNo: '4',
    groupId: '75737',
    holeNo: '9'
  }
});

Hole view for Hole 12. Very useful for directing a user to a specific hole which has Par 3 streaming.

const { EventCentreModules } = frontRowSeat.eventCentreUtils;
const eventCentreInstance = frontRowSeat.eventCentre({
  operator: '[OPERATOR-NAME]',
  sport: 'golf',
  eventId: '275',
  targetModule: 'full',
  version: 'latest',
  language: 'en',
  targetElementSelector: '#img-arena-event-centre',
  initialContext: {
    view: 'course-detail-hole',
    holeNo: '12'
  }
  targetElementSelector: '#img-arena-event-centre'
});

Subscribing

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

The on method is available on the return value from the eventCentre initialiser, it is used to subscribe to messages emitted from the Event Centre. The supported message topics are exposed on the eventCentreUtils namespace, eventCentreUtils.MessageTopics, and are detailed below. The callback receives a single value which is an object containing the respective fields to the message topic subscribed to.

Emitting

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

The emit method is available on the return value from the eventCentre initialiser, it is used to send message to the Event Centre. Only supported message topics will be passed to the Event Centre.

Emitting context updates to synchronize the event centre

The event centre emits context updates whenever the webpage navigates to a new route. These context updates can be used to keep track of what users are doing in the event centre. For example, these events can be used to display appropriate markets when a user navigates to a certain player, hole or group.

The other scenario is that a user is navigating on your webpage, and you would like to synchronize the event centre to display similar contextual data. In this case it is possible to emit context updates to the event centre. These updates will allow you to control what page/view the event centre is displaying.

Note: These updates will not re-create the event centre therefore it is not possible to change things like the tournamentId or the theme.

The list of possible views and their required fields that can passed into the CONTEXT_UPDATE topic is covered above in the Golf Views section.

Note: The values that are passed for initialContext when creating the eventCentreInstance can also be used as data for context updates.

See below a few examples:

Navigate to groups list

eventCentreInstance.emit(
  frontRowSeat.eventCentreUtils.MessageTopics.CONTEXT_UPDATE,
  { view: "groups" }
);

Navigate to a player

eventCentreInstance.emit(
  frontRowSeat.eventCentreUtils.MessageTopics.CONTEXT_UPDATE,
  {
    view: "player-detail-hole",
    teamNo: "4", // replace with desired teamNo
  }
);

Navigate to a group's shots view

eventCentreInstance.emit(
  frontRowSeat.eventCentreUtils.MessageTopics.CONTEXT_UPDATE,
  {
    view: "group-detail-shots",
    groupId: "464838", // replace with desired groupId
  }
);

Message Topics

All the tables below detail the data fields present in the message data objects that are sent and received for each message topic.

Handshake Failed `MessageTopics.HANDSHAKE_FAILED`

Dedicated topic to signify the handshake between Event Centre and your site failed to complete. This topic is emitted by the integration library, it should only be subscribed to, not emitted.

Field

Type

Description

Required

timestamp

number

unix timestamp from time of failure

✅

Context Update `MessageTopics.CONTEXT_UPDATE`

Topic for covering general UI state updates, for example navigation changes or the user selecting a player in the UI.

Field

Type

Description

Required

view

string

The name of the active view

✅

tournamentId

number or string

Identifier for the tournament

✅

roundNo

number or string

The round the user is currently viewing data from

holeNo

number or string

The hole the user is currently viewing data from

playerNo

number or string

The player's ID

groupNo

number or string

The group's ID

From iframe to parent message. List of possible events:

View

Component

Action

Sending parameters

Leaderboard

onLoad

view

tournamentId

roundNo

Group List

GroupList

onLoad

view

onRoundChange

tournamentId

roundNo

Course

onLoad

view

tournamentId

roundNo

onRoundChange

view

tournamentId

roundNo

holeNo

All Bets

AllBets

onLoad

view

tournamentId

roundNo

Group Detail

GroupDetail

onLoad

view

onTeamChange

tournamentId

onHoleChange

roundNo

holeNo

groupNo

playerNo

Hole

onLoad

view

onGroupChange

tournamentId

onTeamChange

roundNo

onHoleChange

holeNo

groupNo

playerNo

Player

Team

onLoad

view

onRoundChange

tournamentId

onHoleChange

roundNo

holeNo

playerNo

Selection Updates `MessageTopics.SELECTION_UPDATE`

Dedicated topic for handling user selection updates. The selected field within the message data handles both selecting and deselecting updates.

Field

Type

Description

Required

marketId

number or string

supplied by Mustard

✅

betId

number or string

supplied by Mustard

✅

selected

boolean

whether or not the UI state should display as selected

✅

PreviousLive Automated Commentary NextVideo Stream Authentication

Last updated 8 months ago