Tracking Multiple Youtube Videos with Youtube Api and Google Analytics

Question

So I've successfully setup Google Analytics tracking for one video displayed using the Youtube Api. However, when I have more than one video on the same page the event tracking stops working.

This is my code:

<div id="player"></div>
<div id="player2"></div>
<div id="player3"></div>
<script type="text/javascript">
    var tag = document.createElement('script');
    tag.src = "http://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    var player2;
    var player3;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
            playerVars: {
                modestbranding: true,
                theme: 'light',
                rel: 0,
                wmode: "opaque",
                autoplay: '0'
            },
            height: '480',
            width: '640',
            videoId: 'p01Sd5OzglI',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
        player2 = new YT.Player('player2', {
            playerVars: {
                modestbranding: true,
                theme: 'light',
                rel: 0,
                wmode: "opaque",
                autoplay: '0'
            },
            height: '480',
            width: '640',
            videoId: 'qLFQUdmAkcQ',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
        player3 = new YT.Player('player3', {
            playerVars: {
                modestbranding: true,
                theme: 'light',
                rel: 0,
                wmode: "opaque",
                autoplay: '0'
            },
            height: '480',
            width: '640',
            videoId: 'HP3vWQ_WRu8',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        /// event.target.playVideo(); 
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
            _gaq.push(['_trackEvent', 'Videos', 'Play',
            player.getVideoUrl()]);
        }
        if (event.data == YT.PlayerState.PAUSED) {
            _gaq.push(['_trackEvent', 'Videos', 'Paused',
            player.getVideoUrl()]);
        }
        if (event.data == YT.PlayerState.ENDED) {
            _gaq.push(['_trackEvent', 'Videos', 'Watch to End',
            player.getVideoUrl()]);
        }
    }
    // ]]>
</script>

Can anyone figure this out?

Answer 1

The function onPlayerStateChange references the first player directly.

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
            _gaq.push(['_trackEvent', 'Videos', 'Play',
            **player**.getVideoUrl()]);
        }
        // -- snip --
    }

So ALL the events are getting attributed to player, and NONE to player2 or player3.

I think that instead of:

player.getVideoUrl()

you want to use:

event.target.getVideoUrl()

FYI, I find that for debugging GA code like this, it is very helpful to use the Google Analytics Debugger