На многих сайтах встречается встроенное с 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>
Или просто скачиваем готовый файл с кодом, вот от сюда.
Теперь нужно выставить правила активация данного тега
Вот и все, осталось только опубликовать контейнер и проверить работоспособность.