The Datazoom session_id
and the Datazoom sessionViewId
are unique identifiers which allow you to correlate events that are captured from the client video player with events that happen upstream during a playback experience. The Datazoom session_id
is used to identify all events emitted during a user session. The Datazoom sessionViewId
is used to identify events emitted during a specific video view in a user session.
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.