用Google Tag Manager对H5视频做跟踪(GA4)

Google Analytics 4 Haran 4个月前 (08-08) 919次浏览 0个评论

这一篇介绍如何用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 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>

 

目前监听代码支持开始播放,暂停,播放结束,播放进度(25%,50%,75%)

配置案例

配置主要分两步,第一步是配置H5视频的监听代码,第二步是配置视频事件

Step 1 :配置H5视频的监听代码

变量

在GTM中点击「变量」——「新建」——「选择一个变量类型以开始设置…」——「自定义 JavaScript」,命名为“cjs – is HTML5 Video on a page”,然后做如下设定:用Google Tag Manager对H5视频做跟踪(GA4)

这个变量的作用是判断页面是否有视频。

触发器

在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置…」——「窗口已加载」,命名为“Pageview – HTML5 Video Player is Present”,然后做如下设定:

用Google Tag Manager对H5视频做跟踪(GA4)

选择DOM 已准备就绪还是窗口已加载,如果页面,视频加载比较快,选择DOM 已准备就绪,如果比较慢,选择窗口已经加载,这个设置要确保cjs – is HTML5 Video on a page是true,也就是页面有视频,才触发。

监听代码

在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「自定义 HTML」,命名为“cHTML – HTML5 Video Listener”,做如下设置:

用Google Tag Manager对H5视频做跟踪(GA4)

这个代码实现的作用是:页面加载的时候,判断页面是否有视频,有就加载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”,然后做如下设定:用Google Tag Manager对H5视频做跟踪(GA4)

其余三个同样设置,设置后有4个数据层变量:

用Google Tag Manager对H5视频做跟踪(GA4)

触发器

在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置…」——「自定义事件」,命名为”video”,然后做如下设定:用Google Tag Manager对H5视频做跟踪(GA4)

 

视频事件

在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics:GA4 事件」,命名为“GA4-Event-Video Tracking”,做如下设置:

用Google Tag Manager对H5视频做跟踪(GA4)

 

Step 3 :预览测试

然后就是测试,GTM中点击「预览」,然后模拟行为,返回到Tag Assistant看:用Google Tag Manager对H5视频做跟踪(GA4)

事件正常触发,发送的数据准确,跟踪没问题。

参考:Google Tag Manager中做预览调试(用Tag Assistant)

 

Step 4 :注册事件参数

在视频事件里,设置了三个事件参数,video_provider、video_title和video_percent和,需要在GA4里注册后才可以使用。

以video_provider为例,在GA4中点击「管理」——「自定义设置」——「创建自定义维度」,然后做如下设置:

用Google Tag Manager对H5视频做跟踪(GA4)

Step 5 :查看数据

GA4的事件报告里:

用Google Tag Manager对H5视频做跟踪(GA4)

 

 

 


如有疑问,可以在文章底部留言或邮件(haran.huang@ichdata.com) 我~
喜欢 (2)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址