javascript - 如何使用Youtube Api和Google Analytics(分析)跟踪多个YouTube视频

Question

我在页面中有11个Youtube视频，下面是我尝试使用Youtube Api和Google Analytics(分析)跟踪所有视频的方法，请尝试帮助我如何使用Google Analytics Debugger进行调试以及出现问题的地方

我正在使用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脚本

$(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) { }
});

我在控制台部分看到了

Answer 1

我刚刚与另一个类似的问题分享了这个信息，因此尽管它使用jQuery，但希望它能为您解决一些问题。我已对其进行了更改，以对Google Analytics(分析)使用较旧的_gaq.push()方法来匹配您的问题。

这是我想出的脚本，可用于页面上任意数量的嵌入式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>

希望这至少能使您朝正确的方向前进!