Youtube API и отслеживание встроенного видео

Question

Проблема заключается в встраивании нескольких видео Youtube на страницу, и теперь Youtube Analytics не работает. Раньше у меня было много встроенных видео на странице Drupal, но сайт не был оптимизирован для SEO, поскольку скорость страницы была медленной, и многие встроенные видео Youtube делали много обращений на сайт Youtube с помощью js и css.

Я нашел несколько статей о том, как ускорить работу сайта, заменив проигрывателя Youtube образным шрифтом и когда пользователь хочет посмотреть. Я нашел здесь код js (http://www.labnol.org/internet/light-youtube-embeds/27941/ и http://schoberg.net/2015/08/fast-agile-youtube-embed-responsive-iframe-load-delay-with-jquery/). С этими «хаками» сайт загружается намного быстрее и быстрее, а оценка SEO выше.

Введите еще одну проблему. Теперь аналитика Youtube больше не отслеживает видео Youtube на сайте. Я не знаю, почему, видео по-прежнему нажимают, и встроенное видео действительно воспроизводится на сайте.

Что мне делать с кодом встраивания, чтобы он снова отслеживал видео Youtube?

Как я могу отслеживать его с помощью Google Analytics, если я больше не могу отслеживать Youtube Analytics?

мне нужна StackOverflow магия ...

Код для встраивания Youtube видео на странице:

<div class="youtube" id="_ynxddD0Eqk"></div> 

и код функции на внутреннем интерфейсе:

<script> 
$(document).ready(function() { 
    $(".youtube").each(function() { 
    // Set the BG image from the youtube ID 
    $(this).css('background-image', 'url(//i.ytimg.com/vi/' + this.id + '/hqdefault.jpg)'); 
    // Click the video div 
    $(document).delegate('#' + this.id, 'click', function() { 
     // Build embed URL 
     var iframe_url = "//www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=2&wmode=opaque&enablejsapi=1"; 
     // Grab extra parameters set on div 
     if ($(this).data('params')) iframe_url += '&' + $(this).data('params'); 
     // Build iframe tag 
     var iframe = $('<iframe/>', {'allowfullscreen':'allowfullscreen', 'frameborder': '0', 'src': iframe_url}); 
     // /youtube event tracking 
     $(iframe).addClass("media-youtube-player"); 
     // Replace the YouTube thumbnail with YouTube HTML5 Player 
     $(this).replaceWith(iframe); 
    });// /click 
    }); // /each video 
}); // /document ready 
</script> 

Answer 1

While Я не могу говорить с Youtube Analytics о вещах, я могу предоставить код, который я написал, для захвата данных в Google Analytics для многократного использования iframe Youtube на странице.

Я использую класс youtubeplayer на фреймах вместе с уникальным идентификатором для каждого (обычно я просто использую название видео с дефисами).

<iframe id="the-video-title" class="youtubeplayer" width="560" height="315" src="https://www.youtube.com/embed/VIDEOIDHERE?wmode=transparent&enablejsapi=1&origin=SITEORIGINHERE&rel=0" frameborder="0" allowfullscreen></iframe> 

Важными параметрами являются enablejsapi и origin.

Следующие функции используют jQuery и требуют, чтобы API-интерфейс Youtube был включен в консоли разработчика Google.

//Check for Youtube Videos 
function checkForYoutubeVideos(){ 
    if (jQuery('.youtubeplayer').length){ 
     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, 
       onError: onPlayerError 
      } 
     }); 
    }); 
    pauseFlag = false; 
} 
function onPlayerError(e){ 
    var videoTitle = e['target']['B']['videoData']['title']; 
    ga('send', 'event', 'Error', 'Youtube API', videoTitle + ' (Code: ' + e.data + ')', {'nonInteraction': 1}); //Log the API error 
} 
function onPlayerReady(e){ 
    //Do something when player is ready. 
} 
function onPlayerStateChange(e){ 
    var videoTitle = e['target']['B']['videoData']['title']; 
    if (e.data == YT.PlayerState.PLAYING){ 
     ga('send', 'event', 'Youtube', 'Play', videoTitle); 
     pauseFlag = true; 
    } 
    if (e.data == YT.PlayerState.ENDED){ 
     ga('send', 'event', 'Youtube', 'Finished', videoTitle, {'nonInteraction': 1}); 
    } else if (e.data == YT.PlayerState.PAUSED && pauseFlag){ 
     ga('send', 'event', 'Youtube', 'Pause', videoTitle); 
     pauseFlag = false; 
    } 
} 

Обычно я также отправляю в Google Analytics настраиваемые параметры, метрики и данные синхронизации. For my full implementation, check out my Github file here.

Этот метод должен работать с этим обычным методом «отложенного» загрузки видео, которое вы упомянули, но после завершения lazyload вам обязательно нужно будет вызвать функцию checkForYoutubeVideos().

Answer 2

Просьба посмотреть, как это делается Komito Analytics. См. init_ в функции source code.

Answer 3

Я хочу, чтобы добавить предлагаемое решение в компанию Komito Analytics.

Да, он будет отслеживаться с помощью Google Analytics автоматически.Просто включите сценарий, как описано в https://komito.net/integration/:

<script src="https://komito.net/komito.js"></script> 

документация также отражает параметры конфигурации по умолчанию, пожалуйста, посмотрите на них и выключить не нужные показатели.