HubSpot Ideas

kanesmall

Extract video tracking/analytics functionality from HubSpot video field

We tend to use plyr.io for video embeds at our company because, its just such a useful library for full player-customisation/control but, if you use anything other than the standard HubSpot video field, you lose tracking/analytics for any video views/plays on a page.

 

It would be nice to be able to extract that part of the HubSpot video field that enables tracking/analytics to be stored and visible within a page's performance dashboard so that, not only the native HubSpot video field is required.

3 Replies
nickdeckerdevs1
Contributor | Gold Partner

I think the plyr.io (first time seeing it) is pretty awesome. I'd also like to point out that major video hosters that report on analytics have very open APIs for this that we're able to do a lot with the system and the player api, see:

I think we can all agree that having videos in iframes in 2022 works, but isn't necessary. I think allowing developers to customize the expereince would be really great. 

I can't sell people on HubSpot video because all the other players do it better. We should fix this!

derekcavaliero
Top Contributor | Diamond Partner

@kanesmall You can hook into the player interactions by listening for messages using the postMessage API:

 

<script>
window.addEventListener('message', function(message){
    
    if (message.origin != 'https://play.hubspotvideo.com') return;
    
    /*
    * (string) PLAYER_PLAY, TRACKED_PLAY, PLAYER_PAUSE, PLAYER_ENDED
    * Note, TRACKED_PLAY only fires once per video interaction (e.g. the first time a video is played) - therefore it might make sense to use this for any custom tracking needs to track when videos are 'started'
    */
    var playerEvent = message.data.type; 
  
    // subscribe to events and map them to expected status values for GTM compatibility
    // note - 'progress' events are currently not possible
    var statuses = {
      'TRACKED_PLAY': 'start',
      'PLAYER_PLAY': 'play',
      'PLAYER_PAUSE': 'pause',
      'PLAYER_ENDED': 'complete'
    };
  
    if (!statuses.hasOwnProperty(playerEvent)) return; 
  
    var player = document.getElementById('hs_player_' + message.data.embedId);
    var playersrc=player.src.split('?')[0];
    
    // We push the video data to the dataLayer in the same format GTM uses for its own YouTube trigger type - this means all you need to use inside GTM is a YouTube video trigger on tags you want to send video actions through.

    var eventPayload = {
      'event': 'gtm.video',
      'gtm.element': player,
      'gtm.elementUrl': playerSrc,
      'gtm.elementId': player.id,
      'gtm.videoStatus': statuses[playerEvent],
      'gtm.videoProvider': 'hubspot',
      'gtm.videoDuration': undefined, 
      'gtm.videoTitle': message.data.videoTitle,
      'gtm.videoUrl': playerSrc,
      'gtm.videoVisible': true
    };
    
    window.dataLayer.push(eventPayload);

});
</script>

 


Assuming you are using GTM for tracking (I highly suggest you do). You could push any events you wish to various platforms. You could also adjust the code above to send data to a specific platform via its own APIs - I prefer to abstract it through GTM for reuse.

Here is a Gist for any future updates that might be made:
https://gist.github.com/derekcavaliero/6906705b902c2f028bacfb69b6ef6fc7

nickdeckerdevs1
Contributor | Gold Partner

wait for it, leng gen dairy