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 logged as they are fired or triggered.
Javascript Code Example
<script type="text/javascript">
/**
* @param {object} event
*/
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.
VIEW_ID
When a Vudoo video loads, a new unique id is generated with an event name of VIEW_ID. This id is unique to a single video view. If the video project is a branching video then all videos branched in that view will continue to have this id for all video's viewed within that journey.
Note: A viewer who has viewed a video multiple times will generate many view id's.
For example; If you were to view the same video twice then 2 view id's are recorded so your view metric will contribute to 2 views resulting in 2 views but one unique viewer.
The object returned looks similar to the example below:
/**
* @param {HTMLIFrameElement} eventProperties.iframe - Vudoo iframe emitting this event
*/
{
event: "VIEW_ID",
eventProperties: {
eventName: "VIEW_ID",
embedId: "XXXXXXXXXXX",
viewId: "XXXXXX-XXXXXX-XXXX",
iframe: HTMLIFrameElement
}
}
EMBED_ID
When a Vudoo video loads, an event is triggered displaying the video embed id. This id is a constant and is the Vudoo videos reference or asset id.
The object returned looks similar to the example below:
/**
* @param {HTMLIFrameElement} eventProperties.iframe - Vudoo iframe emitting this event
*/
{
event: "EMBED_ID",
eventProperties: {
eventName: "EMBED_ID",
embedId: "XXXXXXXXXXX",
iframe: HTMLIFrameElement
}
}
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 {HTMLIFrameElement} eventProperties.iframe - Vudoo iframe emitting this event
*/
{
event: "VUDOO_UI_READY",
eventProperties: {
eventName: "VUDOO_UI_READY",
iframe: HTMLIFrameElement
}
}
INTERACTIONS_READY
When the Vudoo interactions have loaded, this event is fired.
The object returned looks similar to the example below:
/**
* @param {HTMLIFrameElement} eventProperties.iframe - Vudoo iframe emitting this event
*/
{
event: "INTERACTIONS_READY",
eventProperties: {
eventName: "INTERACTIONS_READY",
iframe: HTMLIFrameElement
}
}
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 {number} eventProperties.playHeadDuration - Video length in seconds
* @param {HTMLIFrameElement} eventProperties.iframe - Vudoo iframe emitting this event
*/
{
event: "FIRSTPLAY",
eventProperties: {
eventName: "FIRSTPLAY",
playHeadDuration: 30.123,
iframe: HTMLIFrameElement
}
}
PLAY
When the play button is clicked after a pause, this event is fired.
The object returned looks similar to the example below:
/**
* @param {number} eventProperties.playHeadTime - Time on video when play event is fired in seconds
* @param {HTMLIFrameElement} eventProperties.iframe - Vudoo iframe emitting this event
*/
{
event: "PLAY",
eventProperties: {
eventName: "PLAY",
playHeadTime: 30.123,
iframe: HTMLIFrameElement
}
}
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 {number} eventProperties.playHeadTime - Time on video when pause event is fired in seconds
* @param {HTMLIFrameElement} eventProperties.iframe - Vudoo iframe emitting this event
*/
{
event: "PAUSE",
eventProperties: {
eventName: "PAUSE",
playHeadTime: 30.123,
iframe: HTMLIFrameElement
}
}
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 {number} eventProperties.playHeadTime - Current time on video in seconds
* @param {HTMLIFrameElement} eventProperties.iframe - Vudoo iframe emitting this event
*/
{
event: "TIME_UPDATE",
eventProperties: {
eventName: "TIME_UPDATE",
playHeadTime: 30.123,
iframe: HTMLIFrameElement
}
}
PIN_CLICK
When a Vudoo pin is clicked this event is fired.
The object returned looks similar to the example below:
/**
* @param {string} eventProperties.eventData.pinLabel - Pin display label
* @param {string} eventProperties.eventData.pinName - Pin reference name
* @param {("OVERLAY"|"VUDOO_VIDEO_BRANCH"|"EXTERNAL_LINK"|"NO_ACTION")} eventProperties.eventData.pinType - Type of pin
* @param {string?} eventProperties.eventData.pinURL - String url if the CTA is a link. "pinURL" key won't exist if not a link.
* @param {HTMLIFrameElement} eventProperties.iframe - Vudoo iframe emitting this event
*/
{
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"
},
iframe: HTMLIFrameElement
}
}
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 {string} eventProperties.eventData.marker.pinLabel - Pin display label
* @param {string} eventProperties.eventData.marker.pinName - Pin reference name
* @param {"OVERLAY"} eventProperties.eventData.marker.pinType - Type of pin. In this case an overlay pin.
* @param {string} eventProperties.eventData.tid - ID of the overlay template
* @param {HTMLIFrameElement} eventProperties.iframe - Vudoo iframe emitting this event
*/
{
event: "OVERLAY_OPEN",
eventProperties: {
eventName: "OVERLAY_OPEN",
eventData: {
marker: {
pinLabel: "This is an interactive video",
pinName: "This is my first pin",
pinType: "OVERLAY",
},
tid: "xxxx"
},
iframe: HTMLIFrameElement
}
}
OVERLAY_CLOSE
When a Vudoo overlay template is closed by the viewer.
The object returned looks similar to the example below:
/**
* @param {HTMLIFrameElement} eventProperties.iframe - Vudoo iframe emitting this event
*/
{
event: "OVERLAY_CLOSE",
eventProperties: {
eventName: "OVERLAY_CLOSE",
iframe: HTMLIFrameElement
}
}
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 {string} eventProperties.eventData.id - ID of the overlay button.
* @param {string} eventProperties.eventData.link - The overlay button link
* @param {string} eventProperties.eventData.text - The overlay button text
* @param {string} eventProperties.eventData.marker.pinLabel - The label of the pin which contains the overlay button
* @param {string} eventProperties.eventData.marker.pinName - The name of the pin which contains the overlay button
* @param {string} eventProperties.eventData.tid - ID of the overlay template
* @param {HTMLIFrameElement} eventProperties.iframe - Vudoo iframe emitting this event
*/
{
event: "OVERLAY_BUTTON_CLICK",
eventProperties: {
eventName: "OVERLAY_BUTTON_CLICK",
eventData: {
id: "",
link: "https://vudoo.com",
text: "Hello click here",
marker: {
pinLabel: "This is an interactive video",
pinName: "This is my first pin"
},
tid: "xxxx"
},
iframe: HTMLIFrameElement
}
}
CHECKPOINT_REACH
When a Vudoo checkpoint has been reached, this event is fired.
The object returned looks similar to the example below:
/**
* @param {string} eventProperties.eventData.pinLabel - Pin display label
* @param {string} eventProperties.eventData.pinName - Pin reference name
* @param {"OVERLAY"} eventProperties.eventData.pinType - Type of pin. In this case an overlay pin.
* @param {HTMLIFrameElement} eventProperties.iframe - Vudoo iframe emitting this event
*/
{
event: "CHECKPOINT_REACH",
eventProperties: {
eventName: "CHECKPOINT_REACH",
eventData: {
pinLabel: "This is an interactive video",
pinName: "This is my first checkpoint",
pinType: "OVERLAY"
},
iframe: HTMLIFrameElement
}
}
FULLSCREEN_OPEN
When a Vudoo embed enters fullscreen, this event is fired.
Vudoo enters fullscreen automatically on mobile devices when the user plays the video.
This event is also fired when Vudoo enters fullscreen because autoplay is enabled.
The object returned looks similar to the example below:
/**
* @param {HTMLIFrameElement} eventProperties.iframe - Vudoo iframe emitting this event
*/
{
event: "FULLSCREEN_OPEN",
eventProperties: {
eventName: "FULLSCREEN_OPEN",
iframe: HTMLIFrameElement
}
}
FULLSCREEN_CLOSE
When a Vudoo embed exits fullscreen, this event is fired.
E.g. When a viewer clicks the exit button in fullscreen.
The object returned looks similar to the example below:
/**
* @param {HTMLIFrameElement} eventProperties.iframe - Vudoo iframe emitting this event
*/
{
event: "FULLSCREEN_CLOSE",
eventProperties: {
eventName: "FULLSCREEN_CLOSE",
iframe: HTMLIFrameElement
}
}
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 {number} eventProperties.playHeadTime - Time on video when the ended event is fired in seconds
* @param {HTMLIFrameElement} eventProperties.iframe - Vudoo iframe emitting this event
*/
{
event: "ENDED",
eventProperties: {
eventName: "ENDED",
playHeadTime: 36.045,
iframe: HTMLIFrameElement
}
}