1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to Fix HTML5 Video Javascript Tracking Code That is not Working Correctly

Discussion in 'JavaScript' started by royhenderson, Aug 19, 2016.

  1. #1
    Sup Everyone.

    I have a javascript code I found online that provides stats to google analytics for my HTML5 video. The code however only CORRECTLY displays stats for "video played" and "video paused" but the rest of the information won't display or even calculate. The rest of the info is:

    "25% video watched", "50% video watched", "75% video watched", "100% video watched".

    How can I get the code below working properly? Also, is google analytics the only way to track these stats or is there another way?

    Formality:

    <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)
        videoId.addEventListener('pause', videoPause, false)
        videoId.addEventListener('ended', videoEnd, false)
        videoId.addEventListener('timeupdate', videoTimeUpdate, 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 videoPlay () {
        ga('send', 'event', 'video', 'video played', videoTitle)
        setKeyFrames(this.duration)
    }
    
    function videoPause () {
        ga('send', 'event', 'video', 'video paused', videoTitle)
    }
         
    function videoTimeUpdate () {
        ga('send', 'event', 'video', '25% video played', '50% video played', '75% video played', videoTitle)
    }
         
    function videoTimeUpdate () {
        ga('send', 'event', 'video', '25% video played', videoTitle)
    }
    
    function videoTimeUpdate () {
        ga('send', 'event', 'video', '50% video played', videoTitle)
    }
         
    function videoTimeUpdate () {
        ga('send', 'event', 'video', '75% video played', videoTitle)
    }
         
    function videoEnd () {
        ga('send', 'event', 'video', '100% video played', videoTitle)
    }
        </script>
    Code (JavaScript):
     
    royhenderson, Aug 19, 2016 IP
  2. Blizzardofozz

    Blizzardofozz Well-Known Member

    Messages:
    132
    Likes Received:
    9
    Best Answers:
    1
    Trophy Points:
    118
    #2
    I have never tracked videos but the first thing I saw was that you have several functions with the same name and this will not work in JavaScript.
     
    Last edited: Sep 6, 2016
    Blizzardofozz, Sep 5, 2016 IP