Last active
June 21, 2023 10:44
-
-
Save derekcavaliero/6906705b902c2f028bacfb69b6ef6fc7 to your computer and use it in GitHub Desktop.
HubSpot - Embedded Video GTM dataLayer Adapter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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 - 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
How can I do to track the percentage & seconds of the video when someone pause it?