Note: We'd recommend sending this page to your developer.
Once you've embedded a Vudoo video on your website, your development team might want to track specific events fired within the Vudoo player (such as clicks, pauses, and overlay launches).
We've built a Vudoo javascript API for the embedded iframe, so you can see the complete list of Vudoo events, and use them to customise the website experience based on the activity within the player.
Here are just a few examples of what's possible:
You can update content on the page based on what your viewers have clicked within the video.
You can display additional content before or after your Vudoo video.
You can push interaction events into Google Analytics as custom events.
Here's how to get started...
Add the Javascript code to your website
To see the events being fired, add this javascript snippet at the bottom of your website page before the closing </body> tag, or within the Vudoo iframe embed "onload" event.
Open your developer tools console drawer, press play on your embedded Vudoo video, and watch the events being logged as they get fired.
Javascript Code Example
<script type="text/javascript">
/**
* @param event [object]
*/
var vudooEvents = function(event) {
console.log('VUDOO_EVENT: ', event);
};
</script>
See the complete list of Vudoo published events
Below is a list of default events the Vudoo player publishes to your iframe embed.
VUDOO_UI_READY
When the Vudoo UI has loaded and is ready, this event is fired. The object returned looks similar to the example below:
/**
* @param event [string]
* @param eventProperties [object]
* @param eventName [string]
*/
{
"event": "VUDOO_UI_READY",
"eventProperties": {
"eventName": "VUDOO_UI_READY"
}
}
INTERACTIONS_READY
When the Vudoo interactions have loaded, this event is fired. The object returned looks similar to the example below:
/**
* @param event [string]
* @param eventProperties [object]
* @param eventName [string]
*/
{
"event": "INTERACTIONS_READY",
"eventProperties": {
"eventName": "INTERACTIONS_READY"
}
}
FIRSTPLAY
When the play button is first clicked, or autoplay initiates and starts playing, this event is fired. The object returned looks similar to the example below:
/**
* @param event [string]
* @param eventProperties [object]
* @param eventName [string]
* @param playHeadDuration [float]
*/
{
"event": "FIRSTPLAY",
"eventProperties": {
"eventName": "FIRSTPLAY",
"playHeadDuration": 30.123
}
}
PLAY
When the play button is clicked after a pause, this event is fired. The object returned looks similar to the example below:
/**
* @param event [string]
* @param eventProperties [object]
* @param eventName [string]
* @param playHeadTime [float]
*/
{
"event": "PLAY",
"eventProperties": {
"eventName": "PLAY",
"playHeadTime": 1.810971
}
}
PAUSE
When the pause button is clicked, a Vudoo pin is clicked or a checkpoint has been reached, the video tech is paused firing this event. The object returned looks similar to the example below:
/**
* @param event [string]
* @param eventProperties [object]
* @param eventName [string]
* @param playHeadTime [float]
*/
{
"event": "PAUSE",
"eventProperties": {
"eventName": "PAUSE",
"playHeadTime": 3.09
}
}
TIME_UPDATE
While the video tech is playing, this event is fired updating the playHeadTime with the current timeline time. The object returned looks similar to the example below:
/**
* @param event [string]
* @param eventProperties [object]
* @param eventName [string]
* @param playHeadTime [float]
*/
{
"event": "TIME_UPDATE",
"eventProperties": {
"eventName": "TIME_UPDATE",
"playHeadTime": 4.594
}
}
PIN_CLICK
When a Vudoo pin is clicked this event is fired. The object returned looks similar to the example below:
/**
* @param event [string]
* @param eventProperties [object]
* @param eventName [string]
* @param eventData [object]
* @param pinLabel [string] [The pin display label]
* @param pinName [string] [The pin reference name]
* @param pinType [string] [Possible pinType values]
* ["OVERLAY", "VUDOO_VIDEO_BRANCH", "EXTERNAL_LINK", "NO_ACTION"]
*/
{
"event": "PIN_CLICK",
"eventProperties": {
"eventName": "PIN_CLICK",
"eventData": {
pinLabel: "This is an interactive video",
pinName: "This is my first pin",
pinType: "OVERLAY",
pinURL: "https://vudoo.com" <- If CTA is a link
}
}
}
OVERLAY_OPEN
When a Vudoo pin is clicked with an action type of "OVERLAY" or a Vudoo checkpoint has been reached, this event is fired. The object returned looks similar to the example below:
/**
* @param event [string]
* @param eventProperties [object]
* @param eventName [string]
*/
{
"event": "OVERLAY_OPEN",
"eventProperties": {
"eventName": "OVERLAY_OPEN"
}
}
OVERLAY_CLOSE
When a Vudoo overlay template is closed by the viewer the object returned looks similar to the example below:
/**
* @param event [string]
* @param eventProperties [object]
* @param eventName [string]
*/
{
"event": "OVERLAY_CLOSE",
"eventProperties": {
"eventName": "OVERLAY_CLOSE"
}
}
OVERLAY_BUTTON_CLICK
When a Vudoo overlay template is in view, and the viewer clicks any buttons within the overlay template, this event is fired. The object returned looks similar to the example below:
/**
* @param event [string]
* @param eventProperties [object]
* @param eventName [string]
*/
{
"event":"OVERLAY_BUTTON_CLICK",
"eventProperties":{
"eventName":"OVERLAY_BUTTON_CLICK",
"eventData":{
"link":"https://vudoo.com",
"text":"Click here",
"marker":{
pinLabel: "This is an interactive video",
pinName: "This is my first pin",
}
}
}
}
CHECKPOINT_REACH
When a Vudoo checkpoint has been reached, this event is fired. The object returned looks similar to the example below:
/**
* @param event [string]
* @param eventProperties [object]
* @param eventName [string]
* @param eventData [object]
* @param pinLabel [string] [The checkpoint display label "voided"]
* @param pinName [string] [The checkpoint reference name]
* @param pinType [string] [Possible pinType values] ["OVERLAY"]
*/
{
"event": "CHECKPOINT_REACH",
"eventProperties": {
"eventName": "CHECKPOINT_REACH",
"eventData": {
pinLabel: "This label exists but is a void",
pinName: "This is my first checkpoint",
pinType: "OVERLAY"
}
}
}
MOBILE_FULLSCREEN_OPEN
When a Vudoo video is embedded on your website, viewing the video on a mobile device causes the Vudoo video to be toggled in a fullscreen state. This is to ensure greater user experience, taking up as much of the users devices viewport as possible. This event is fired when autoplay is enabled, or when a viewer clicks the play button. The object returned looks similar to the example below:
/**
* @param event [string]
* @param eventProperties [object]
* @param eventName [string]
*/
{
"event": "MOBILE_FULLSCREEN_OPEN",
"eventProperties": {
"eventName": "MOBILE_FULLSCREEN_OPEN"
}
}
MOBILE_FULLSCREEN_CLOSE
When a Vudoo video is embedded on your website, viewing the video on a mobile device causes the Vudoo video to be toggled in a fullscreen state mentioned above. When a viewer clicks the "x" or exit button, the fullscreen is then returned to it's original state, closing the fullscreen viewport returning back to your website. The object returned looks similar to the example below:
/**
* @param event [string]
* @param eventProperties [object]
* @param eventName [string]
*/
{
"event": "MOBILE_FULLSCREEN_CLOSE",
"eventProperties": {
"eventName": "MOBILE_FULLSCREEN_CLOSE"
}
}
ENDED
When the Vudoo video ends, this event is fired indicating the video has completed. The object returned looks similar to the example below:
/**
* @param event [string]
* @param eventProperties [object]
* @param eventName [string]
* @param playHeadTime [float]
*/
{
"event": "ENDED",
"eventProperties": {
"eventName": "ENDED",
"playHeadTime": 36.045
}
}