Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save derekcavaliero/6906705b902c2f028bacfb69b6ef6fc7 to your computer and use it in GitHub Desktop.
Save derekcavaliero/6906705b902c2f028bacfb69b6ef6fc7 to your computer and use it in GitHub Desktop.
HubSpot - Embedded Video GTM dataLayer Adapter
/**
* You'll want to add this to GTM using an "All Pages" trigger -
* Note - make sure you set it to only fire "once per-page" to prevent issues with re-registering the listener on SPAs
**/
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).
*/
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 given the limited messages emitted from the players.
**/
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];
/**
* Pushing the video event data to GTM in the same format it uses for its native "YouTube" trigger allows
* for using the same YouTube trigger without having to create custom dataLayer event triggers.
**/
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
};
// If you don't use the default "dataLayer" global variable you'll need to update this.
window.dataLayer.push(eventPayload);
});
@Adridocplanner
Copy link

How can I do to track the percentage & seconds of the video when someone pause it?

@derekcavaliero
Copy link
Author

@Adridocplanner - I do not believe HubSpot exposes the current elapsed video time nor the duration of the video in order to calculate that or track % progress like you can with YouTube videos.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment