Datazoom

Collect and Monitor Client-side Analytics with Datazoom

Datazoom enables the capture of streaming quality analytics, measurement of user engagement, tracking of content consumption, and understanding Quality of Experience (QoE) metrics that occur during playback.

This page guides you on some of the metrics that are collected and steps to integrate the Millicast SDK as a collector and connect to observability tools such as Splunk, Datadog, New Relic, Amazon Kinesis Firehose, etc.

Client Analytics

An overview of some of the analytics that will be collected. You can customize dashboards depending on which tool you use. Some examples of the types of data collected:

✓ Playback engagement metrics like startup time, playback rate, pause events, and durations

✓ Device analytics such as user agent, browser, operating system, device size, versions

✓ Geolocation details including country, city, IP address, and network details

✓ WebRTC statistics like fps, round trip time, jitter, packet and frame loss rates, and bitrate

When combined with our Live Monitoring and Stream Syndication capabilities you can effectively monitor playback issues and track viewer characteristics.

Setting Up Datazoom with the Web SDK

This section outlines the steps required to initialize client-side data collection with the Millicast Web SDK. There are also collectors available that will work similarly with Android and iOS.

1. Include Datazoom Beacon

Include the Datazoom library with your configuration id:

<script src="https://platform.datazoom.io/beacon/v1/config?configuration_id=4a1ef...7a"></script>

2. Track Player Engagement

Attaching a context on the player will gather user engagement details like when the stream is paused and how long it took from play to start displaying video.

 millicastView.on("track", (event) => {
   // ...
   window.datazoom.createContext(videoElement);
 });

3. Collect Custom WebRTC Stats

See the Web SDK page to learn more about gathering media statistics about the WebRTC connection. You can set this metadata so that it shows up as custom parameters in the resulting dashboards.

 millicastView.webRTCPeer.initStats();
 millicastView.webRTCPeer.on("stats", (stats) => {
     window.datazoom.setMetadata({ webRTCStats: stats });
 });

This will collect statistics every second. To reduce frequency of collection, you can keep a counter and reduce the number of calls to window.datazoom.setMetadata.

// Only store metrics every 60 seconds
const statCollectionInterval = 60;

let statsTicker = 0;
millicastView.webRTCPeer.on("stats", (stats) => {
    if (statsTicker >= statCollectionInterval) {
       window.datazoom.setMetadata({ webRTCStats: stats });
       statsTicker = 0;
    } else { 
       statsTicker++;
    }
});

4. Monitor with a Datazoom Connector

Datazoom provides connectors on their platform that can be used to aggregate client metrics in your observability and monitoring tools.

Splunk

Here is a preview of what a dashboard might look like in Splunk:

Datadog

Here is a preview of what a dashboard might look like in Datadog:

Sample

Here is an example payload from the Datazoom connector:

[
    {
        "event": {
            "metrics": {
                "engagement_duration_ms": 11653618,
                "num_ad_plays": 0,
                "num_content_plays": 23,
                "num_errors": 0,
                "num_errors_ads": 0,
                "num_errors_content": 0,
                "num_requests_content": 23,
                "bandwidth_kbps": 4200,
                "buffer_duration_ms": 0,
                "buffer_duration_ads_ms": 0,
                "buffer_duration_content_ms": 0,
                "buffer_length_ms": 0,
                "content_session_start_ts_ms": 1712167309643,
                "pause_duration_ms": 0,
                "pause_duration_ads_ms": 0,
                "pause_duration_content_ms": 0,
                "playback_duration_ms": 2640,
                "playback_duration_ads_ms": 0,
                "playback_duration_content_ms": 2640,
                "playback_rate": 1,
                "player_state": "playing",
                "player_viewable": true,
                "player_viewable_percent": 100,
                "playhead_position_sec": 2.686,
                "rendition_height": 1080,
                "rendition_name": "1080p",
                "rendition_width": 1920,
                "stall_count": 0,
                "stall_count_ads": 0,
                "stall_count_content": 0,
                "stall_duration_ms": 0,
                "stall_duration_ads_ms": 0,
                "stall_duration_content_ms": 0,
                "time_since_last_ad_break_start_ms": 0,
                "time_since_last_ad_completed_ms": 0,
                "time_since_last_buffer_start_ms": 2640,
                "time_since_last_buffer_start_ad_ms": 0,
                "time_since_last_buffer_start_content_ms": 2640,
                "time_since_last_heartbeat_ms": 0,
                "time_since_last_milestone_ad_ms": 0,
                "time_since_last_milestone_content_ms": 0,
                "time_since_last_pause_ms": 0,
                "time_since_last_rendition_change_ms": 600,
                "time_since_last_request_ad_ms": 0,
                "time_since_last_seek_start_ms": 0,
                "time_since_last_stall_start_ms": 0,
                "time_since_last_stall_start_ad_ms": 0,
                "time_since_last_stall_start_content_ms": 0,
                "time_since_last_started_ad_ms": 0,
                "time_since_request_content_ms": 2641,
                "time_since_started_content_ms": 2640,
                "volume_level_percent": 100,
                "event_count": 591
            },
            "attributes": {
                "abs_shift": "up"
            },
            "type": "rendition_change",
            "timestamp": 1712167312284
        },
        "configuration_id": "4a3...a",
        "connector_list": "dz-connector-splunk,dz-connector-kinesis-firehose,dz-connector-datadog",
        "customer_code": "486...f",
        "user_details": {
            "app_session_id": "a9c...2",
            "app_session_start_ts_ms": 1712155658666,
            "client_ip": "128.n.n.0",
            "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36",
            "content_session_id": "c12...2"
        },
        "player": {
            "player_name": "HTML5 Native Player",
            "autostart": true,
            "default_muted": true,
            "default_playback_rate": 1,
            "fullscreen": false,
            "loop": false,
            "muted": true,
            "preload": "none",
            "ready_state": 4,
            "streaming_protocol": ""
        },
        "device": {
            "browser_name": "Chrome",
            "browser_height": 1334,
            "browser_version": "123.0.0.0",
            "browser_width": 1904,
            "cookies_enabled": true,
            "device_id": "bc6...3",
            "device_type": "pc",
            "os_name": "Mac OS X",
            "os_version": "10.15.7"
        },
        "geo_location": {
            "city": "London",
            "country": "United Kingdom",
            "country_code": "GB",
            "latitude": 51.5074,
            "longitude": -0.1196,
            "postal_code": "EC1N",
            "region": "England",
            "region_code": "ENG",
            "continent": "Europe",
            "continent_code": "EU",
            "district": "",
            "timezone_name": "Europe/London",
            "timezone_offset": 1
        },
        "ops_metadata": {
            "server_ts_offset_ms": 208,
            "player_context_id": "360...2",
            "collector_observability": [
                {
                    "time": 1712167311684,
                    "metric_name": "process_duration_ms",
                    "dimension": {
                        "target": "log",
                        "attempt_count": 1,
                        "status_code": 200
                    },
                    "metric_value": 171
                },
                {
                    "time": 1712167311684,
                    "metric_name": "queue_duration_ms",
                    "dimension": {
                        "target": "log"
                    },
                    "metric_value": 56
                },
                {
                    "time": 1712167311740,
                    "metric_name": "send_duration_ms",
                    "dimension": {
                        "target": "log",
                        "attempt_count": 1,
                        "status_code": 200
                    },
                    "metric_value": 115
                },
                {
                    "time": 1712167311740,
                    "metric_name": "call_duration_ms",
                    "dimension": {
                        "target": "log",
                        "attempt": 1,
                        "status_code": 200
                    },
                    "metric_value": 115
                }
            ]
        },
        "ad": {
            "ad_blocker": false
        },
        "video": {
            "media_type": "content",
            "player_height": 360,
            "player_width": 640,
            "source": ""
        },
        "custom": {
            "webRTCStats": {
                "audio": {
                    "inbounds": [
                        {
                            "mimeType": "audio/opus",
                            "timestamp": 1712167311343.687,
                            "totalBytesReceived": 23460,
                            "totalPacketsReceived": 94,
                            "totalPacketsLost": 0,
                            "jitter": 0.004,
                            "id": "IT0...2",
                            "mid": "1",
                            "trackIdentifier": "ad9...a",
                            "bitrate": 100952,
                            "packetsLostRatioPerSecond": 0,
                            "packetsLostDeltaPerSecond": 0
                        }
                    ],
                    "outbounds": []
                },
                "video": {
                    "inbounds": [
                        {
                            "mimeType": "video/H264",
                            "framesPerSecond": 20,
                            "frameHeight": 540,
                            "frameWidth": 960,
                            "timestamp": 1712167311343.687,
                            "totalBytesReceived": 256532,
                            "totalPacketsReceived": 1057,
                            "totalPacketsLost": 0,
                            "jitter": 0.003,
                            "id": "IT0...8",
                            "mid": "0",
                            "trackIdentifier": "dd8...4",
                            "bitrate": 1244344,
                            "packetsLostRatioPerSecond": 0,
                            "packetsLostDeltaPerSecond": 0
                        }
                    ],
                    "outbounds": []
                },
                "raw": {},
                "totalRoundTripTime": 0.031,
                "currentRoundTripTime": 0.005,
                "availableOutgoingBitrate": 300000,
                "candidateType": "prflx"
            }
        },
        "event_id": "a9c...0"
    }
]