How to Track Multiple Youtube Videos with Youtube Api and Google Analytics

时间：2015-05-08 09:52:14

标签： javascript google-analytics youtube youtube-api event-tracking

I have 11 Youtube videos in a page i wnat to track all of them using Youtube Api and Google Analytics below is what i have tried please help me how to debug using the Google Analytics Debugger and where i have gone wrong

I am using New analytics.js

HTML

<div style="margin-bottom: 24px;">
<iframe id="video01" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/xxx?enablejsapi=1" frameborder="0"></iframe>
<iframe id="video02" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/yyy?enablejsapi=1" frameborder="0"></iframe>
<iframe id="video03" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/zzz?enablejsapi=1" frameborder="0"></iframe>
<iframe id="video04" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/eee?enablejsapi=1" frameborder="0"></iframe>
<iframe id="video05" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/rrr?enablejsapi=1" frameborder="0"></iframe>
<iframe id="video06" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/www?enablejsapi=1" frameborder="0"></iframe>
<iframe id="video07" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/qqq?enablejsapi=1" frameborder="0"></iframe>
<iframe id="video08" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/bbb?enablejsapi=1" frameborder="0"></iframe>
<iframe id="video09" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/lll?enablejsapi=1" frameborder="0"></iframe>
<iframe id="video10" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/ooo?enablejsapi=1" frameborder="0"></iframe>
<iframe id="video11" style="margin-bottom: 16px; margin-right: 16px;" class="etib" width="340" height="220" src="https://www.youtube.com/embed/kkk?enablejsapi=1" frameborder="0"></iframe>
</div>

Java Script

$(function () {
try {
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var video01, video02, video03, video04, video05
    , video06, video07, video08, video09, video10, video11,
    playerInfoList =
    [
        { id: 'video01', height: '390', width: '640', videoId: 'ml_BgIm3FzY' }, { id: 'video02', height: '390', width: '640', videoId: 'hV__30BVW8U' },
        { id: 'video03', height: '390', width: '640', videoId: 'A9H93F-8WQk' }, { id: 'video04', height: '390', width: '640', videoId: 'C9N2Chg6E7A' },
        { id: 'video05', height: '390', width: '640', videoId: '-J07hSBRfL8' }, { id: 'video06', height: '390', width: '640', videoId: 'Faor8xaj5RI' },
        { id: 'video07', height: '390', width: '640', videoId: 'R2qR5atJQ6o' }, { id: 'video08', height: '390', width: '640', videoId: 'n-2q3cu5JNA' },
        { id: 'video09', height: '390', width: '640', videoId: 'g963TyA8bgc' }, { id: 'video10', height: '390', width: '640', videoId: '5p4PodfYQEQ' },
        { id: 'video11', height: '390', width: '640', videoId: 'Uba6pRWWr6o' }];

    function onYouTubeIframeAPIReady() {

        if (typeof playerInfoList === 'undefined')
            return;

        $.each(playerInfoList, function (index, playerInfo) {
            var video = playerInfo.id;

            video = createPlayer(playerInfo)
        });

        function createPlayer(playerInfo) {
            return new YT.Player(playerInfo.id, {
                height: playerInfo.height,
                width: playerInfo.width,
                videoId: playerInfo.videoId,
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
    }

    // The API will call this function when the video player is ready.
    function onPlayerReady(event) {
        event.target.playVideo();
    }
    // The API calls this function when the player's state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.
    var pauseFlag = false;
    function onPlayerStateChange(event) {
        // track when user clicks to Play
        if (event.data == YT.PlayerState.PLAYING) {
            _gaq.push(['_trackEvent', 'Videos', 'Play', 'Test Video']);
            pauseFlag = true;
        }
        // track when user clicks to Pause
        if (event.data == YT.PlayerState.PAUSED && pauseFlag) {
            _gaq.push(['_trackEvent', 'Videos', 'Pause', 'Test Video']);
            pauseFlag = false;
        }
        // track when video ends
        if (event.data == YT.PlayerState.ENDED) {
            _gaq.push(['_trackEvent', 'Videos', 'Finished', 'Test Video']);
        }
    }

}
catch (Exception) { }
});

I am seeing this in console section

enter image description here

1 个答案:

答案 0 :(得分：0)

我刚刚与另一个类似的问题分享了这个问题，所以虽然它使用了jQuery，但希望它可以解决你的问题。我对其进行了更改，以便使用较旧的_gaq.push()方法将Google Analytics与您的问题相匹配。

这是我提出的一个脚本，可以在页面上使用任意数量的嵌入式Youtube视频。我很抱歉这会使用jQuery，但我的想法是：循环遍历每个Youtube嵌入并根据其索引将其指定为播放器。我也很确定这可以进行一些优化。

它使用类youtubeplayer循环遍历每个嵌入。

<script>
    var players = {};
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onYouTubeIframeAPIReady(e){
        jQuery('iframe.youtubeplayer').each(function(i){
            var youtubeiframeClass = jQuery(this).attr('id');
            players[youtubeiframeClass] = new YT.Player(youtubeiframeClass, {
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        });
    }

    var pauseFlag = false;
    function onPlayerReady(e){
       //Player ready functions would go here
    }
    function onPlayerStateChange(e){
        var videoTitle = e['target']['B']['videoData']['title'];
        if ( e.data == YT.PlayerState.PLAYING ){
            _gaq.push(['_trackEvent', 'Videos', 'Play', videoTitle]);
            pauseFlag = true;
        }
        if ( e.data == YT.PlayerState.ENDED ){
            _gaq.push(['_trackEvent', 'Videos', 'Finished', videoTitle]);
        } else if ( e.data == YT.PlayerState.PAUSED && pauseFlag ){
            _gaq.push(['_trackEvent', 'Videos', 'Pause', videoTitle]);
            pauseFlag = false;
        }
    }
</script>

希望至少让你朝着正确的方向前进！

相关问题
最新问题