Vidyard Event Listener
How to track Vidyard Video Interaction with google tag manager
If you have a Vidyard video embedded on your website, you can measure how users consume your video content.
Use the data to build a marketing audience, segmentation analysis on how the video engagement impacts your conversions, website engagement metrics, marketing funnel, and other KPIs.
To implement this, start by creating a new custom HTML tag type in Google Tag Manager, copy and paste the Vidyard event listener code in this tag, fire it on DOM Ready or Window loaded (Recommended)
What this code does is listen for Vidyard video activities such as;
- Play
- Video Progress (1, 10, 25, 50, 75, 90, 100) percent
To fire your tags when this event happens, you can create a custom event trigger with the name [vidyardInteraction]
🚨 This event [vidyardInteraction] gets fired for all Vidyard video interactions.
Using Google Tag Manager dataLayer variables, you can get more data about the Vidyard video, which includes;
[videoProvider] –> returns the Vidyard all time (The video provider)
[videoAction] –> returns the video actions, pause play, percent, etc.
[videoLabel] –> gets the video name/title
[videoID] –> gets the Vidyard video ID
[videoURL] –> this is the Vidyard video URL
[videoDuration] –> returns the Vidyard video duration in seconds
[vidyardVisitorID] –> this returns the Vidyard visitor ID
To have these data available in your analytics tool or advertising platform, you’ll have to create the needed tag and attach the Vidyard video trigger.
💡 You can streamline the event to fire on specific Vidyard interactions by using the dataLayer variables and trigger conditions
🏆 Credit: Code was originally created by the Vidyard team, but modified to include certain information
<script type="text/javascript"> function initApp() { vidyardEmbed.api.addReadyListener(function(data, player) { vidyardEmbed.api.progressEvents(function(result) { if (result.event == 1) { dataLayer.push({ event: 'vidyardInteraction', ContentCategory: 'video', videoProvider: 'Vidyard', videoAction: "Play", videoID: result.player.uuid, videoURL: 'https://share.vidyard.com/watch/' + result.player.uuid, vidyardVisitorID: result.player.metadata.visitorID, videoDuration: result.player.metadata.length_in_seconds, videoLabel: result.player.metadata.chapters_attributes[result.chapter].video_attributes.name }); } else { dataLayer.push({ event: 'vidyardInteraction', ContentCategory: 'video', videoProvider: 'Vidyard', videoAction: "Watched " + result.event + "%", videoID: result.player.uuid, videoURL: 'https://share.vidyard.com/watch/' + result.player.uuid, vidyardVisitorID: result.player.metadata.visitorID, videoDuration: result.player.metadata.length_in_seconds, videoLabel: result.player.metadata.chapters_attributes[result.chapter].video_attributes.name }); } }, [1, 25, 50, 75, 95, 100]); }); } window.vidyardEmbed ? initApp(window.vidyardEmbed) : (window.onVidyardAPI = function(vyApi) { initApp(vyApi); }); </script>