These are the steps to include your customized collection beacon that will connect to the Datazoom cloud SDK from THEOplayer video player:
- Login to Datazoom here: https://app.datazoom.io
- Add a Collector as indicated here: How to add a Collector
- Copy the
Configthat was created at the end of the process
Click the icon indicated below to copy the Configuration Key
You will see this message: - Replace the
<CONFIG_ID>in Datazoom's beacon script with the Key you copied above.
Replace the entire placeholder<CONFIG_ID>including<and>
IMPORTANT :
- Datazoom's beacon script must come after the player load.
- The name of the THEOPlayer instance created should be same as 'app_theoplayer' in order to have the access to the object that was used to create the player for accessing some of the properties of the video being played.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.myth.theoplayer.com/YOUR_LICENSE/ui.css">
<script src="https://cdn.myth.theoplayer.com/YOUR_LICENSE/THEOplayer.js"></script>
</head>
<body>
<div class=" theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls">
<div id="player">
</div>
</div>
<script>
var element = document.querySelector('.theoplayer-container') // fetch THEOplayer container div
var app_theoplayer = new THEOplayer.Player(element, { // instantiates video player
libraryLocation : 'https://cdn.myth.theoplayer.com/YOUR_LICENSE/',// references folder containing your THEOplayer library files (theoplayer.p.js, THEOplayer.js, ...)
ui : {
width: '<WIDTH>',
height: '<HEIGHT>'
}
});
app_theoplayer.source = {
sources : [{
src : '<VIDEO_SRC>',
type : '<VIDEO_TYPE>'
}]
};
</script>
<!-- THIS IS THE DATAZOOM BEACON SCRIPT -->
<script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=<CONFIG ID>'></script>
</body>
</html>
Comments
0 comments
Article is closed for comments.