СТАТЬИ: HTML письма Презентации Сайты
Как отслеживать видео с YouTube на своем сайте с помощью Google Analytics.
Сайты / Просмотров: 849

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

Если вы выложили видео на YouTube, вы уже знаете, что можно анализировать статистические данные и показатели вашего видео-шедевра через YouTube Insights.

Однако если вы хотите встроить видео на вашей странице или блоге и отслеживать и анализировать статистические данные вас ждет разочарование. YouTube Insights не учитывает данные на вашей странице или блоге.

А в Google Analytics вы можете отслеживать это?

Да, можно!

Несколько умельцев разработали небольшую javascript библиотеку, которая позволяет связать встроенное Youtube видео на любой странице, чтобы событие отслеживались Google Analytics. Они  также открыли источник-кода в Google Code (ga-youtube-tracker), таким образом, больше людей смогут воспользоваться это возможностью.

Как использовать библиотеку?

  • Добавляем на страницу код:

  • <pre class="brush: html;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script></pre>

  • Теперь берем ссылку с YouTube на видео, например: http://www.youtube.com/watch?v=2AxHd94t4SA и заменяем watch?v= на /v/, чтобы получилось http://www.youtube.com/v/2AxHd94t4SA и добавляем &hl=pt-br&fs=1&enablejsapi=1&playerapiid=FLASH_ELEMENT_ID у нас получается ссылка на видео с YouTube которую мы будем использовать.
  • Затем прописываем следующий код и вставляем в swfobject.embedSWF получившуюся ссылку с указанием id видео.

  • <div id="flashdiv1"></div>
    <script type="text/javascript">
    var params = { allowScriptAccess: "always" };
    var atts = { id: "myplayerid1" };
    swfobject.embedSWF("http://www.youtube.com/v/ 2AxHd94t4SA&hl=pt-br&fs=1&enablejsapi=1&playerapiid=myplayerid1", "flashdiv1", "425", "344", "8", null, null, params, atts);
    </script>

    Следите, чтобы flashdiv1, myplayerid1  имели один номер во всем коде.

    Если вы хотите добавить несколько видео на страницу, то не забудьте поменять номера в flashdiv1, myplayerid1.

    Значения "425", "344" отвечаю за высоту и ширину видео.

  • И наконец, в конце страницы добавляем:

  • <script src="ga_dpc_youtube.js"></script>
    <script>
    try{
    function yt_callback(category,action,label,value){
    _gaq.push(['_trackEvent',category,action,label,value]);
    }
    var ytTracker = new YoutubeTracker(false, yt_callback, true);
    }catch(e){}
    </script>

    Просто, да?

    Пример полного кода:

    <html>
    <head>

     <!--Google Analytics-->
     <script type="text/javascript">
     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-XXXXXX-XX]);
     _gaq.push(['_trackPageview']);
     (function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
    </script>
     <!--Google Analytics-->

    <body>

    <!--SWF Object Reference needed to cross-browser embedding the player-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

    <!--YouTube Embedded Code - Video 1-->
    <div id="flashdiv1"></div>
    <script type="text/javascript">
    var params = { allowScriptAccess: "always" };
    var atts = { id: "myplayerid1" };
    swfobject.embedSWF("http://www.youtube.com/v/2vgxUacqEBI&hl=pt-br&fs=1&enablejsapi=1&playerapiid=myplayerid1", "flashdiv1", "425", "344", "8", null, null, params, atts);
    </script>

    <!--YouTube Embedded Code - Video 2-->
    <div id="flashdiv2"></div>
    <script type="text/javascript">
    var params = { allowScriptAccess: "always" };
    var atts = { id: "myplayerid2" };
    swfobject.embedSWF("http://www.youtube.com/v/2AxHd94t4SA&hl=pt-br&fs=1&enablejsapi=1&playerapiid=myplayerid2", "flashdiv2", "425", "500", "8", null, null, params, atts);
    </script>

    <!--Youtube tracking component-->
    <script src=" ga_dpc_youtube.js"></script>
    <!--Initializing component-->
    <script>
    try{
    function yt_callback(category,action,label,value){
    _gaq.push(['_trackEvent',category,action,label,value]);
    }
    var ytTracker = new YoutubeTracker(false, yt_callback, true);
    }catch(e){}
    </script>

    </body>
    </html>

    Библиотека осуществляет мониторинг встроенного видео и следующих событий:

    1. Play (Воспроизведение)
    2. Paused (Пауза)
    3. Ended (Остановка)
    4. Fast-Forward (Перемотка вперед)
    5. Rewind (Перемотка назад)
    6. View-Range (Количество просмотров)

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

     Как это выглядит в отчетах.

     Как это выглядит в отчетах.

    Заходите в Google Analytics, затем в Содержание, затем в отслеживание событий. События происходящие с видео выгладят как youtube-видео:YouTube-Видео-ID.

    Покаждому видео можно посмотреть какие события происходили:

    И посмотреть на каком промежутке произошло событие:

Категория: Сайты
Дата создания: 29.09.2011
Автор/Перевод: Филимонов Никита
Просмотров: 849
При копирование материалов ссылка на источник обязательна!

Мы в соцсетях

Еще статьи
rss
Карта