这一篇介绍如何用Google Tag Manager对H5视频做跟踪。
如果是对Youtube视频做跟踪，延伸阅读：Google Analytics 4 中对YouTube视频做跟踪两种方法。
什么是H5视频
HTML5 规定了一种通过video 元素来包含视频的标准方法，是目前网站主流的视频播放方式。
你可以查看视频的源码，它的结构是<video></video>的形式就表示是H5视频：
<video controls="controls" width="320" height="240"> <source src="movie.mp4" type="video/mp4" /> </video>
或是可以在浏览器开发者工具的控制台里使用document.getElementsByTagName(‘video’).length查看，如果有数值，就表示页面有H5视频。
跟踪的原理
H5视频可以通过Dom进行控制。
页面加载的时候，判断页面是否有视频，有就加载H5视频的监听代码，触发了事件，就用dataLayer发送事件。
监听代码如下：
<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 <a href="https://www.ichdata.com/tag/gtm" title="查看更多关于GTM的文章" target="_blank">GTM</a>
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>
目前监听代码支持开始播放，暂停，播放结束，播放进度（25%，50%，75%）
配置案例
配置主要分两步，第一步是配置H5视频的监听代码，第二步是配置视频事件
Step 1 ：配置H5视频的监听代码
变量
在GTM中点击「变量」——「新建」——「选择一个变量类型以开始设置…」——「自定义 JavaScript」，命名为“cjs – is HTML5 Video on a page”，然后做如下设定：
这个变量的作用是判断页面是否有视频。
触发器
在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置…」——「窗口已加载」，命名为“Pageview – HTML5 Video Player is Present”，然后做如下设定：
选择DOM 已准备就绪还是窗口已加载，如果页面，视频加载比较快，选择DOM 已准备就绪，如果比较慢，选择窗口已经加载，这个设置要确保cjs – is HTML5 Video on a page是true，也就是页面有视频，才触发。
监听代码
在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「自定义 HTML」，命名为“cHTML – HTML5 Video Listener”，做如下设置：
这个代码实现的作用是：页面加载的时候，判断页面是否有视频，有就加载H5视频的监听代码。
Step 2 ：配置视频事件
接下来就是配置视频事件。
数据层变量
dataLayer发送的数据层信息如：
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])
要用数据层变量将video_status、video_provider、video_percent和video_title获取，以为video_status是例子，在GTM中点击「变量」——「新建」——「选择一个变量类型以开始设置…」——「数据层变量」，命名为“video_status”，然后做如下设定：
其余三个同样设置，设置后有4个数据层变量：
触发器
在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置…」——「自定义事件」，命名为”video”,然后做如下设定：
视频事件
在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics：GA4 事件」，命名为“GA4-Event-Video Tracking”，做如下设置：
Step 3 ：预览测试
然后就是测试，GTM中点击「预览」，然后模拟行为，返回到Tag Assistant看：
事件正常触发，发送的数据准确，跟踪没问题。
参考：Google Tag Manager中做预览调试（用Tag Assistant）
Step 4 ：注册事件参数
在视频事件里，设置了三个事件参数，video_provider、video_title和video_percent和，需要在GA4里注册后才可以使用。
以video_provider为例，在GA4中点击「管理」——「自定义设置」——「创建自定义维度」，然后做如下设置：
Step 5 ：查看数据
在GA4的事件报告里：
