Vimeo Video Tracking

tburke
Silver Contributor
Silver Contributor tburke

I can't seem to find any documentation on setting up Video Event Tracking for Vimeo. Is this available? 

It doesn't appear on this page: https://community.tealiumiq.com/t5/iQ-Tag-Management/SERIES-A-Guide-to-Tracking-Video-Interactions-w...

6 REPLIES 6

Vimeo Video Tracking

Tealium Employee

Hi @tburke ,

Thanks for getting in touch.

Vimeo has lots of documentation on how to manage event tracking with their platform

https://developer.vimeo.com/player/sdk/basics

This link includes some examples you can reference.

The main difference you need to take into consideration is that inside the events instead of a console.log you will be sending a utag.link call instead (with the required data)

Hope that helps!

Regards,

Ribal

Vimeo Video Tracking

tburke
Silver Contributor
Silver Contributor tburke

Thanks @rebman! This is helpful. We'll take a stab at getting this setup.

Vimeo Video Tracking

Community Manager
Community Manager

@tburke Also, be sure to check out our data layer recommendation for basic video tracking.

Remember to "Accept as Solution" when your question has been answered and to give kudos to helpful replies.
Highlighted

Vimeo Video Tracking

mark_jaggers
Silver Contributor
Silver Contributor mark_jaggers

Were you able to get this set up?  It would be great if you could provide a sample of the code you used.

 

thanks

Vimeo Video Tracking

tburke
Silver Contributor
Silver Contributor tburke
Hi @mark_jaggers. Not quite, but I'm more than happy to post once we get something ready.

Vimeo Video Tracking

tburke
Silver Contributor
Silver Contributor tburke

Here's some starter code to help anyone interested get started. You'll of course need to modify this to fit your use case and naming conventions. I don't work for Tealium so use at your own-risk.

Important note: there's a timing issue so I don't recommend trying to put this all in one pre-loader extension. The first code block loads the Vimeo API script, but the script needs to be fully loaded on the page before you can create the player object on the iframe. Youtube handles this with onYouTubeIframeAPIReady() which ensures the API is ready before creating the object, but Vimeo doesn't appear to have a similar method. I'm sure someone smarter than me can figure out a way to delay this (probably using a Promise or eventListener), but we decided to just wrap it in a setTimeout.

You could also try splitting this up by putting the script to load the API in a preloader and move the rest of the code into a JavaScript extension.

Good luck!

Edit 11/11/19: we refactored our snippet

https://gist.github.com/jtokib/b1272c6b84e7c85f3abab81b21188a68

//Create global player array
window.vimeoMediaObjs = [];

//Loads vimeo API on the page
var vimapi = document.createElement('script');
vimapi.src="https://player.vimeo.com/api/player.js";
var scriptref = document.getElementsByTagName('script')[0];
scriptref.parentNode.insertBefore(vimapi, scriptref);

//Wraps in setTimeout so above API is ready before we enter code block
setTimeout(function() {
    //find all vimeo iframes
    var elements = $('iframe[src*="vimeo"]');
    //loop through all the iframes and push to global array
    for (var i = 0; i < elements.length; i++) {
        vimeoMediaObjs.push(elements[i]);
    }
    
//Create the data object we pass on each utag.link call var makeLink = function(eventAction, duration, id, title){ return { event_category: "Video", event_action: eventAction, event_label: title, event_name: "video_tracking", is_engagement_event: "1", video_platform: "Vimeo", video_duration: duration, video_id: id }; } //function that tracks each player event var initVimeoCriteria = function(mediaIdx) { var percentWatched, videoId, videoTitle; //Get Video ID and Title - promise fulfilled before user interaction vimeoMediaObjs[mediaIdx].getVideoId().then(function(id) { videoId = id.toString(); vimeoMediaObjs[mediaIdx].getVideoTitle().then(function(title) { videoTitle = title; }); }); //Track tag fires on Play event vimeoMediaObjs[mediaIdx].on('play', function(data) { var duration = data.duration; var durationFormatted = new Date(1000 * duration).toISOString().substr(11, 8); utag.link(makeLink("Video Start", durationFormatted, videoId, videoTitle)); }); //Track tag fires on pause event vimeoMediaObjs[mediaIdx].on('pause', function(data) { var duration = data.duration; var durationFormatted = new Date(1000 * duration).toISOString().substr(11, 8); utag.link(makeLink("Video Paused", durationFormatted, videoId, videoTitle)); }); //Track tag fires on ended event vimeoMediaObjs[mediaIdx].on('ended', function(data) { var duration = data.duration; var durationFormatted = new Date(1000 * duration).toISOString().substr(11, 8); utag.link(makeLink("Video Complete", durationFormatted, videoId, videoTitle)); }); //Track Milestones -- change percent watched values in array if needed var milestones = [25, 50, 75] var milestoneReached = [] vimeoMediaObjs[mediaIdx].on('timeupdate', function(data) { percentWatched = Math.round(data.percent * 100); for (var i = 0; i < milestones.length; i++) { var currentMilestone = milestones[i]; if (milestoneReached.length <= i && percentWatched > currentMilestone) { var duration = data.duration; var durationFormatted = new Date(1000 * duration).toISOString().substr(11, 8); utag.link(makeLink(percentWatched - 1 + "% Viewed", durationFormatted, videoId, videoTitle)) milestoneReached.push('1'); } } }); } //Create vimeo player on each array index for (var k = 0; k < vimeoMediaObjs.length; k++) { //Create the player vimeoMediaObjs[k] = new Vimeo.Player(vimeoMediaObjs[k]); //initialize the tracking function initVimeoCriteria(k); } }, 500);