Working with Page Events

In this topic, you will learn how to listen and work with page events when using a custom plugin for your Brightcove Beacon web apps.

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
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

Before Beacon page load
Before Beacon page load

onBeaconPageLoad

On Beacon page load
On Beacon page load

loadedBeaconVideoMetadata

Loaded Beacon page load
Loaded Beacon page load

onBeaconPageChange

Beacon page change
Beacon page change

onBeaconPageUnload

Beacon page unloaded
Beacon page unloaded

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