跟踪"视频时长已观看"来自JavaScript的分析

时间:2015-08-12 12:04:08

标签: javascript ruby-on-rails ajax event-tracking

我想跟踪每个用户的视频观看次数,并在数据库中使用名为Viewings的表格。它同时属于用户和视频,并记录观看的持续时间和已完成视频的百分比。

当点击播放按钮时,我想要找到一个基于id的现有Viewing,它存储在一个30分钟的持久cookie中(在首次点击播放按钮时创建,如果cookie没有&# 39; t已存在)。然后,我想使用length事件监听器定期更新用户观看视频的每10秒Viewing timeupdate lengthWatched属性。

我有一个JavaScript函数,它以整数形式返回video.addEventListener 'timeupdate', ((e) -> console.log(lengthWatched(e)); return ), false ,表示当前视频中的秒数。

我已经过测试,确保使用以下功能:

length

所以现在我所要做的就是在此函数返回一个可被10整除的整数时更新#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

我非常确定我必须在这里使用AJAX。但是我不太确定进入下一步的最佳方式,或者即使有更好的方法来记录这些数据。

有什么建议吗?

修改

使用 agmcleod 和我自己的一些建议,我最终得到了这些有用的JS:

timeupdate

基本上使用 agmcleod 提供的相同控制器。我仍然在努力修复max_duration_reached每1秒才会命中一次,但我确信它会相当简单。也可以添加function showAllVesselsProductsParent() { confirm ("test1"); showAllVessels('regular', 'vesselsExpandDown', 'vesselsExpandUp'); confirm ("test2"); showAllVessels('composite', 'compVesselsExpandDown', 'compVesselsExpandUp'); } function showAllVessels(type, div1, div2){ confirm(type+"===="+div1+"======="+div2); var tableId = ""; if(type=="regular"){ confirm ("First Time"); tableId = "vesselsTable"; }else if(type=="composite") { confirm ("Second Time"); tableId = "compositeVesselsTable"; } var vesselsTable = document.getElementById(tableId); var vesselCount = vesselsTable.rows.length-1; if(vesselCount>0){ var vesselId = ""; if(type=='regular'){ confirm ("regular"); vesselId = "vessel"; }else{ confirm ("compVessel"); vesselId = "compVessel"; } for(i=0;i<vesselCount;i++){ if(type=='regular'){ var isDeleted = document.getElementById("addJobVessels["+i+"].isDeleted").value; if(isDeleted != "true"){ confirm ("1"); document.getElementById(vesselId+i).style.visibility = "visible"; document.getElementById(vesselId+i).style.display = "block"; document.getElementById(div1).style.visibility = "visible"; document.getElementById(div2).style.visibility = "hidden"; } }else{ confirm ("2"); document.getElementById(vesselId+i).style.visibility = "visible"; document.getElementById(vesselId+i).style.display = "block"; document.getElementById(div1).style.visibility = "visible"; document.getElementById(div2).style.visibility = "hidden"; } } } }

1 个答案:

答案 0 :(得分: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请求(表单更新)。希望对你有帮助。