Brightcove Player

These are the steps to include your customized collection beacon that will connect to the Datazoom cloud SDK from the Brightcove video player. 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:

Datazoom's SDK script must be placed before the player load.

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 isntance, 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>

Articles in this section

Comments

Articles in this section

Related articles