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
10

Hi @hkorhola - I found this thread as I was running into the similar issue of not being able to use the media tracking plugin with the iframed Vimeo embeds in a Hubspot landing page.

I reviewed the thread and was hoping to 1. verify my understanding of your solution and 2. repurpose it for my Hubspot use case.

What did your solution end up looking like? Would it be possible to implement this solution if I am using the Hubspot CMS and do not have control over the iframe or ability to hook into the Vimeo events?

11

hi @Alex_Ting will get back to this soon, I have missed notification completely :confused:

12

hi @Alex_Ting So our solution ended up looking something like this:

  • small own simple schema for video events, I uploaded it to our Iglu repository
  • frontend “service” that calls Snowplow trackSelfDescribingEvent
  • then in page that has the Vimeo player, we attach play, seek, ended, pause events to this own frontend service

so in code snippet something like this:

    this.player.on("play", (data) => {
        this.sendMediaEvent("play", this.videoId, this.$route.path.toString(), this.$currentUser.id.toString(), data);
      });
      this.player.on("pause", (data) => {
        this.sendMediaEvent("pause", this.videoId, this.$route.path.toString(), this.$currentUser.id.toString(), data);
      });

so that sendMediaEvent then calls eventually:

 snowplow("trackSelfDescribingEvent", {
        event: {
          schema: this.getMediaSchema(),
          data: mediaEvent,
        },
      });

Then regarding Hubspot CMS:
I don’t think it’s feasible if you only use the iFrame embedding from Vimeo, pls someone advise if I am not correct.

But, I think you could do it by using a custom HTML snippet in Hubspot and the Vimeo JS player library then to build the Vimeo player using the Javascript library. But that needs of course that you implement the element, into which the video goes, then self compared to only using the iFrame.

So:

  • Hubspot page with HTML element ABC
  • insert a custom HTML into this page with Hubspot CMS
  • in the custom HTML, initialize Vimeo player which is quite simple with only some rows of code Vimeo
  • also in the custom HTML, implement a function that calls Snowplow’s desired tracking e.g. media schema, or custom schema
  • and in the initialization, attach desired video events then to call the Snowplow function