跟踪来自 JavaScript 的 "video duration watched" 分析

Question

我想跟踪每个用户的视频观看次数，在名为 Viewings 的数据库中有一个 table。它既属于一个用户，也属于一个视频，记录了观看的时长，以及视频的完成百分比。

当播放按钮被点击时，我想要么根据 id 找到一个现有的 Viewing，它存储在一个 30 分钟的持久性 cookie 中（当第一次点击播放按钮时创建，如果一个 cookie尚不存在）。然后，我想使用 timeupdate 事件侦听器，在用户每观看视频 10 秒后定期更新此 Viewing 的 length 属性。

我有一个 JavaScript 函数，它 returns lengthWatched 作为一个整数，代表视频中当前有多少秒。

我已经测试以确保这适用于以下功能：

video.addEventListener 'timeupdate', ((e) ->
  console.log(lengthWatched(e));
  return
  ), false

所以现在我要做的就是更新 length 每当这个函数 returns 一个整数可以被 10 整除。

我很确定我必须在这里使用 AJAX。但我不太确定继续下一步的最佳方法，或者即使有更好的方法来完全记录这些数据。

有什么建议吗？

编辑：

使用 agmcleod 的建议和我自己的一些建议，我最终添加了这些有效的 JS：

#global variables
videoId = location['pathname'].split('/').pop()
viewingCookieName = "Video "+videoId.toString()

#taken from http://www.quirksmode.org/js/cookies.html for easy reading of cookies
readCookie = (name) ->
  nameEQ = name + '='
  ca = document.cookie.split(';')
  i = 0
  while i < ca.length
    c = ca[i]
    while c.charAt(0) == ' '
      c = c.substring(1, c.length)
    if c.indexOf(nameEQ) == 0
      return c.substring(nameEQ.length, c.length)
    i++
  null

video.addEventListener 'timeupdate', ((e) ->
  duration = lengthWatched(e)
  if (duration % 5 == 0)
    currentLength = 0
    $.get "/viewings/" + readCookie(viewingCookieName), (data) ->
      currentLength = data['length']
      return
    $.ajax(
      url: "/viewings/" + readCookie(viewingCookieName) + ".json"
      type: 'PUT'
      data: { viewing: {length: currentLength + 5}}
      dataType: 'json').success ->
        console.log('put')
  return
  ), false

#only including relevant code, took out other video play functionality
video.onplay = (e) ->
  unless readCookie(viewingCookieName)
    $.ajax(
      url: "/viewings.json"
      type: 'POST'
      data: { viewing: { video_id: videoId, user_id: gon.current_user_id } },
      dataType: 'json').success (data) ->
        viewingId = data['id']
        time = new Date(Date.now() + 1800000).toUTCString()
        document.cookie = viewingCookieName+"="+ data['id']+"; expires="+time
  return

基本上使用了 agmcleod 提供的相同控制器。我仍在努力将 timeupdate 修复为每 1 秒仅命中一次，但我相信这会相当简单。也可以添加 max_duration_reached.

Answer 1

Ajax 正是您所需要的。鉴于您正在使用 rails，我假设您正在使用 jquery。你可以这样做：

video.addEventListener 'timeupdate', ((e) ->
  duration = lengthWatched(e);
  console.log(duration);
  if (duration % 10 === 0)
    $.ajax({
      url: "/viewings/" + viewingsId + ".json",
      type: "PUT",
      data: { viewing: { length: duration } },
      dataType: "json"
    }).done(() -> {
      // callback
    });
  return
  ), false

抱歉，如果我的 coffeescript 关闭了，已经有一段时间了。无论如何，使用 PUT 将长度为属性的 json 正文发布到控制器端点（因为我们正在更新记录）。请务必从您的 cookie 中填充 viewingsId。

在路由方面，你可以在这里有一个标准资源：

 resources :viewings

然后在控制器中：

class ViewingsController < ApplicationController
  def update
    viewing = Viewing.find(params[:id])
    if viewing.update_attributes viewing_attributes
      respond_to do |format|
        format.html
        format.json { render json: viewing }
      end
    else
      respond_to do |format|
        format.html { redirect_to viewing }
        format.json { render errors: viewing.errors, status: 422 }
      end
    end
  end

private

  def viewing_attributes
    params.require(:viewing).permit(:length)
  end

end

强参数位是可选的，只是为了保持良好的做法。更新您可能需要的任何其他参数的许可。我编写了更新操作，因此它也可以处理 html 请求（表单更新）。希望对你有帮助。

跟踪来自 JavaScript 的 "video duration watched" 分析

Tracking "video duration watched" analytics from JavaScript

javascript

ajax

ruby-on-rails

event-tracking