JW Player

These are the steps to include your customized collection beacon that will connect to the Datazoom cloud SDK from your JW Player 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>
    <script src='https://content.jwplatform.com/libraries/<YOUR_LIBRARY>.js'></script>
</head>
 
<body>
    <!-- THIS IS THE DATAZOOM SDK SCRIPT -->
    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=<config_ID>'></script>
 
    <!-- THE VIDEO PLAYER -->
    <div class="video_hidden">
        <div class="vid-container" id="jw_player_id" style="width:500px; height:500px">
            <div id="myplayer"></div>
        </div>
        <script>
 
            var config = {
                file: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
                image: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Big_Buck_Bunny_thumbnail_vlc.png/320px-Big_Buck_Bunny_thumbnail_vlc.png",
                title: "BigBuckBunny-mp4® Product Video"
            };
 
            var myplayer = jwplayer('myplayer').setup(config);
            if (typeof dz_setPlayerInstance === 'function') {
                dz_setPlayerInstance(myplayer)
            }
 
        </script>
</body>
 
</html>

Articles in this section

Comments

Articles in this section

Related articles