Сайт должен стать решением задачи, а не самой задачей!

Previous Entry Share Next Entry
GOOGLE TAG MANAGER (GTM): ОТСЛЕЖИВАНИЕ ВИДЕО YOUTUBE
rab_poshta

  • Реализовываем код GA через GTM: указываем тип тега "Google Analytics", тип отслеживания "Просмотры страниц";

  • Создаем пользовательский HTML тег следующего содержания:

<script>
    // Load the IFrame Player API code asynchronously.
    var tag = document.createElement('script');
    tag.src = "http://youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var YT_GA = YT_GA || {};
    function onYouTubePlayerAPIReady() {
        // Replace the 'ytplayer' element with an <iframe> and
        // YouTube player after the API code downloads.
        var playerOptions = {
           height: 315,
width: 560,
videoId: 'LS37dThfm0M',
playerVars: {},
events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
          }
        };
        YT_GA.player = new YT.Player('ytplayer', playerOptions);
    }
    function onPlayerReady(event) {
        YT_GA.progress25 = false;
        YT_GA.progress50 = false;
        YT_GA.progress75 = false;
        YT_GA.url = YT_GA.player.getVideoUrl();
        YT_GA.videoPlayed = false;
        YT_GA.videoCompleted = false;
    }
    function onPlayerStateChange(event){
        if (typeof _gaq === 'undefined') {
            return;
        }
        // Calculate percent complete
        YT_GA.timePercentComplete = Math.round(YT_GA.player.getCurrentTime() / YT_GA.player.getDuration() * 100);
        if (event.data === YT.PlayerState.PLAYING && !YT_GA.videoPlayed) {
            console.log('Started video');
            _gaq.push(['_trackEvent', 'YouTube', 'StartedVideo', YT_GA.url, 1, true]);
            YT_GA.videoPaused = false;
            YT_GA.videoPlayed = true; //  Avoid subsequent play trackings
        } else if (event.data === YT.PlayerState.PAUSED && (YT_GA.timePercentComplete < 92 && !YT_GA.videoPaused)) {
            console.log('Paused video');
            _gaq.push(['_trackEvent', 'YouTube', 'PausedVideo', YT_GA.url, 1, true]);
            YT_GA.videoPaused = true; // Avoid subsequent pause trackings
        } else if (event.data === YT.PlayerState.ENDED && !YT_GA.videoCompleted) {
            console.log('Completed video');
            _gaq.push(['_trackEvent', 'YouTube', 'CompletedVideo', YT_GA.url, 1,  true]);
            YT_GA.videoCompleted = true; // Avoid subsequent finish trackings
        }
    }
      console.log('end');

  • Указываем в коде значение videoId: отслеживаемого видео, которое содержится в URL адресе видео ролика. URL адрес видео ролика данного примера http://www.youtube.com/watch?feature=player_embedded&v=LS37dThfm0M

  • В результате в отчете GA по событиям увидим следующую картину:

  • Для активации тега указываем правило "Все страницы" или URL адрес страницы/группы страниц, на которых данное видео будет транслироваться;

  • Создаем новую версию контейнера и публикуем.


  • 1
для universal analytics код другой нужен?

  • 1
?

Log in