如何跟踪用户观看了多少 youtube 视频？答案

【问题标题】：How to track how much of a youtube video the user has watched?如何跟踪用户观看了多少 youtube 视频？
【发布时间】：2014-07-29 16:28:35
【问题描述】：

我需要跟踪用户在我的网站上观看了多少嵌入式 youtube 视频。我需要它以视频长度的 25%、50%、75% 和 100% 触发标签。它应该与滚动页面轨道类似。

我对网站的唯一访问是通过 Googletag manager，所以任何解决方案都必须通过那里。

我已经研究过，显然有一些方法可以使用 youtube api 来做到这一点。我什至尝试了这个分步指南：http://www.cardinalpath.com/youtube-video-tracking-with-gtm-and-ua-a-step-by-step-guide/ 但它没有用。

我想问题是该网站使用 fancybox 播放视频。以下是该网站的代码：

我不知道从哪里开始。

【问题讨论】：

嗯，你试过用谷歌搜索吗？ cardinalpath.com/… 应该足够了。
很好，您在没有回复我的评论的情况下编辑了您的问题，所以当您在描述中提到 cardinalpath 时，它现在看起来很糟糕。由于您在实施此跟踪时遇到问题，也许您应该切换到 wistia.com，以便获得非常详细的视频跟踪，您还可以在视频的特定时间添加表单等？
经常有人让我根据cmets编辑问题。我只能通过 Googletag manager 访问该网站，我无法更改视频...

标签： google-tag-manager

【解决方案1】：

请看一下

Track YouTube Video Playback with jQuery and Google Analytics Events

https://developers.google.com/youtube/js_api_reference

您需要跟踪当前播放时间，获取总播放时间，然后将其转换为百分比。

使用无铬播放器并使用 youtube js api。请参阅 Playback_status 方法。我同意设置一个计时器。但是，我强烈推荐您使用 js api 中的方法和回调。

你可能不得不使用

onStateChange 事件获取持续时间（）获取当前时间（）

您可能需要 onStateChange 包装器中的那些或更好的东西。

function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("myytplayer");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
   alert(ytplayer.getDuration()+ytplayer.getCurrentTime());
}

在播放器状态更改时，您可以在其中触发自己的方法。

这不是一个有效的例子，但我希望你能得到我的答案。模式/弹出框与获取所需数据无关。您只需要使用 chromeless 播放器和 YT js api 与您的 jQuery 插件协调工作。有一些 jQuery 插件是多种视频共享技术的 API 包装器。

Bower 和 Google 是您的朋友！

http://bower.io/search/?q=youtube

【讨论】：

【解决方案2】：

另一个值得研究的选项，如果 YouTube 不是您唯一的选择，我很确定 Vimeo 和 Wistia 都内置了这些功能并且嵌入起来非常简单

【讨论】：

【解决方案3】：

您可以做的是在获取您的视频时请求视频的长度。然后将该数字相应地划分为 25%、50%、75% 和 100%。

您可以尝试在播放视频的同时设置一个计时器，然后在事先计算好的不同时间调用标签。

希望这会有所帮助！

【讨论】：

我通常会接受这个作为答案，但我已经为此花费了 100 点声誉。可以请扩展您的答案吗？