Google Tag Manager刚刚发布了YouTunbe视频播放触发器,给你跟踪YouTube视频播放提供了丰富的支持,这个功能非常棒,即使我们对Cardinal Path 和 LunaMetrics提供的一些跟踪方案已经很满意的,但是这个原生的功能更加简便。
Youtube视频触发器的设置相当丰富,这正是我所期望的。它内置很多事件跟踪,如开始播放,播放进度(如25%,50%,75%等)和播放结束。,如果你还没有使用,你可以再嵌入的youtube链接上加入enablejsable=1这个查询参数去开启。
Youtube视频触发器支持延迟加载和动态加载视频的跟踪,这可以减缓站点视屏加载的时间知道用户有交互的行为。
创建和配置触发器
创建触发器,你只需要在Google Tag Manager的交互界面点击新建一个触发器,然后下拉,你会发现YouTube触发器就差不多在最下面
你选择Youtube视频触发器后就可以看到一个设置面板,接下来就开始配置,下面是可以配置的选项:
- 开始:收集用户点击开始播放视频
- 完成:收集用户播放视频到结束的
- 暂停、跳转和缓冲:收集用户暂停视频、跳转和缓冲视频的操作。
- 进度:收集视频的播放进度,可以是25%,50%和75%,或10秒,30秒,1分钟
- 为所有视频添加 JavaScript API 支持:如果你的嵌入youtube链接缺少必须的参数enablejsapi=1,那么开启这个功能将自动的给你的视频添加,需要注意的是,这个是通过加载iframe,所以用户可能在第一次加载的时候可能会感觉到闪速,配置这个的前提是页面需要加载这个库https://www.youtube.com/iframe_api。
下面是数据层中传递的能够被触发的YouTube事件。
- event: ‘gtm.video’ 这个事件名包含所有的推送如数据层的YouTube视频事件,这个就是Youtube触发器需要触发的。
- gtm.videoProvider: ‘youtube’定义跟踪哪个视频平台,类似的你可以跟踪其他平台,前提是该平台支持。
- gtm.videoStatus: ‘start’ 定义触发事件的视频状态,可以是’start’, ‘complete’, ‘pause’, ‘buffering’, 和’progress’。
- gtm.videoUrl: ‘https://www.youtube.com/watch?v=…’ 内嵌视屏原始网。
- gtm.videoTitle: ‘name’ 内嵌视频的名字。
- gtm.videoDuration: 197 视频长度,按秒算
- gtm.videoCurrentTime: 30 标记事件触发的时间
- gtm.videoElapsedTime: 10 最近一次暂停或缓存的时间
- gtm.videoPercent: 15 标记事件触发的播放比例
- gtm.videoVisible: true,设置为true或false,视频事件发生是在浏览器是否可见。
另一个让你惊喜的是内置变量有上述数据层的所有信息,你可以通过点击内置变量中的配置,然后勾选对应的上述数据层中的变量。
简要介绍触发器里的”进度”
还记那个哪个可以监控视屏播放时长和百分比的“进度”吗?
如果你将触发器设置在25%,50%和75%,即使用户没有从头开始播放,只要到达这个百分点位置,事件就会触发,比用户直接快进到25%的位置,那么25%这个事件就会被触发。
延时也同理。
你可以通过视屏时间去看用户最近一次暂停后的播放时间,直接用时间和百分之只能知道视频的播放位置。
将所有事件的都一起跟踪
既然Youtube视频触发器有包含那么多的事件,这里将展示用一个代码促发所有的,代码的设置如:
触发器里的设置如:
然后新建一个自定义js变量命名为JS – Get video action,代码如下:
function() { var status = {{Video Status}}; switch (status) { case 'start': return 'Start playing'; case 'pause': return 'Pause'; case 'buffering': return 'Buffering'; case 'progress': return 'Reached ' + {{Video Percent}} + '%'; case 'complete': return 'Reached the end'; } }
这个是将数据层视频对象中的参数转变成可读的形式,能被代码分别触发,其实类似对照表的作用。
跟踪延迟加载和动态加载视频
如果你的视频是在页面一打开就加载,那么后面的一切设置都是很简单的,开启触发器的为所有视频添加 JavaScript API 支持,GTM自动回处理后续的所有事宜。这个设置需要你加载一个api库,详细的见下面。
然而,越来越多的网站采用打开网页后直到用户有交互才加载视频,这种方式与前面的有很大的不同,幸运是Youtube视频触发器已经包含了这种情况,你只需要在页面打开的时候加载youtube api库:
<script src=”https://www.youtube.com/iframe_api”>
所以,不管你是延迟加载还是动态加载,你的页面上一定要加载上述的api库。
来源:https://www.simoahava.com