Analytics
Сейчас в сети: 361
Сейчас в сети: 361
Настройка целей, отслеживание электронной торговли, многоканальные последовательности и тд
Подсказки
star_border
Ответить

Отслеживание видео YouTube c помощью событий GA

Студент ✭

Добрый день, коллеги, интересующиеся и сочувствующие Веселый

Я столкнулась в работе с задачей, которую никак не удается решить, а именно отслеживание YouTube видео.
В идеале хотелось бы добиться этого без загрузки скриптов на сервер и без использования GTM, т.к. это потребует дополнительных временных затрат.

В ходе штудирования различных статей я попыталась построить код, аналогичный описанному здесь, исправив код событий, т.к. на моем сайте стоит Universal. К сожалению, события не отправляются.

Не могли бы вы, пожалуйста, посмотреть на мой код и сказать, в чем может быть причина?
Или поделиться своим успешным опытом внедрения?
Мой скрипт

Спойлер
<script type="text/javascript">
 
// This code loads the IFrame Player API code asynchronously
var tag = document.createElement('script');
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
// This code is called by the YouTube API to create the player object
function onYouTubeIframeAPIReady(event) {
  player = new YT.Player('player', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}
var pauseFlag = false;
function onPlayerReady(event) {
   // do nothing, no tracking needed
}
function onPlayerStateChange(event) {
    // track when user clicks to Play
    if (event.data == YT.PlayerState.PLAYING) {
        ga('send', 'event', 'Video', 'Start');
        pauseFlag = true;
    }
    // track when user clicks to Pause
    if (event.data == YT.PlayerState.PAUSED && pauseFlag) {
        ga('send', 'event', 'Video', 'Pause');
        pauseFlag = false;
    }
    // track when video ends
    if (event.data == YT.PlayerState.ENDED) {
        ga('send', 'event', 'Video', 'Complete');
    }
}
</script>

Измененный <iframe>

Спойлер
<iframe id="player" width="640" height="360" src="http://www.youtube.com/embed/1234567890?enablejsapi=1&origin=http://example.com" frameborder="0" name="player" allowfullscreen="" />  


Заранее благодарю всех откликнувшихся!

1 УТВЕРЖДЕННОЕ РЕШЕНИЕ

Утвержденные решения
Лучший ответ.
Решение
Утвердил автор темы Ekaterina L
сентября 2015

Re: Отслеживание видео YouTube c помощью событий GA

Бакалавр ✭ ✭ ✭
Проверил, всё работает:
1. youTubePlayer - ваш id iframe плеера (толку от того, что вы копируете, но не указываете ваши данные - нет, например счас в скрипте не поменяли, а до этого был ваш id)
2. 1234567890 - абракадабра вашего ролика (это не ваши данные)
3. http://example.com - адрес вашего сайта (может, это не поменяли, также не ваши данные)

Просмотреть решение в исходном сообщении

Re: Отслеживание видео YouTube c помощью событий GA

Бакалавр ✭ ✭ ✭

Это точно ваш скрипт? Не хочется проверять небрежно вставленный код (там символы потерены, а часть перекодирована).

Re: Отслеживание видео YouTube c помощью событий GA

Студент ✭

Спасибо за ценные замечания!
Как могла "причесала" Веселый
Можете, пожалуйста, теперь посмотреть?

Лучший ответ.
Решение
Утвердил автор темы Ekaterina L
сентября 2015

Re: Отслеживание видео YouTube c помощью событий GA

Бакалавр ✭ ✭ ✭
Проверил, всё работает:
1. youTubePlayer - ваш id iframe плеера (толку от того, что вы копируете, но не указываете ваши данные - нет, например счас в скрипте не поменяли, а до этого был ваш id)
2. 1234567890 - абракадабра вашего ролика (это не ваши данные)
3. http://example.com - адрес вашего сайта (может, это не поменяли, также не ваши данные)

Re: Отслеживание видео YouTube c помощью событий GA

Студент ✭

Darts P, подскажите пожалуйста, может ли код не срабатывать из-за того, что символ & перекодируется в &amp; ?

По поводу остальных пунктов - все учтено, но события не доходят

Спасибо!

Re: Отслеживание видео YouTube c помощью событий GA

Бакалавр ✭ ✭ ✭
Да, не будет работать.

Re: Отслеживание видео YouTube c помощью событий GA

Студент ✭
& в iframe перекодируется в &amp; автоматически
Остальные рекомендации учтены, но события не отправляются Печальный
Будем искать другой способ...

Re: Отслеживание видео YouTube c помощью событий GA

Бакалавр ✭ ✭ ✭
Не понял прокакой iframe речь (если и перекодирует, то конкретный скрипт в вашей системе). Если у вас проблема с перекодировкой только строки " if (event.data == YT.PlayerState.PAUSED && pauseFlag) {" можно её переписать как " if (event.data == YT.PlayerState.PAUSED) if (pauseFlag) {"

Re: Отслеживание видео YouTube c помощью событий GA

Студент ✭

Скриншот

Вот такие ошибки вылезают при запуске в debugger
ID плеера в скрипте и iframe совпадают
в iframe в поле origin прописан адрес сайта, где размещено видео (замазываю, т.к. он внутренний, на него не получится зайти)
В самом скрипте все символы & отображаются корректно

Re: Отслеживание видео YouTube c помощью событий GA

Бакалавр ✭ ✭ ✭
У вас протоколы http и https, а должны быть либо те, либо другие - везде.