Как отслеживать несколько видео на Youtube с помощью Youtube Api и Google Analytics

У меня есть 11 видео Youtube на странице, которую я хочу отслеживать с помощью Youtube Api и Google Analytics. webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=en" rel="nofollow noreferrer">Отладчик Google Analytics и где я ошибся

Я использую 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) { }
});

Я вижу это в разделе консоли

введите здесь описание изображения


javascript youtube-api google-analytics youtube event-tracking
person Gadde    schedule 08.05.2015    source источник
comment
Так что же показывает отладчик? данные отправляются? Вы действительно используете старый код GA (ga.js), а не analytics.js?   -  person Bogdan Kuštan    schedule 08.05.2015
comment
@BogdanKuštan Новый analytics.js я вижу это в разделе консоли i.stack.imgur.com/B9jm8 .png   -  person Gadde    schedule 08.05.2015
comment
Поэтому вам необходимо следить за новой документацией по отслеживанию событий через объект ga: developers.google.com. /analytics/devguides/коллекция/   -  person Bogdan Kuštan    schedule 08.05.2015

Ответы (1)


arrow_upward
0
arrow_downward

Я только что поделился этим с другим подобным вопросом, поэтому, хотя он использует 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>

Надеюсь, это, по крайней мере, направит вас в правильном направлении!

person GreatBlakes    schedule 21.08.2015
comment
как отслеживать Ajax видео? - person Prabu Guna; 08.04.2016