Search code examples
javascriptjqueryyoutube-apiclick-tracking

Is there an onStateChange event only for initial video play?


Trying to implement Google Tracking on initial video play right now.

The API gives 6 states,

-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued).

but the state I'm using (1: playing) triggers on every video click. I only want to track the initial play event.

This is what I have so far.

asyncYouTubeApiLoad();
getVideoTrackingValues();


function getVideoTrackingValues() {
    $player = $('#player'),
    $yt_trackValue = $player.data('tracking-value');
}

executeYouTubeReady();

function executeYouTubeReady() {
    // Wait for API
    setTimeout(function() {
        onYouTubeIframeAPIReady();
    }, 200);
}

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerStateChange(event) {
    // On Play
    if (event.data = 1) {
        fireVideoEventTracking('video_play');
    }
    // On End
    else if (event.data = 0) {
        fireVideoEventTracking('video_complete');
    }
}

function fireVideoEventTracking(eventType) {
    _gaq.push(['_trackEvent', 'video', eventType, $yt_trackValue]);                    
}

Solution

  • Ended up adding a boolean to the onReady method and checking against that.

    var initialLoad = false;
    
        function onYouTubeIframeAPIReady() {
          player = new YT.Player('player', {
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
          });
        }
    
        function onPlayerReady() {
            initialLoad = true;
        }
    
        function onPlayerStateChange(event) {
            console.log(event.data);
            // On Play
            if (event.data == 1 && initialLoad) {
                fireVideoEventTracking('video_play');
                initialLoad = false;
            } else if (event.data == 0) {
                fireVideoEventTracking('video_complete');
            }
        }