Skip to main content

Getting started with OptiView Ads on React Native

This guide will get you started with OptiView Ads in your THEOplayer React Native SDK: configure the license, update dependencies and set the source description.

Prerequisites​

  1. You need to have a THEOplayer license which is compatible with OptiView Ads. This can be done through the player portal.

  2. You need a working OptiView Ads signaling service.

  3. Enable the OptiView Ads integration based on the target platform:

    The Android SDK is modular-based, so to enable OptiView Ads, simply include the extension by setting this flag in your gradle.properties:

    # Enable THEOplayer Extensions (default: disabled)
    THEOplayer_extensionTHEOads = true

Integration​

This guide assumes you know how to set up React Native with THEOplayer. For more information regarding this check out the THEOplayer getting started.

Player configuration​

To make use of the OptiView Ads integration, only a specific source needs to be set:

player.source = {
  sources: {
    src: 'PATH-TO-SIGNALING-SERVER/hls/MANIFEST-URI',
    type: 'application/x-mpegurl',
    hlsDateRange: true,
  },
  ads: [
    {
      integration: 'theoads',
      networkCode: 'NETWORK-CODE',
      customAssetKey: 'CUSTOM-ASSET-KEY',
      backdropDoubleBox: 'PATH-TO-DOUBLE-BOX-BACKDROP-IMAGE', // Optional
      backdropLShape: 'PATH-TO-L-SHAPE-BACKDROP-IMAGE', // Optional
    },
  ],
};
  • Notice that the src is different as usual. For OptiView Ads, a signaling server needs to be set up which acts as a proxy to parse the given manifest and insert the ad interstitials. More information can be found here.
  • The hlsDateRange flag needs to be set to true as the ad markers are done using EXT-X-DATERANGE tags.
  • The ads object needs to have its integration set to theoads. Furthermore, the networkCode and customAssetKey needs to be set according to your configured Google account.

More information​