Vimeo Video Tracking

tburke
Regular Visitor
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

Highlighted

Vimeo Video Tracking

tburke
Regular Visitor
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.

Vimeo Video Tracking

mark_jaggers
Visitor
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
Regular Visitor
tburke
Hi @mark_jaggers. Not quite, but I'm more than happy to post once we get something ready.

Vimeo Video Tracking

tburke
Regular Visitor
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 my use case doesn't require this because all our videos are placed in modals (i.e. they pop-up when the users clicks a preview thumbnail) so I just wait for the user to click the image and then create the player object and start tracking (the jQuery bit). You could try splitting this up by putting the code block under //Loads the Vimeo API library in a preloader then putting the other part (minus the jQuery on('mousedown') part) in a seperate extension to get this timing issue figured out.

Good luck!


// Loads the Vimeo API library
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);

/**
* There's a timing issue here. 
*
* The code above dynamically adds the Vimeo script to the page, but 
* this script needs to be fully loaded before we can create the
* Vimeo.Player() object in the code below. YouTube has an
* onYoutubeApiReady() event, but Vimeo doesn't seem to have a similar
* event to listen for. This isn't a problem in my use case because
* our videos are placed in sidebar modals so we create the player
* object when the user clicks to open the modal. * */ //Initializes on video image click mousedown. You'll need to remove or modify for your use case jQuery('.videocontainer img').on('mousedown', function() { //create player object if a vimeo iframe is present if (jQuery('iframe[src*="vimeo"]').length > 0) { var vimIframe = document.querySelector('iframe[src*="vimeo"]'); //set player object window.vimPlayer = new Vimeo.Player(vimIframe); var percentWatched, videoId, videoTitle; //get video title vimPlayer.getVideoTitle().then(function(title) { videoTitle = title; }); //get video ID vimPlayer.getVideoId().then(function(id) { videoId = id.toString(); }); //track video starts vimPlayer.on('play', function(data) { if (typeof startedVideo === "undefined") { utag.link({ event_category: "Video", event_action: "Video Start", event_label: videoTitle, event_name: "video_tracking", video_platform: "Vimeo", video_duration: data.duration, video_id: videoId }); startedVideo = 1; } }); //track video pauses vimPlayer.on('pause', function(data) { utag.link({ event_category: "Video", event_action: "Video Paused", event_label: videoTitle, event_name: "video_tracking", video_platform: "Vimeo", video_duration: data.duration, video_id: videoId }); }); //track video ended vimPlayer.on('ended', function(data) { utag.link({ event_category: "Video", event_action: "Video Complete", event_label: videoTitle, event_name: "video_tracking", video_platform: "Vimeo", video_duration: data.duration, video_id: videoId }); }); //track percentages var milestones = [25, 50, 75] var milestoneReached = [] //check milestones on each timeupdate vimPlayer.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) { console.log(currentMilestone + '% watched'); utag.link({ event_category: "Video", event_action: percentWatched - 1 + "% Viewed", event_label: videoTitle, event_name: "video_tracking", video_platform: "Vimeo", video_duration: data.duration, video_id: videoId }) milestoneReached.push('1'); } } }); } });