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
Config
that 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.