Shaka player plugin

Introduction

Bradmax analytics supports plugin for Shaka player, which collects playback information and sends it to bradmax platform. Reports about video usage from collected data is presented in bradmax client panel (https://bradmax.com/client/panel/).

Integration of bradmax analytics statistics with Shaka player is quick and easy process. It needs only plugin file and some additional configuration for player. See example below.

Plugin file

Raw JavaScript file: https://bradmax.com/static/bradmax-analytics-for-players/latest/bradmax.analytics.js

Zipped JavaScript file: https://bradmax.com/static/bradmax-analytics-for-players/latest/bradmax.analytics.zip

Minimal example

Initial steps:

  1. Download bradmax.analytics.js plugin file (see above)
  2. Check clientToken in bradmax client panel (https://bradmax.com/client/panel/ > Analytics > Info > clientToken).
  3. Prepare HTML file
<!DOCTYPE html>
<html>
<head>
    <title>Shaka Player / Bradmax analytics</title>

    <!-- Shaka Player JavaScript file -->
    <script src="https://example.com/shaka-player.js"></script>

    <!-- Bradmax analytics JavaScript plugin file -->
    <script src="https://example.com/bradmax.analytics.js"></script>

    <!-- Your application source: -->
    <script>
    function initApp() {
        // Install built-in polyfills to patch browser incompatibilities.
        shaka.polyfill.installAll();

        // Create a Player instance.
        var video = document.getElementById("video");
        var player = new shaka.Player(video);
        var manifestUri = "https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd";

        // Create player plugin.
        var pluginConfig = {
            clientToken: "SJnO!AzdDggLdOyAIdBg5DIjjeIOMAFd9gADV",
            trackEngagementRate: true,
            mediaMetadata: {
                materialId: "703",
                relatedId: "7003",
                duration: 60,
                title: "Star Trek - multi language demo",
                tags: ["test", "entertaiment"]
            }
        };
        var plugin = new bradmax.analytics.Shaka(player, pluginConfig);

        // Try to load a manifest.
        player.load(manifestUri);
    }

    document.addEventListener("DOMContentLoaded", initApp);
    </script>
</head>
<body>
    <h2>Shaka Player / Bradmax analytics</h2>
    <video id="video" width="640" controls></video>
</body>
</html>

Example above will track only general information about playback and only: Audience, Technology and Geo reports will be available.

Tracking video details example

Parameter “mediaMetadata” has to be added into configuration object. See example below. More info about mediaMetadata

var pluginConfig = {
    clientToken: "SJnO!AzdDggLdOyAIdBg5DIjjeIOMAFd9gADV",
    mediaMetadata: {
        materialId: "703",
        relatedId: "7003",
        duration: 60,
        title: "Star Trek - multi language demo",
        tags: ["test", "entertaiment"]
    }
};

Tracking engagement rate example

It is only needed to add parameter

trackEngagementRate: true

into configuration object.

var pluginConfig = {
    clientToken: "SJnO!AzdDggLdOyAIdBg5DIjjeIOMAFd9gADV",
    trackEngagementRate: true,
    mediaMetadata: {
        materialId: "703",
        relatedId: "7003",
        duration: 60,
        title: "Star Trek - multi language demo",
        tags: ["test", "entertaiment"]
    }
};

Tracking realtime statistics example

It is only needed to add parameter

trackRealtimeStats: true

into configuration object.

var pluginConfig = {
    clientToken: "SJnO!AzdDggLdOyAIdBg5DIjjeIOMAFd9gADV",
    trackEngagementRate: true,
    trackRealtimeStats: true,
    mediaMetadata: {
        materialId: "703",
        relatedId: "7003",
        duration: 60,
        title: "Star Trek - multi language demo",
        tags: ["test", "entertaiment"]
    }
};
Jump to