Phase 1:
In Google Tag Manager, go to Variables > New > Custom JavaScript and paste the following code:
|
1 2 3 4 5 6 7 8 9 |
function () { var video = document.getElementsByTagName('video').length; if (video > 0) { return true; } else { return false; } } |
And Name this variable as “cjs – is HTML5 Video on a page”.
Phase 2:
Then go to Triggers > New:
In Trigger Configuration
Trigger Type => “Page View – Window Loaded”
This trigger fires on “Some Window Loaded Event”
Fire this trigger when an Event occurs and all of these conditions are true:
“cjs – is HTML5 Video on a page” equals “true”
And Name this trigger as “Pageview – HTML5 Video Player is Present”.
Phase 3:
Tags > New
Select “Custom HTML”
then paste the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<script> // Let's wrap everything inside a function so variables are not defined as globals (function() { // This is gonna our percent buckets ( 25%-75% ) var divisor = 25; // We're going to save our players status on this object. var videos_status = {}; // This is the funcion that is gonna handle the event sent by the player listeners function eventHandler(e) { switch (e.type) { // This event type is sent everytime the player updated it's current time, // We're using for the % of the video played. case 'timeupdate': // Let's set the save the current player's video time in our status object videos_status[e.target.id].current = Math.round(e.target.currentTime); // We just want to send the percent events once var pct = Math.floor(100 * videos_status[e.target.id].current / e.target.duration); for (var j in videos_status[e.target.id]._progress_markers) { if (pct >= j && j > videos_status[e.target.id].greatest_marker) { videos_status[e.target.id].greatest_marker = j; } } // current bucket hasn't been already sent to GA?, let's push it to GTM if (videos_status[e.target.id].greatest_marker && !videos_status[e.target.id]._progress_markers[videos_status[e.target.id].greatest_marker]) { videos_status[e.target.id]._progress_markers[videos_status[e.target.id].greatest_marker] = true; dataLayer.push({ 'event': 'video', 'video_status': 'progress', 'video_provider' : 'generic html5 video player', 'video_percent': videos_status[e.target.id].greatest_marker, // We are sanitizing the current video src string, and getting just the video name part 'video_title': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1]) }); } break; // This event is fired when user's click on the play button case 'play': dataLayer.push({ 'event': 'video', 'video_status' : 'play', 'video_provider' : 'generic html5 video player', 'video_percent': videos_status[e.target.id].greatest_marker, 'video_title': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1]) }); break; // This event is fied when user's click on the pause button case 'pause': if (videos_status[e.target.id].greatest_marker < '75') { dataLayer.push({ 'event': 'video', 'video_status' : 'pause', 'video_provider' : 'generic html5 video player', 'video_percent': videos_status[e.target.id].greatest_marker, 'video_title': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1]) }); } break; // If the user ends playing the video, an Finish video will be pushed ( This equals to % played = 100 ) case 'ended': dataLayer.push({ 'event': 'video', 'video_status' : 'complete', 'video_provider' : 'generic html5 video player', 'video_percent': '100', 'video_title': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1]) }); break; default: break; } } // We need to configure the listeners // Let's grab all the the "video" objects on the current page var videos = document.getElementsByTagName('video'); for (var i = 0; i < videos.length; i++) { // In order to have some id to reference in our status object, we are adding an id to the video objects // that don't have an id attribute. var videoTagId; if (!videos[i].getAttribute('id')) { // Generate a random alphanumeric string to use is as the id videoTagId = 'html5_video_' + Math.random().toString(36).slice(2); videos[i].setAttribute('id', videoTagId); }// Current video has alredy a id attribute, then let's use it <img draggable="false" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/2/svg/1f642.svg"> else { videoTagId = videos[i].getAttribute('id'); } // Video Status Object declaration videos_status[videoTagId] = {}; // We'll save the highest percent mark played by the user in the current video. videos_status[videoTagId].greatest_marker = 0; // Let's set the progress markers, so we can know afterwards which ones have been already sent. videos_status[videoTagId]._progress_markers = {}; for (j = 0; j < 100; j++) { videos_status[videoTagId].progress_point = divisor * Math.floor(j / divisor); videos_status[videoTagId]._progress_markers[videos_status[videoTagId].progress_point] = false; } // On page DOM, all players currentTime is 0 videos_status[videoTagId].current = 0; // Now we're setting the event listeners. videos[i].addEventListener("play", eventHandler, false); videos[i].addEventListener("pause", eventHandler, false); videos[i].addEventListener("ended", eventHandler, false); videos[i].addEventListener("timeupdate", eventHandler, false); videos[i].addEventListener("ended", eventHandler, false); } })(); </script> |
And Name this tag as “cHTML – HTML5 Video Listener”.
Add Google Tag Manager code into
& .This setting will help the browser to set variables about the current website that contains any video tag after the window load successfully. if true, the video listener script will apply to each video tag.
If the concept is fine, we are now to add 4 variables to pushing to GA Event.
We go to Variables > New:
Using Data Layer Variable, and name it video_status, folder name can use the same name, then press save.
Using Data Layer Variable, and name it video_provider, folder name can use the same name, then press save.
Using Data Layer Variable, and name it video_percent, folder name can use the same name, then press save.
Using Data Layer Variable, and name it video_title, folder name can use the same name, then press save.
After that, let go Triggers > New.
Name it as “Custom – Video Interaction”
We are choosing the trigger type “Custom Event”
Set Event name to “video”
this trigger fire on “All Custom Events” is fine.
If you added the trigger item. let do the last setting.
go to Tags > New
and choosing GA4 event
Name it as “GA4 event – video”
Configuration Tag is “None – Manually Set ID”
(Go to Google Analytics > Admin > Data Streams > Web > copy the measurement id) if there is empty please add a new stream for it.
Event Name is “video_{{video_status}}”
Add 3 more item to Event Parameters
Parameter Name Value
video_provider {{video_provider}}
video_percent {{video_percent}}
video_title {{video_title}}
Apply Triggering for this tag “Custom – Video Interaction”
Done.
Reference Link Here Analytics mania