Reliable Client Side Beacons
PRESTOads and the integration with PRESTOplay enabled reliable user specific client side tracking. The OMID certified integration of OM-SDK enabled viewability measurements that are not possible with server side events only.
The Demo
In this demo we show three distinct users playing the same content. While the content is the same for all users, the HLS-Interstitials inserted into the stream are personalized based on the user ID.
Once Ad Playback starts, PRESTOads start tracking all ad related events and reports them to a custom backend. On arrival, the backend forwards the received events to the table shown here.
-
PRESTOplay
-
Shaka Player -
hls.js
-
dash.js
-
PRESTOplay
- ExoPlayer
-
PRESTOplay
- AVPlayer
- SVTA ad creative signaling
- MediaTailor AWS beaconing
Integration
PRESTOplay resolves the interstitials itself; the adapter maps each one onto an ad break.
import { clpp } from '@castlabs/prestoplay'
import { activate, PAAdSessionManager, PAPluginRegistry } from '@castlabs/prestoads'
import { PASvtaPlugin } from '@castlabs/prestoads-svta-plugin'
import { PAPrestoPlayerPlugin } from '@castlabs/prestoads-prestoplay-plugin'
// Register the plugins once, then activate PRESTOads
const registry = PAPluginRegistry.getInstance()
registry.register(new PASvtaPlugin())
registry.register(new PAPrestoPlayerPlugin())
await activate({ license: LICENSE })
// Adapt the player before it loads content
const player = new clpp.Player(video)
const ads = new PAAdSessionManager(registry.createPlayer(player), {
contentUrl: location.href,
})
await player.load({ source: MANIFEST_URL }) Shaka plays the interstitials in its own ad manager; PRESTOads takes over the beacons.
import shaka from 'shaka-player'
import { activate, PAAdSessionManager, PAPluginRegistry } from '@castlabs/prestoads'
import { PASvtaPlugin } from '@castlabs/prestoads-svta-plugin'
import { PAShakaPlugin } from '@castlabs/prestoads-shaka-plugin'
// Register the plugins once, then activate PRESTOads
const registry = PAPluginRegistry.getInstance()
registry.register(new PASvtaPlugin())
registry.register(new PAShakaPlugin())
await activate({ license: LICENSE })
// Attach, leave the beacons to PRESTOads, adapt before loading
const player = new shaka.Player()
await player.attach(video)
player.configure({ ads: { disableTrackingEvents: true } })
const ads = new PAAdSessionManager(registry.createPlayer(player), {
contentUrl: location.href,
})
await player.load(MANIFEST_URL) hls.js plays the interstitials on the same media element; the adapter follows its events.
import Hls from 'hls.js'
import { activate, PAAdSessionManager, PAPluginRegistry } from '@castlabs/prestoads'
import { PASvtaPlugin } from '@castlabs/prestoads-svta-plugin'
import { PAHlsJsPlugin } from '@castlabs/prestoads-hlsjs-plugin'
// Register the plugins once, then activate PRESTOads
const registry = PAPluginRegistry.getInstance()
registry.register(new PASvtaPlugin())
registry.register(new PAHlsJsPlugin())
await activate({ license: LICENSE })
// Attach first: the adapter reads the media element off the player
const hls = new Hls()
hls.attachMedia(video)
const ads = new PAAdSessionManager(registry.createPlayer(hls), {
contentUrl: location.href,
})
hls.loadSource(MANIFEST_URL)