HTML5 Video Tracking doesn't collect Wistia video titles correctly

Request a feature & Roadmap
1

Hi,

The HTML5 Video Tracking tag assumes that there is a title attribute present on the <video> element, however in the case of Wistia this is not true. There is no way, using Wistia’s embed code, to include a data-video-title attribute.

Wistia injects JSON+LD in the <head>, and that is where the video title is rendered. Example:

image
image780×530 88.7 KB

Might I suggest that rather than assuming an HTML attribute to fetch the title, we modify to either allow a variable OR a CSS selector for the title? This would still allow the HTML title attribute to be used if present, but also allow for more flexibility around where the title is fetched from.

In the case of JSON+LD, the title can be accessed using:

JSON.parse(document.querySelectorAll('.w-json-ld')[0].innerText).name;

Thanks,
Noah

2

Hi! Thanks for the valuable input. Adding a feature request to the backlog.

3

One more thing: could you link an example website where this player is implemented?

4

Hi @kuba,
are there any updates on this topic yet?
Thanks
Fabian

5

Hi @kuba, any updates on this?

6

There’s no eta yet. Can you provide an example site with this player implemented?

7

For example on this page: bit.ly/3FiRPK4

8

Below is the Google Tag Manager recipe (contains tags, triggers, variables) for tracking Wistia Videos via HTML5. I believe this could easily be modified by the Piwik team and added to the official libray of Piwik tags. It leverages the Wistia JavaScript API

10

@kuba checking to see if you think this can be modified and supported by Piwik Pro

11

Hi. Thanks for sharing that. Indeed, our Tag Manager and GTM have really similar architecture so it should work.

12

Hi @kuba

Any progress on this? We’re trying to implement Wistia tracking now but nothing seems to be arriving in Analytics although the tag we’ve got is firing correctly.

@Noah_Locke - did you find a way around this?

Thanks in advance :slight_smile:

13

… I tried to see what the HTML tag from this recipe does but when I try it in the console on a page like your example or others like a Wistia demo page (Watch Product Demo | Wistia Video Platform)… seems to work

To use it with PP Tag Manager, add only the HTML tag from the recipe to your tag manager, trigger when DOM ready and use the generated dataLayer events to trigger custom events for video reports like described here: How can I collect data about HTML5 videos on my site? (custom code) | Piwik PRO help center .

If you want to get rid of the code that sends data directly to gtag / GA and just want to execute the whole function when a player is found on the page (the recipe does that by using a custom JS variable and a trigger with condition) you can use the tag code that I used in the console for testing on the pages mentioned above: wistia HTML5 video Events to dataLayer · GitHub

hope that helps,
Markus

1 Like
14

@mbaersch Thanks for those links - most helpful :slight_smile:
Through a combo of your code, a few tweaks on our side to make it prevalent to the business and watching debugger like a hawk, we’ve finally got the Wistia videos coming through with all actions/fields we’d like to report on showing in Analytics.

I should note that the HTML5 Video template does work fine with the CSS selector turned on but the title of the video passed through seems to be an ID of some sort, so not very useful, hence the workaround to get DataLayer objects.

Thanks all :+1: