HTML5 video event

Requirements

• utag v4.38 or later. For more information about updating the utag.js template, see our knowledge base article Best Practices for Updating to the Latest Version of utag.js.

How it works

An HTML5 video event tracks when a visitor interacts with a HTML5 video. When a visitor performs the action, the tracking call is triggered.

For more information about how to add an event listener, see Manage events.

Event triggers

Event triggers are the specific actions the event listener tracks.

The HTML5 video event can track the following event triggers:

• Play – Trigger the event listener when the video is played.
• Pause – Trigger the event listener when the video is paused.
• Buffering – Trigger the event listener when the video is buffering.
• Milestones – Trigger the event listener when a percentage or amount of time of the video has played.

The milestones event trigger allows you to set one of the following thresholds:

• Percentage Complete – The percentage of the video that the viewer needs to watch before the event listener triggers. Enter multiple values in a comma-separated list (for example: 25, 50, 75).
• Time Viewed – The total video viewing time that is required to trigger the event listener.

Element selector

The element selector specifies which element on a page you want to trigger the event listener. For more information, see Event element selector.

Trigger frequency

The trigger frequency determines how many times the event trigger will result in a tracking call. For more information, see Event triggers.

Event tigger variables

Event trigger variables are the values the event listener sends with the tracking call. In the New Event > Event Configuration screen, navigate to the Event Trigger Variables table and click the trigger type to view or edit the trigger variables for your event.

For example, to view the variables for the pause trigger, click the Pause tab:

The HTML5 video event has the following default event trigger variables:

Play

Example

{
   "tealium_event"  : "video_play",
   "video_id" : "xWlEk2i9r5Q",
   "video_name" : "How to track videos in Tealium",
   "video_length" : "300",
   "video_platform" : "html5",
   "video_playhead" : "1",
   "iq_event_id:" : "html5_video_events_1"
}

Pause

Example

{
   "tealium_event"  : "video_pause",
   "video_id" : "xWlEk2i9r5Q",
   "video_name" : "How to track videos in Tealium",
   "video_length" : "300",
   "video_platform" : "html5",
   "video_playhead" : "30",
   "iq_event_id:" : "html5_video_events_2"
}

Buffering

Example

{
   "tealium_event"  : "video_buffer",
   "video_id" : "xWlEk2i9r5Q",
   "video_name" : "How to track videos in Tealium",
   "video_length" : "300",
   "video_platform" : "html5",
   "video_playhead" : "50",
   "iq_event_id:" : "html5_video_events_3"
}

Milestone

Example

{
   "tealium_event"  : "video_milestone",
   "video_milestone" : "50",
   "milestone_type" : "percent",
   "video_id" : "xWlEk2i9r5Q",
   "video_name" : "How to track videos in Tealium",
   "video_length" : "300",
   "video_platform" : "html5",
   "video_playhead" : "151",
   "iq_event_id:" : "html5_video_events_4"
}