Google Tag Manager中的YouTube视屏触发器

Google Tag Manager刚刚发布了YouTunbe视频播放触发器，给你跟踪YouTube视频播放提供了丰富的支持，这个功能非常棒，即使我们对Cardinal Path 和 LunaMetrics提供的一些跟踪方案已经很满意的，但是这个原生的功能更加简便。

Youtube视频触发器的设置相当丰富，这正是我所期望的。它内置很多事件跟踪，如开始播放，播放进度（如255,50%,75%等）和播放结束。，如果你还没有使用，你可以再嵌入的youtube链接上加入enablejsable=1这个查询参数去开启。
Youtube视频触发器支持延迟加载和动态加载视频的跟踪，这可以减缓站点视屏加载的时间知道用户有交互的行为。

创建和配置触发器
创建触发器，你只需要在Google Tag Manager的交互界面点击新建一个触发器，然后下拉，你会发现YouTuebe触发器就差不多在最下面

你选择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”&gt;
所以，不管你是延迟加载还是动态加载，你的页面上一定要加载上述的api库。

来源：https://www.simoahava.com