Google Tag Manager中的YouTube视屏触发器

GTM实战指南 GA小站 310次浏览 已收录 2个评论

Google Tag Manager刚刚发布了YouTunbe视频播放触发器,给你跟踪YouTube视频播放提供了丰富的支持,这个功能非常棒,即使我们对Cardinal Path 和 LunaMetrics提供的一些跟踪方案已经很满意的,但是这个原生的功能更加简便。
Google Tag Manager中的YouTube视屏触发器
Youtube视频触发器的设置相当丰富,这正是我所期望的。它内置很多事件跟踪,如开始播放,播放进度(如255,50%,75%等)和播放结束。,如果你还没有使用,你可以再嵌入的youtube链接上加入enablejsable=1这个查询参数去开启。
Youtube视频触发器支持延迟加载和动态加载视频的跟踪,这可以减缓站点视屏加载的时间知道用户有交互的行为。

创建和配置触发器
创建触发器,你只需要在Google Tag Manager的交互界面点击新建一个触发器,然后下拉,你会发现YouTuebe触发器就差不多在最下面
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,视频事件发生是在浏览器是否可见。

另一个让你惊喜的是内置变量有上述数据层的所有信息,你可以通过点击内置变量中的配置,然后勾选对应的上述数据层中的变量。
Google Tag Manager中的YouTube视屏触发器

简要介绍触发器里的”进度”
还记那个哪个可以监控视屏播放时长和百分比的“进度”吗?
如果你将触发器设置在25%,50%和75%,即使用户没有从头开始播放,只要到达这个百分点位置,事件就会触发,比用户直接快进到25%的位置,那么25%这个事件就会被触发。

延时也同理。

你可以通过视屏时间去看用户最近一次暂停后的播放时间,直接用时间和百分之只能知道视频的播放位置。

将所有事件的都一起跟踪
既然Youtube视频触发器有包含那么多的事件,这里将展示用一个代码促发所有的,代码的设置如:
Google Tag Manager中的YouTube视屏触发器
触发器里的设置如:
Google Tag Manager中的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


GA小站, 版权所有丨如未注明 , 均为原创

转载请注明标题:Google Tag Manager中的YouTube视屏触发器
链接:https://www.ichdata.com/the-youtube-video-trigger-in-google-tag-manager.html

喜欢 (0)
[hyz1100@126.com]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 我之前想写这个来着~
    Arya2017-09-14 23:58 回复
    • 继续写,多些参考
      GA小站2017-09-15 10:14 回复