Working with Page Events

Introduction

The Beacon web apps allow you to add some of your own customizations. For example, you can create a JavaScript plugin to listen for web page events and process custom code based on your requirements. For details, see the OTT Plugins documents.

Beacon page events are triggered by user interactions with the Beacon app. This diagram shows the relationship between the user, your Beacon web app and your plugin code.

Beacon page events

Use cases

Here are some use cases when listening to page events:

onBeaconPageLoad - When this event is triggered, you can add custom buttons, populate custom sections, and create custom pages for your Beacon web app
loadedBeaconVideoMetadata - When this event is triggered, you can display data for the current video in your Beacon web app

Event listeners

The following page events can be listened for by your OTT plugin code:

Event	Description
`beforeBeaconPageLoad`	Called before the page starts to load all of the required elements. This includes the API calls to fetch asset and playlist details
`onBeaconPageLoad`	Called when all of the required elements to render the page are available and all checks are complete (entitlements, episodes list, etc)
`onBeaconPageChange`	Called when there is a change on the Beacon web app page. For example, when you are watching a video on the details page, and select a new series, season or episode. For the Live TV page, it is also called when the selected linear channel changes.
`loadedBeaconVideoMetadata`	Called when the metadata for the current video has been loaded
`onBeaconPageUnload`	Called after the `destroy()` from the superclass finishes

Event data

When listening to page events, you can display the event data which is available for use in your custom code.

Data element	Type	Description
`page_type`	enum	A unique page type for the current page being viewed. Values: `about` `bookmarks` `change_language` `custom_screen` `details` `device_management` `edit_profile` `epg` `favorites` `landing_page` `live_event_details` `live_event_player` `livetv` `manage_subscriptions` `my_account` `parental_controls` `payments` `player_live` `playlist_view_all` `player_vod` `profiles_list` `purchased` `screen` `search` `settings` `static_page` `transactions`
`slug`	string	A unique id for your custom page
`asset_id`	integer	Sent in the event object for these pages: `details` `player_vod` `player_live`
`playlist_id`	integer	Sent in the event object for the `playlist_view_all` page
`page_id`	integer	Sent in the event object for the `home` page
`bc_account_id`	integer	Sent in the `loadedBeaconVideoMetadata` event
`device`	string	`'web'`
`video_id`	integer	Sent in the `loadedBeaconVideoMetadata` event
`user_language`	string	The language code for the current language from the Beacon API
`entitlements`	boolean	Displays whether the content is free or if the user is entitled to see the content

Examples

Here are some examples of actual page event data:

`beforeBeaconPageLoad`

`onBeaconPageLoad`

`loadedBeaconVideoMetadata`

`onBeaconPageChange`

`onBeaconPageUnload`

Module implementation

The following shows how to listen to Beacon web page events. For some customization examples, see the OTT Plugins documents.

While our examples use JavaScript modules, you may implement your JavaScript in the manner of your choice. Further details on this module implementation can be found in the Implementing OTT Plugin Code Using Modules document.

`index.js`

Here is our example code:

window.addEventListener("message", (event) => {
  const originsAllowed = [
    'your Beacon app URL'
  ];
  if (originsAllowed.includes(event.origin)) {

    switch (event.data.event) {
      case 'beforeBeaconPageLoad':
        console.log('beforeBeaconPageLoad Event data: ', event.data.data);
        break;

      case 'onBeaconPageLoad':
        console.log('onBeaconPageLoad Event data: ', event.data.data);
        break;   
        
      case 'loadedBeaconVideoMetadata':
        console.log('loadedBeaconVideoMetadata Event data: ', event.data.data);
      break;

      case 'onBeaconPageChange':
        console.log('onBeaconPageChange Event data: ', event.data.data);
      break;

      case 'onBeaconPageUnload':
        console.log('onBeaconPageUnload Event data: ', event.data.data);
      break;
    }
  }
},
false
);