Jak naprawić kod JavaScript JavaScript Tracking, który nie działa poprawnie

Question

Mam kod JavaScript, który znalazłem online, który dostarcza statystyki do google analytics dla mojego wideo HTML5. Kod jednak tylko CORRECTLY wyświetla statystyki "wideo odtwarzane" i "wideo wstrzymane", ale pozostałe informacje nie będą wyświetlane ani nawet obliczać. Reszta informacji jest:

„25% wideo oglądał” „50% wideo oglądał” „75% wideo oglądał” „100% obejrzanego filmu wideo”.

Jak uzyskać prawidłowy kod? Czy Google Analytics to jedyny sposób śledzenia statystyk lub czy istnieje inny sposób?

<script type="text/javascript"> 
 
     document.addEventListener('DOMContentLoaded', init, false) 
 
var videoId = document.getElementById('bigvid3') 
 
var videoTitle = videoId.getAttribute('data-description') 
 
var videoTitle = 'bigvid3' 
 

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

 
} 
 

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

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

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

 
function videoPause() { 
 
\t ga('send', 'event', 'video', 'video paused', videoTitle) 
 
} 
 
     
 
function videoTimeUpdate() { 
 
\t ga('send', 'event', 'video', '25% video played', '50% video played', '75% video played', videoTitle) 
 
} 
 
     
 
function videoTimeUpdate() { 
 
\t ga('send', 'event', 'video', '25% video played', videoTitle) 
 
} 
 

 
function videoTimeUpdate() { 
 
\t ga('send', 'event', 'video', '50% video played', videoTitle) 
 
} 
 
     
 
function videoTimeUpdate() { 
 
\t ga('send', 'event', 'video', '75% video played', videoTitle) 
 
} 
 
     
 
function videoEnd() { 
 
\t ga('send', 'event', 'video', '100% video played', videoTitle) 
 
} 
 
    </script>

Answer 1

Wystarczy więc, że jesteś świadomy, ten sam kod jeszcze ustalona won” t działa. W tym jest naprawdę fajny tutorial, ale wydaje się, że znalazłeś niewłaściwą. Zrobię co w mojej mocy, aby uprościć proces dla ciebie.

Najpierw niech ustalić kod w oryginalne pytanie:

<script type="text/javascript"> 
 
     document.addEventListener('DOMContentLoaded', init, false) 
 
var videoId = document.getElementById('bigvid3') 
 
//var videoTitle = videoId.getAttribute('data-description') 
 
var videoTitle = 'bigvid3' 
 

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

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

 
function videoTimeUpdate() { 
 
    var curTime = videoId.currentTime.toFixed(1) 
 

 
    if (curTime > sessionStorage.getItem('one') && sessionStorage.getItem('one') != null) { 
 
     ga('send', 'event', 'video', '25% video played', videoTitle) 
 
     sessionStorage.setItem('one', null) 
 
    } else if (curTime > sessionStorage.getItem('two') && sessionStorage.getItem('two') != null) { 
 
      ga('send', 'event', 'video', '50% video played', videoTitle) 
 
      sessionStorage.setItem('two', null) 
 
    } else if (curTime > sessionStorage.getItem('three') && sessionStorage.getItem('three') != null) { 
 
      ga('send', 'event', 'video', '75% video played', videoTitle) 
 
      sessionStorage.setItem('three', null) 
 

 
    } 
 

 

 
function videoEnd() { 
 
\t ga('send', 'event', videoCategory, '100% video played', videoTitle); 
 

 
} 
 

 
function videoPlay() { 
 
\t ga('send', 'event', videoCategory, 'video played', videoTitle); 
 

 
\t setKeyFrames(this.duration); 
 
} 
 

 
function videoPause (video) { 
 
         var pauseCurTime = videoId.currentTime, 
 
         pauseDuration = videoId.duration; 
 
         ga('send', 'event', videoCategory, 'video paused', videoTitle); 
 
} 
 
    </script>

Następnym krokiem jest dodanie google menedżera tag znaczników po tagu ciała otwarcie strony, na której film jest znaleźć :

<!-- Google Tag Manager --> 
 
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=emblem" 
 
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 
 
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 
 
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 
 
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 
 
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 
 
})(window,document,'script','dataLayer','emblem');</script> 
 
<!-- End Google Tag Manager -->

Po skonfigurowaniu menedżera tagów Google, aby uruchamiać/wywoływać zdarzenia, należy zamienić emblemat świata na rzeczywisty emblemat menedżera znaczników Google znajdujący się w lewym górnym rogu strony.

Wreszcie Dodaj znaczników aby uzyskać funkcjonalność szukasz:

<script> 
 
// Let's wrap everything inside a function so variables are not defined as globals 
 
(function(){ 
 
    // This is gonna our percent buckets (25%-75%) 
 
    //Change the variable "divisor" to create different multiples to track smaller %'s like 10% etc. 
 
    var divisor = 25; 
 
    // We're going to save our players status on this object. 
 
    var videos_status = {}; 
 
    // This is the funcion that is gonna handle the event sent by the player listeners 
 
    function eventHandler(e){ 
 
     switch(e.type) { 
 
      // This event type is sent everytime the player updated it's current time, 
 
      // We're using for the % of the video played.  
 
     case 'timeupdate':  
 
      // Let's set the save the current player's video time in our status object    
 
      videos_status[e.target.id].current = Math.round(e.target.currentTime);  
 
      // We just want to send the percent events once  
 
      var pct = Math.floor(100 * videos_status[e.target.id].current/e.target.duration);    
 
      for (var j in videos_status[e.target.id]._progress_markers) { 
 
      if (pct >= j && j > videos_status[e.target.id].greatest_marker) { 
 
    \t \t \t videos_status[e.target.id].greatest_marker = j; 
 
      } 
 
      } 
 
     // current bucket hasn't been already sent to GA?, let's push it to GTM 
 
     if (videos_status[e.target.id].greatest_marker && !videos_status[e.target.id]._progress_markers[videos_status[e.target.id].greatest_marker]) { 
 
      videos_status[e.target.id]._progress_markers[videos_status[e.target.id].greatest_marker] = true; 
 
      dataLayer.push({ 
 
       'event': 'gaEvent', 
 
       'gaEventCategory': 'HTML5 Video', 
 
       'gaEventAction': 'Progress_' + videos_status[e.target.id].greatest_marker + '%', 
 
       // We are using sanitizing the current video src string, and getting just the video name part 
 
       'gaEventLabel': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1]) 
 
      }); 
 
     } 
 

 
    break; 
 
    // This event is fired when user's click on the play button 
 
    case 'play': 
 
     dataLayer.push({ 
 
      'event': 'gaEvent', 
 
      'gaEventCategory': 'HTML5 Video', 
 
      'gaEventAction': 'Play', 
 
      'gaEventLabel': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1]) 
 
     }); 
 

 
     break; 
 
     // This event is fied when user's click on the pause button 
 
    case 'pause': 
 
     dataLayer.push({ 
 
      'event': 'gaEvent', 
 
      'gaEventCategory': 'HTML5 Video', 
 
      'gaEventAction': 'Pause', 
 
      'gaEventLabel': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1]), 
 
      'gaEventValue': videos_status[e.target.id].current 
 
     }); 
 
     break; 
 
     // If the user ends playing the video, an Finish video will be pushed (This equals to % played = 100) 
 
    case 'ended': 
 
     dataLayer.push({ 
 
      'event': 'gaEvent', 
 
      'gaEventCategory': 'HTML5 Video', 
 
      'gaEventAction': 'Finished', 
 
      'gaEventLabel': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1]) 
 
     }); 
 
     break; 
 
    default: 
 
     break; 
 
     } 
 

 
    } 
 
     // We need to configure the listeners 
 
     // Let's grab all the the "video" objects on the current page  
 
     var videos = document.getElementsByTagName('video'); 
 
     for (var i = 0; i < videos.length; i++) { 
 
      // In order to have some id to reference in our status object, we are adding an id to the video objects 
 
      // that don't have an id attribute. 
 
      var videoTagId; 
 
      if (!videos[i].getAttribute('id')) { 
 
       // Generate a random alphanumeric string to use is as the id 
 
       videoTagId = 'html5_video_' + Math.random().toString(36).slice(2); 
 
       videos[i].setAttribute('id', videoTagId); 
 
      } 
 
      // Current video has alredy a id attribute, then let's use it :) 
 
      else { 
 
       videoTagId = videos[i].getAttribute('id'); 
 
      } 
 

 
      // Video Status Object declaration 
 
      videos_status[videoTagId] = {}; 
 
      // We'll save the highest percent mark played by the user in the current video. 
 
      videos_status[videoTagId].greatest_marker = 0; 
 
      // Let's set the progress markers, so we can know afterwards which ones have been already sent. 
 
      videos_status[videoTagId]._progress_markers = {}; 
 

 
      for (j = 0; j < 100; j++) { 
 
       videos_status[videoTagId].progress_point = divisor * Math.floor(j/divisor); 
 
       videos_status[videoTagId]._progress_markers[videos_status[videoTagId].progress_point] = false; 
 
      } 
 
      // On page DOM, all players currentTime is 0  
 
      videos_status[videoTagId].current = 0;  
 
      // Now we're setting the event listeners.  
 
      videos[i].addEventListener("play", eventHandler, false);  
 
      videos[i].addEventListener("pause", eventHandler, false);  
 
      videos[i].addEventListener("ended", eventHandler, false);  
 
      videos[i].addEventListener("timeupdate", eventHandler, false);  
 
      videos[i].addEventListener("ended", eventHandler, false); 
 
     } 
 
})(); 
 
</script>

Trzeba będzie dodać znaczniki do google kierownika tag nie strony, na której znajduje się film i ustaw parametry. Jest to uproszczona wersja this tutorial. Jeśli zrobisz to dobrze, dostaniesz to, czego potrzebujesz.

Ostatnia rzecz. Nie widzę absolutnie nic złego w videoEnd. Powinno działać. Upewnij się, że Twój film nie jest ustawiony na LOOP, inaczej nigdy się nie skończy i nie zarejestruje się. Poza tym nie widzę żadnej innej możliwości, że się nie zarejestruję.

Answer 2

problemem jest to, że curTime dostajesz prawdopodobnie nie będzie dokładnie odpowiadać wartości, które zostały ustawione w zmiennych sesyjnych. co chcesz zrobić (przed ich wyczyszczenie) to, czy wartość jest większa niż to, co masz sprawdzanie ... coś takiego:

function videoTimeUpdate() { 
    var curTime = videoId.currentTime.toFixed(1) 

    if (curTime > sessionStorage.getItem('one') && sessionStorage.getItem('one') != null) { 
     ga('send', 'event', 'video', '25% video played', videoTitle) 
     sessionStorage.setItem('one', null) 
    } else if (curTime > sessionStorage.getItem('two') && sessionStorage.getItem('two') != null) { 
      ga('send', 'event', 'video', '50% video played', videoTitle) 
      sessionStorage.setItem('two', null) 
    } else if (curTime > sessionStorage.getItem('three') && sessionStorage.getItem('three') != null) { 
      ga('send', 'event', 'video', '75% video played', videoTitle) 
      sessionStorage.setItem('three', null) 

    } 

}