These are the steps to include your customized collection beacon that will connect to the Datazoom cloud SDK from your HLS.js based 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.
Example:
<html> <head> <!-- For updates please visit https://github.com/video-dev/hls.js/** --> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> </head> <body> <div id="player"> <video id="<VIDEO_TAG_ID>" controls preload="auto" poster="YOUR POSTER IMAGE" src="YOUR VIDEO SOURCE" type="application/x-mpegURL"> </video> </div> <script> var video = document.getElementById('<VIDEO_TAG_ID>'); var hls; //Must be declared globally* if(Hls.isSupported()) { hls = new Hls(); hls.loadSource(video.src); hls.attachMedia(video); } </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.