イベント発生時にGAのラベルが設定されていません

Question

私が取り組んでいるプロジェクトで助けが必要です。再生リストを含むHTML5動画を作成しました.GAで複数のラベルを設定する際に問題が発生するため、個々の動画の再生を追跡できます。私はコードをオンラインで見つけましたが、それをビデオプレーヤーに変更する際にいくつかの問題がありました。私は属性のデータ記述としてラベルを設定できるようにしたいと考えています。 https://jsfiddle.net/2zkyh1f2/

コードは以下の通りです：

<section id="video-container"> 
     <video id="video-player" controls="controls" poster="" src="" data-description=""></video> 

     <div id="description" label="" type="text"> </div> 

     <ul id="playlist"> 
      <li id="videoweek" data-description movieurl="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" label="This is video number 1 " type="video/mp4" moviesposter="http://html5videoformatconverter.com/data/images/screen.jpg"> 
       <img src="http://html5videoformatconverter.com/data/images/screen.jpg" class="video-thumbnail"> 

      </li> 
      <li id="videoweek" data-description="video 1" movieurl="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" label="This is video number 2 " type="video/mp4"> <img src="http://html5videoformatconverter.com/data/images/screen.jpg" class="video-thumbnail"></li> 

      <li id="videoweek" data-description="video 2"n movieurl="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" label="This is video number 3 " type="video/mp4"> <img src="http://html5videoformatconverter.com/data/images/screen.jpg" class="video-thumbnail"></li> 

       <li id="videoweek" data-description="video 3" movieurl="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" label="This is video number 4 " type="video/mp4"> <img src="http://html5videoformatconverter.com/data/images/screen.jpg" class="video-thumbnail"></li> 

       <li id="videoweek" data-description="video 4" movieurl="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" label="This is video number 5 " type="video/mp4"> <img src="http://html5videoformatconverter.com/data/images/screen.jpg" class="video-thumbnail"></li> 


     </ul> 



    </section> 
$(function() { 
$("#playlist li").on("click", function() { 
    $("#video-player").attr({ 
     "src": $(this).attr("movieurl"), 
     "poster": "", 
     "autoplay": "autoplay", 
     "data-description": $(this).attr("data-description") 
    }) 
}) 
$("#playlist li").on("click", function() { 
    $("#description").attr({ 
     "label": $(this).attr("label") 
    }).text($(this).attr("label")) 
}) 
$("#video-player").attr({ 
    "src": $("#playlist li").eq(0).attr("movieurl"), 
    "poster": $("#playlist li").eq(0).attr("moviesposter"), 
    "data-description": $("#playlist li").eq(0).attr("data-description") 
    }) 
}) 

document.addEventListener('DOMContentLoaded', init, false) 
     var videoId = document.getElementById('video-player') 
     //var videoTitle = $(this).attr('data-description') 


     var videoTitle = $('#videoweek').click(function() { 
          console.log($(this).attr('data-description')); 
         }); 
     console.log(videoTitle); 

     function init() { 
     videoId.addEventListener('ended', videoEnd, false) 
     videoId.addEventListener('timeupdate', videoTimeUpdate, false) 
     videoId.addEventListener('play', videoPlay, false) 
     videoId.addEventListener('pause', videoPause, false) 
     } 

     function setKeyFrames (duration) { 
     var quarter = (duration/4).toFixed(1) 
     sessionStorage.setItem('one', quarter) 
     sessionStorage.setItem('two', (quarter * 2).toFixed(1)) 
     sessionStorage.setItem('three', (quarter * 3).toFixed(1)) 
     } 

     function videoTimeUpdate() { 
      var curTime = videoId.currentTime.toFixed(1) 
      switch (curTime) { 
      case sessionStorage.getItem('one'): 
       ga('send', 'event', 'video', '25% video played', videoTitle) 
       sessionStorage.setItem('one', null) 
      case sessionStorage.getItem('two'): 
       ga('send', 'event', 'video', '50% video played', videoTitle) 
       sessionStorage.setItem('two', null) 
      case sessionStorage.getItem('three'): 
       ga('send', 'event', 'video', '75% video played', videoTitle) 
       sessionStorage.setItem('three', null) 
      } 
     } 

     function videoEnd() { 
     ga('send', 'event', 'video', '100% video played', videoTitle) 
     } 

     function videoPlay() { 
     ga('send', 'event', 'video', 'video played', videoTitle) 
     setKeyFrames(this.duration) 
     } 

     function videoPause() { 
     ga('send', 'event', 'video', 'video paused', videoTitle) 
     } 

Answer 1

あなたvideoTitleのちょうどマイナーな問題：

function videoTimeUpdate() { 
     var curTime = videoId.currentTime.toFixed(1); 
     var videoTitle = $(this).attr('data-description'); 
     switch (curTime) { 
      case sessionStorage.getItem('one'): 
       ga('send', 'event', 'video', '25% video played', videoTitle) 
       sessionStorage.setItem('one', null) 
      case sessionStorage.getItem('two'): 
       ga('send', 'event', 'video', '50% video played', videoTitle) 
       sessionStorage.setItem('two', null) 
      case sessionStorage.getItem('three'): 
       ga('send', 'event', 'video', '75% video played', videoTitle) 
       sessionStorage.setItem('three', null) 
     } 
    } 

    function videoEnd() { 
     ga('send', 'event', 'video', '100% video played', $(this).attr('data-description')) 
    } 

    function videoPlay() { 
     ga('send', 'event', 'video', 'video played', $(this).attr('data-description')) 
     setKeyFrames(this.duration) 
    } 

    function videoPause() { 
     ga('send', 'event', 'video', 'video paused', $(this).attr('data-description')) 
    }