The Datazoom session_id is the unique identifier that allows you to correlate events that are captured from the client video player with events that happen upstream during a playback experience. The examples below demonstrate how you can set a custom request header to include the Datazoom session_id in content requests. That session_id can then be logged by, for example, the CDN fulfilling the content request. Once logged, you can use the session_id as the key that aligns client-side data captured by Datazoom with related data from the CDN for a viewer. It is then possible to visualize the data from these two sources in an analytics tool.
Setting a custom header for Bitmovin
<YOUR_KEY> = your Bitmovin account key<VIDEO_SRC> = the URL to your video<config_ID> = the Datazoom Collector configuration ID for your player
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://bitmovin-a.akamaihd.net/bitmovin-player/stable/7.5/bitmovinplayer.js"></script>
</head>
<body>
<div id="player"></div>
<script type="text/javascript">
var player = bitmovin.player("player");
var conf = {
key: "<YOUR_KEY>",
source: {
hls: '<VIDEO_SRC>',
},
<!-- CUSTOM REQUEST HEADER ITEM -->
network: {
preprocessHttpRequest: function(requestType, requestConfig) {
if (requestType === bitmovin.player.network.REQUEST_TYPE.MEDIA_VIDEO) {
requestConfig.headers.push({
name: "datazoom-id",
value: session_id
});
return requestConfig;
}
}
}
};
player.setup(conf).then(function(playerInstance) {
console.log("Successfully created Bitmovin player instance", playerInstance);
}, function(reason) {
console.log("Error while creating Bitmovin player instance", reason);
});
</script>
<!-- THIS IS THE DATAZOOM BEACON SCRIPT -->
<script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=<config_ID>'></script>
</body>
</html>
Setting a custom header for Clappr
<VIDEO_SRC> = the URL to your video<config_ID> = the Datazoom Collector configuration ID for your player.
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
</head>
<body>
<div id="player"></div>
<script>
var player = new Clappr.Player({
source: "<VIDEO_SRC>",
parentId: "#player",
<!-- CUSTOM REQUEST HEADER ITEM -->
hlsjsConfig: {
xhrSetup: (xhr, url) => {
xhr.setRequestHeader("datazoom-id", session_id);
}
}
});
</script>
<!-- THIS IS THE DATAZOOM BEACON SCRIPT -->
<script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=<config_ID>'></script>
</body>
</html>
Setting a custom header for hls.js
<VIDEO_SRC> = the URL to your video<config_ID> = the Datazoom Collector configuration ID for your player.
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
<center>
<video width="1280" height="720" id="video" controls muted></video>
</center>
<script>
if (Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls({
<!-- CUSTOM REQUEST HEADER ITEM -->
xhrSetup: (xhr, url) => {
xhr.setRequestHeader("datazoom-id", session_id);
}
});
hls.loadSource('<VIDEO_SRC>');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = '<VIDEO_SRC>';
video.addEventListener('canplay', function() {
video.play();
});
}
</script>
<!-- THIS IS THE DATAZOOM BEACON SCRIPT -->
<script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=<config_ID>'></script>
</body>
</html>
Setting a custom header for JW Player
Note: This example only works in Chrome.
<YOUR_LIBRARY> = the library associated with your JW Player account<VIDEO_SRC> = the URL to your video<config_ID> = the Datazoom Collector configuration ID for your player.
<html>
<body>
<script src='https://cdn.jwplayer.com/libraries/<YOUR_LIBRARY>.js'></script>
<div id='player'></div>
<script type='text/javascript'>
jwplayer('player').setup({
playlist: [{
sources: [{
file: '<VIDEO_SRC>',
<!-- CUSTOM REQUEST HEADER ITEM -->
onXhrOpen: function(xhr, url) {
xhr.setRequestHeader('datazoom-id', session_id);
}
}]
}]
})
</script>
<!-- THIS IS THE DATAZOOM BEACON SCRIPT -->
<script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=<config_ID>'></script>
</body>
</html>
Setting a custom header for video.js
Note: This example only works in Chrome.<VIDEO_SRC> = the URL to your video<config_ID> = the Datazoom Collector configuration ID for your player.
<html>
<head>
<meta charset="utf-8">
<link href="https://vjs.zencdn.net/7.6.0/video-js.css" rel="stylesheet">
</head>
<body>
<video id=vid width=960 height=540 class="video-js" controls></video>
<script src='https://vjs.zencdn.net/7.6.0/video.js'></script>
<script type="text/javascript">
<!-- CUSTOM REQUEST HEADER ITEM -->
videojs.Hls.xhr.beforeRequest = function(options) {
options.headers = {
datazoom-id: session_id
}
return options
}
var vid = document.getElementById('vid');
var player = videojs('vid');
player.ready(function() {
this.src({
src: '<VIDEO_SRC>',
type: 'application/x-mpegURL',
});
player.play();
});
</script>
<!-- THIS IS THE DATAZOOM BEACON SCRIPT -->
<script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=<config_ID>'></script>
</body>
</html>
Comments
0 comments
Article is closed for comments.