На многих сайтах встречается встроенное с YouTube видео. Это улучшает поведенческие факторы сайта, делает его более привлекательным и информационным для пользователей.
Вставляют видео обычно через стандартные варианты, представленные самим YouTube. Для отслеживания нам понадобится Google Tag Manager (GTM). Его мы настроим, а результат будем смотреть в Google Analytics.
В “Действие по событию” заносим сам факт просмотра видео и в процентах сколько от видео просмотрено, в “Ярлык событий” заносим название видео.
Так в Google Analitics мы сможем отслеживать какое видео, сколько раз и полностью ли просмотрели. Плюс эти данные можно использовать в ремаркетинге.
Добавляем видео на сайт
Чтобы все правильно и корректно работало необходимо грамотно вставить видео на сайт. Делается это просто, открываем нужно видео и, как на картинке ниже выбираем.
Берем выделенный код и вставляем на сайт, в то место, где хотите разместить видео.
Настройка Google Tag Manager (GTM)
В первую очередь делаем новый тег — autoEvent. Делаем тип данного тега Universal Analytics, сразу указываем идентификатор отслеживания и тип отслеживания устанавливаем событие.
Далее в настройках создаем четыре макроса с типом «переменная уровня данных»: eventCategory, eventAction, eventLabel и eventValue.
Создаем правило активации: event содержит autoEvent.
В итоге должно получится вот так.
Макрос IsYoutube
Теперь нужно сделать новый макрос, типа «собственный код JavaScript» и вставляем наш код.
function () {
for (var e = document.getElementsByTagName(‘iframe’), x = e.length; x—;)
if (/youtube.com\/embed/.test(e[x].src))
return true; return false; }
С помощью данного кода мы определяем есть на странице видео или нет. Другими словами код возвращает true при наличии видео на сайте и false, если видео на странице отсутствует.
Youtube Listner
Переходим к заключительному этапу, к созданию тега взаимодействия с видео. Необходимо создать новый тег, типа «Пользовательский HTML» и добавляем туда следующий код:
<script type=»text/javascript»>
for (var e = document.getElementsByTagName(«iframe»), x = e.length; x—;)
if (/youtube.com\/embed/.test(e[x].src))
if(e[x].src.indexOf(‘enablejsapi=’) === -1)
e[x].src += (e[x].src.indexOf(‘?’) ===-1 ? ‘?’:’&’) + ‘enablejsapi=1’;var gtmYTListeners = [];
var gtmYTPlayers = [];function onYouTubeIframeAPIReady() {
for (var e = document.getElementsByTagName(«iframe»), x = e.length; x—;) {
if (/youtube.com\/embed/.test(e[x].src)) {
gtmYTListeners.push(new YT.Player(e[x], {
events: {
onStateChange: onPlayerStateChange,
onError: onPlayerError
}
}));
YT.gtmLastAction = «p»;
}
}
}function onPlayerStateChange(e) {
e[«data»] == YT.PlayerState.PLAYING && setTimeout(onPlayerPercent, 1000, e[«target»]);
var video_data = e.target[«getVideoData»](),
label = video_data.video_id+’:’+video_data.title;
if (e[«data»] == YT.PlayerState.PLAYING && YT.gtmLastAction == «p») {
dataLayer.push({
event: «autoEvent»,
eventCategory: «youtube»,
eventAction: «play»,
eventLabel: label
});
YT.gtmLastAction = «»;
}
if (e[«data»] == YT.PlayerState.PAUSED) {
dataLayer.push({
event: «autoEvent»,
eventCategory: «youtube»,
eventAction: «pause»,
eventLabel: label
});
YT.gtmLastAction = «p»;
}
}function onPlayerError(e) {
dataLayer.push({
event: «autoEvent»,
eventCategory: «error»,
eventAction: «GTM»,
eventLabel: «youtube:» + e
})
}// report the % played if it matches 0%, 25%, 50%, 75% or completed
function onPlayerPercent(e) {
if (e[«getPlayerState»]() == YT.PlayerState.PLAYING) {
var t = e[«getDuration»]() — e[«getCurrentTime»]() <= 1.5 ? 1 : (Math.floor(e[«getCurrentTime»]() / e[«getDuration»]() * 4) / 4).toFixed(2); if (!e[«lastP»] || t > e[«lastP»]) {
var video_data = e[«getVideoData»](),
label = video_data.video_id+’:’+video_data.title;
e[«lastP»] = t;
dataLayer.push({
event: «autoEvent»,
eventCategory: «youtube»,
eventAction: t * 100 + «%»,
eventLabel: label
})
}
e[«lastP»] != 1 && setTimeout(onPlayerPercent, 1000, e);
}
}window.onbeforeunload = function (e) {
var e = e || window.event;
// For IE and Firefox prior to version 4
if(e)
e.returnValue = ‘na’;
// For Safari
return ‘na’;
};
window.onbeforeunload = trackYTUnload;function trackYTUnload() {
for (var i = 0; i < gtmYTplayers.length; i++)
if (gtmYTlisteners[i].getPlayerState() === 1) { // playing
var video_data = gtmYTlisteners[i][‘getVideoData’](),
label = video_data.video_id+’:’+video_data.title;
dataLayer.push({
event: ‘youtube’,
action: ‘exit’,
label: label
});
}
}
// load the Youtube JS api and get going
var j = document.createElement(«script»),
f = document.getElementsByTagName(«script»)[0];
j.src = «//www.youtube.com/iframe_api»;
j.async = true;
f.parentNode.insertBefore(j, f);
</script>
Или просто скачиваем готовый файл с кодом, вот от сюда.
Теперь нужно выставить правила активация данного тега
Вот и все, осталось только опубликовать контейнер и проверить работоспособность.