google-analytics - 使用 Youtube Api 和 Google Analytics 跟踪多个 Youtube 视频

Question

因此，我已成功为使用 Youtube Api 显示的一个视频设置了 Google Analytics(分析)跟踪。但是，当我在同一页面上有多个视频时，事件跟踪将停止工作。

这是我的代码:

<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>

有人能解决这个问题吗？

Answer 1

函数 onPlayerStateChange 直接引用第一个玩家。

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

因此，所有事件都归因于玩家，而没有事件归因于玩家2或玩家3。

我认为而不是:

player.getVideoUrl()

您想使用:

event.target.getVideoUrl()

仅供引用，我发现对于调试这样的 GA 代码，使用 Google Analytics Debugger 非常有帮助。