教程：用GA和GTM跟踪网站上的视频播放事件

视频作为重要的多媒体元素在许多网站上被部署，它对提升转化率有着非常积极的作用。由于很多情况下我们会使用第三方视频托管，如何跟踪用户对这些视频元素的反应是用户是否接受你的产品的指标之一。在国外常用的是Youtube，Vimeo和Wistia，国内最多见的是Youku。为了方便教程本编文章我们只用Wistia和Youku作代表。

 

跟踪Wistia视频播放

我们先讲Wistia，因为它的API比Youku丰富得多。为什么要用GTM呢？GTM对于动态地插入跟踪代码有很好的灵活性。假设你运营一个论坛，你可以只在用户上传视频的页面插入跟踪代码。在此之前我们已经介绍过利用Universal Analyitics和GTM进行用户级别的跟踪了，想必一定得心应手了。现在介绍一下整体思路。

[toggles class=”yourcustomclass”]

[toggle title=”首先你要判断是否页面上有视频，你可以判断一个DOM元素是否具有某个属性来识别。这里需要一个在每个页面都触发的宏（macro）。” class=”in”]具体做法是添加一个“Wistia Video Exist”的宏，类型是Custom Javascript。如下图：

[/toggle]
[toggle title=”其次如果上述标签返回“true”，你将会看到某一个宏（macro）的值为“true”。接着触发下一个标签（tag）即我们的跟踪代码。”]下图是一个rule，查看上述宏的值，如果为true则触发跟踪代码：

[/toggle]
[toggle title=”这个跟踪代码标签会监听播放器事件，把“播放”，“停止”，“15秒”，“25%”，“50%”，“75%”，“100%”这些事件推送到数据层（data layer）。”]跟踪代码通过监听Wistia的JS API事件推送给数据层：

[/toggle]
[toggle title=”当数据层被推送时，推送了4个数据：”]

event，是GTM默认的宏，同时也是数据层默认的变量。你可以直接推入。下图中就是event变动时触发最终UA标签的rule：

event category，这是GA的必选参数，你要再建一个宏来获取数据层的变量。

event action，同上。

event label，同上。

[/toggle]

[toggle title=”当event为“GAevent”时（rule），触发一个GA标签（tag）。把上述3个宏推入。”]这里就是一个标准的UA标签了，触发的条件为Video Event Firing rule：

[/toggle]

[/toggles]

上述就是在Wistia中实现跟踪用户播放行为的方法。当插入视频时，会调用Wistia的API，代码如下：

[notification type=”alert-info” close=”false” ]<div id=”wistia_ryantprymg” class=”wistia_embed” style=”width: 640px; height: 360px;”>视频加载中</div>
<script src=”//fast.wistia.com/assets/external/E-v1.js” charset=”ISO-8859-1″></script>

<script>// <![CDATA[wistiaEmbed = Wistia.embed(“ryantprymg”);// ]]></script>[/notification]

页面加载时class的值wistia_embed会被检索到。

跟踪优酷视频播放

优酷视频的做法和前者非常相似，但又有很大不同。简单介绍一下。由于优酷至今还只能嵌入Flash播放器，JS API的播放事件也不是很全，我们只能拿到一些基本的事件：加载，播放，结束。如果你未用GTM，你只要在3个回调函数里调用GA的Event推入即可。而如果你使用了GTM，那你要做的仅仅是将数据推入到数据层，并将宏event赋值为GAevent，剩下的和上文讲的Wistia用法完全一样，还免去了查找视频的麻烦。不过每次嵌入视频都要插入回调函数代码。

值得注意的是，虽然我们可以在一个页面插入多个视频，但是加载后回调时vid却只能有一个。也就是说目前仅能够跟踪最后一个载入的视频。如果你有更好的方法，请回复告知。谢谢。另外吐槽一下，YK真的很贵！

其他第三方视频的跟踪

其他视频的跟踪的总体思路一样，关键是在播放事件的回调函数中将Event各参数推入数据层，同时利用宏event触发UA或者GA推送。如果你对跟踪YouTube感兴趣，请参考这篇文章。