All Collections
Sharing your interactive video
Embedding your video
Javascript API to track Vudoo iframe player events
Javascript API to track Vudoo iframe player events

Here's how to listen to embedded Vudoo player events to create your custom callbacks.

Vudoo avatar
Written by Vudoo
Updated over a week ago

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 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.

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 event [string]
* @param eventProperties [object]
* @param eventName [string]
*/
{
"event": "VIEW_ID",
"eventProperties": {
"eventName": "VIEW_ID",
"embedId": "XXXXXXXXXXX"
"viewId": "XXXXXX-XXXXXX-XXXX"
"iframe": {the iframe element emitting this event}
}
}


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 event [string]
* @param eventProperties [object]
* @param eventName [string]
* @param iframe [HTMLIFrameElement]
*/
{
"event": "EMBED_ID",
"eventProperties": {
"eventName": "EMBED_ID",
"embedId": "XXXXXXXXXXX",
"iframe": {the iframe element emitting this event}
}
}

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]
* @param iframe [HTMLIFrameElement]
 */
{
  "event": "VUDOO_UI_READY",
  "eventProperties": {
    "eventName": "VUDOO_UI_READY",
"iframe": {the iframe element emitting this event}
  }
}


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]
* @param iframe [HTMLIFrameElement]
 */
{
  "event": "INTERACTIONS_READY",
  "eventProperties": {
    "eventName": "INTERACTIONS_READY",
"iframe": {the iframe element emitting this event}
  }
}


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]
* @param iframe [HTMLIFrameElement]
 */
{
  "event": "FIRSTPLAY",
  "eventProperties": {
    "eventName": "FIRSTPLAY",
    "playHeadDuration": 30.123,
"iframe": {the iframe element emitting this event}
  }
}


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]
* @param iframe [HTMLIFrameElement]
 */
{
  "event": "PLAY",
  "eventProperties": {
    "eventName": "PLAY",
    "playHeadTime": 1.810971,
"iframe": {the iframe element emitting this event}
  }
}

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]
* @param iframe [HTMLIFrameElement]
 */
{
  "event": "PAUSE",
  "eventProperties": {
    "eventName": "PAUSE",
    "playHeadTime": 3.09,
"iframe": {the iframe element emitting this event}
  }
}

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]
* @param iframe [HTMLIFrameElement]
 */
{
  "event": "TIME_UPDATE",
  "eventProperties": {
    "eventName": "TIME_UPDATE",
    "playHeadTime": 4.594,
"iframe": {the iframe element emitting this event}
  }
}

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"]
* @param iframe [HTMLIFrameElement]
 */
{
  "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
    },
"iframe": {the iframe element emitting this event}
  }
}

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",
"iframe": {the iframe element emitting this event}
  }
}

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]
* @param iframe [HTMLIFrameElement]
 */
{
  "event": "OVERLAY_CLOSE",
  "eventProperties": {
    "eventName": "OVERLAY_CLOSE",
"iframe": {the iframe element emitting this event}
  }
}


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]
* @param iframe [HTMLIFrameElement]
 */
{
   "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",
         }
      },
"iframe": {the iframe element emitting this event}
   }
}


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 iframe [HTMLIFrameElement]

 * @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"
    },
"iframe": {the iframe element emitting this event}
  }
}

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 event [string]
 * @param eventProperties [object]
 * @param eventName [string]
* @param iframe [HTMLIFrameElement]
 */
{
  "event": "FULLSCREEN",
  "eventProperties": {
    "eventName": "FULLSCREEN_OPEN",
"iframe": {the iframe element emitting this event}
  }
}


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 event [string]
 * @param eventProperties [object]
 * @param eventName [string]
* @param iframe [HTMLIFrameElement]
 */
{
  "event": "FULLSCREEN",
  "eventProperties": {
    "eventName": "FULLSCREEN_CLOSE",
"iframe": {the iframe element emitting this event}
  }
}

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]
* @param iframe [HTMLIFrameElement]
*/
{
"event": "ENDED",
"eventProperties": {
"eventName": "ENDED",
"playHeadTime": 36.045,
"iframe": {the iframe element emitting this event}
}
}


Did this answer your question?