Datazoom is a high-availability real-time data collection solution. This document summarizes how to integrate the Brightcove video player with the Datazoom platform. These instructions are specific to the In-Page embed code method outlined here: https://player.support.brightcove.com/publish/choosing-correct-embed-code.html
- 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:
Examples:
Replace the ACCOUNT_ID
with your Brightcove account ID.
Replace the PLAYER_ID
with your Brightcove player ID.
Replace the VIDEO_ID
with your Brightcove videoID.
Use Case 1
While integrating Datazoom on your page, it's necessary to identify the source video player the SDK will interface with. By default the SDK will look for a player instance named dz_brightcove
but this value can be overwritten by calling the dz_setPlayerInstance method. Replace the value any_name
in the sample code below with your unique player instance name that matches how you've identified the player on the page; the Datazoom SDK will collect data from the identified player instance.
<html> <body> <!-- Video Player --> <video-js id='any_name' data-account='ACCOUNT_ID' data-player='PLAYER_ID' data-embed='default' data-application-id='' class='video-js' controls='' width="1920" height="1080"></video-js> <script src='https://players.brightcove.net/ACCOUNT_ID/PLAYER_ID_default/index.min.js'></script> <!-- THIS IS THE DATAZOOM BEACON SCRIPT --> <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=<CONFIG_ID>'></script> <script> bcplayer = videojs("any_name"); if (typeof dz_setPlayerInstance === 'function') { dz_setPlayerInstance(bcplayer); } bcplayer.ready(); bcplayer.catalog.getVideo('VIDEO_ID', function (onerr, vid) { bcplayer.catalog.load(vid); }); </script> </body> </html>
Use Case 2
If you have several players on the page you can dynamically instruct the SDK to switch its focus by calling the dz_setPlayerInstance method. After calling this method again to declare a new player instance, the SDK will begin collecting data from this newly identified player.
<html> <body> <!-- First Video Player --> <video-js id='first_video_player_name' data-account='ACCOUNT_ID' data-player='PLAYER_ID' data-embed='default' data-application-id='' class='video-js' controls='' width="1920" height="1080"></video-js> <script src='https://players.brightcove.net/ACCOUNT_ID/PLAYER_ID_default/index.min.js'></script> <!-- Second Video Player--> <video-js id='any_name' data-account='ACCOUNT_ID' data-player='PLAYER_ID' data-embed='default' data-application-id='' class='video-js' controls='' width="1920" height="1080"></video-js> <script src='https://players.brightcove.net/ACCOUNT_ID/PLAYER_ID_default/index.min.js'></script> <!-- THIS IS THE DATAZOOM BEACON SCRIPT --> <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=<CONFIG_ID>'></script> <script> player1 = videojs("first_video_player_name"); player1.ready(); player1.catalog.getVideo('VIDEO_ID', function (onerr, vid) { player1.catalog.load(vid); }); player2 = videojs("any_name"); player2.ready(); if (typeof dz_setPlayerInstance === 'function') { dz_setPlayerInstance(player2); } player2.catalog.getVideo('VIDEO_ID', function (onerr, vid) { player2.catalog.load(vid); }); </script> </body> </html>
Use Case 3
The Datazoom SDK can be installed on a page without a video player and instructed to collect custom events and metadata from page level events.
<html> <body> <script> var custom = function () { setTimeout(function () { if (typeof generateDatazoomEvent === "function") { setDatazoomMetadata([{ MetadataName1: "MetadataValue1" }, { MetadataName2: "MetadataValue2" }]); generateDatazoomEvent("ButtonPush"); } else { custom(); } }, 50); }; </script> <button onclick="custom()">Click me</button> </body> </html>
Comments
0 comments
Article is closed for comments.