Datazoom is a high-availability real-time data collection solution. This document summarizes how to integrate the HTML5 video element with the Datazoom platform.
Login to Datazoom here: https://app.datazoom.io
Add a Collector as indicated here: How to add a Collector
Copy the CONFIG ID to be used in the subsequent steps
Plugin Integration
Datazoom provides plugins for data collection through our Beacon Services.
<script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>
Insert this JS line into your HTML
Replace the
CONFIG_IDvalue with the collector configuration ID.
This inserts Datazoom's data collection SDK into the page.
Activate Data Collection for an HTML5 Player
To activate data collection for HTML5 instance, create a Datazoom context which references the player instance with the following snippet:
datazoom_context = datazoom.createContext(html5_player);
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- THE DATAZOOM BEACON SCRIPT -->
<script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>
</head>
<body>
<div style="position:relative;width:640px;height:360px">
<video id="video" style="position:absolute;top:0;left:0;width:100%;height:100%" controls></video>
</div>
<script>
var html5_player;
html5_player = document.getElementById("video");
html5_player.src = "https://storage.googleapis.com/interactive-media-ads/media/android.mp4";
var datazoom_context = datazoom.createContext(html5_player);
</script>
</body>
</html>
Comments
0 comments
Article is closed for comments.