Tracking Vimeo embed via Vimeo JS API, options?

For engineers Tracking SDKs
1

Hello

We have a basic Snowplow pipeline up and running. It’s working fine with page views, pings, and link tracking.

Next question would be to track media events. The relevant tech stack is as follows:

  • VueJS (v2) on frontend
  • Vimeo embedded videos via their Javascript API & Player

As far as I have understood correctly, our options for tracking Vimeo in this case are:

A) implement either custom structure events or custom self-describing events into our frontend app. We can easily plug those into the part where Vimeo JS player loads and we can attach event handlers into it. Tracking Events | Snowplow Documentation

B) I checked the Youtube tracker plugin source code and it seems to use the YT player API also. A bit more laborious (but community) effort could be to fork & modify the YT plugin for Vimeo use. As both would be based on the JS Player logic. Of course this a bunch of work compared to option A…

Can anyone comment, have I understood the options correctly or are there still some other options? To my understanding we cannot directly use the media tracking plugin, as the Vimeo JS player builds itself into an iframe so we don’t that much control the HTML elements on the page… But as said, we can attach anything to the Vimeo player event handlers as I referred in option A.

Thanks for any comments :slight_smile:

2

Hey @hkorhola :slight_smile:

Have you tried using the media tracking plugin ? It is possible that it works out of the box if the Vimeo player you use adhere to the HTML5 video standards.

For option A you can use the already existing media_player and media_player_event schemas if they fit your needs.

1 Like
3

I didnt try media plug-in because I thought it wouldn’t work as we cannot get the tracker loaded inside the iframe. But based on your comment I will try it first. Just need to add some ID to the parent element as now our video container has Vuejs generated IDs which change. So need to add a persistent ID first and test the media plugin.

4

Hi @hkorhola
Not sure if you’ve seen our recent Office Hours on Media Tracing & Modeling with DBT?
HTH,
Eddie

1 Like
5

hadn’t spotted that office hours -recording. Will check it out, thanks.

1 Like
6

can update this so here we checked if media plugin would find Vimeo JS API player, but according to tests and this function snowplow-javascript-tracker/findMediaElement.ts at 68221b5d2af29f9202d55d9816dee8d82096e267 · snowplow/snowplow-javascript-tracker · GitHub so we concluded that e.g. getElementsByTagName(el) function cannot find the video inside the iFrame that Vimeo JS builds.

…anyway, we ended up implementing a small media schema and then hooking the event into Vimeo player events. Nothing complex at first, was actually a good chance to test schemas also.

7

could it @Peter_Perlepes actually work if contentWindow would be used in the media plugin? Like in this example snowplow-javascript-tracker-examples/iframeForm.jsx at master · snowplow-incubator/snowplow-javascript-tracker-examples · GitHub

1 Like
8

@hkorhola Excellent observations and thank you very much for going through it.
We have added the Vimeo tracking addition on our roadmap so expect some news soon.

Do you currently face any issue with your solution ? (Good job on that one!)

For any other information please go ahead and add things either here of the JS repository :slight_smile:

1 Like
9

Good if Vimeo is in the roadmap :grinning:

I need to validate data still but should be OK.

Yes Ok you never know if even a PR shows up some day :nerd_face:

1 Like