С развитием Google Tag Manager мы можем легко отслеживать взаимодействие пользователей с видео-контентом на сайте. Статистика просмотров видео на ресурсе будет выглядеть вот так:
Зачем и кому это может быть полезно?
• Многие блогеры и владельцы сайтов для поднятия поведенческих факторов встраивают видеоролики в записи. Люди смотрят видео и тем самым больше времени проводят на сайте. Правильно настроенный GTM помогает понять, какой тип видео люди досматривают до конца. Это позволяет увеличивать время нахождения на сайте.
• Для сервисов, онлайн-магазинов или лэндингов GTM позволяет эффективнее собирать списки ремаркетинга. Люди, посмотревшие видео, с большей вероятностью купят товар (или совершат другое необходимое действие).
• Владельцы сайтов, которые самостоятельно делают видео, при помощи GTM могут лучше понять свою аудиторию.
Как настроить Google Tag Manager?
Важно: Мы будем отслеживать все видео, которые вставлены на сайт посредством iframe (стандартный способ встраивания видео на сайт).
1) Регистрируемся/логинимся в GTM: tagmanager.google.com, размещаем код на сайте, добавляем новый тег для связи с аккаунтом Google Analytics (если это все еще не сделано).
2) Создаем переменную YouTube is present. Переменная – собственный код JavaScript. Вставляем код, который дан ниже. Он проверяет, есть ли видео на странице.
|
1 2 3 4 5 6 |
1 // Return "true" if there is at least one Youtube video on the page 2 function () { 3 for (var e = document.getElementsByTagName('iframe'), x = e.length; x--;) 4 if (/youtube.com\/embed/.test(e[x].src)) return true; 5 return false; 6 } |
3) Создаем триггер “YouTube present”. Выбор события – просмотр страницы, тип триггера “Модель DOM готова”. Условие активации – созданная ранее переменная “Youtube is present” равно “true”.
Триггер также будет включаться, если видео присутствует на странице.
4) Теперь надо создать тег и вставить непосредственно сам скрипт, который будет отслеживать процент просмотра видео и отдавать информацию в Google Analytics, а также удобно отображать заголовки.
Сам скрипт:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<script> // This is a modified video tracking script which was originally developed by CardinalPath.com //enable the JavaScript API for an embedded player 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 = []; // support multiple players on the same page // attach our YT listener once the API is loaded 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"; } } } // listen for play, pause and end states // also report % played every second function onPlayerStateChange(e) { e["data"] == YT.PlayerState.PLAYING && setTimeout(onPlayerPercent, 1000, e["target"]); var video_data = e.target["getVideoData"](), label = video_data.title; // Get title of the current page var pageTitle = document.title; if (e["data"] == YT.PlayerState.PLAYING && YT.gtmLastAction == "p") { label = "Video Played - " + video_data.title; dataLayer.push({ 'event': 'youtube', 'eventCategory': 'Youtube Videos', 'eventAction': pageTitle, 'eventLabel': label }); YT.gtmLastAction = ""; } if (e["data"] == YT.PlayerState.PAUSED) { label = "Video Paused - " + video_data.title; dataLayer.push({ 'event': 'youtube', 'eventCategory': 'Youtube Videos', 'eventAction': pageTitle, 'eventLabel': label }); YT.gtmLastAction = "p"; } } // catch all to report errors through the GTM data layer // once the error is exposed to GTM, it can be tracked in UA as an event! function onPlayerError(e) { dataLayer.push({ 'event': 'error', 'eventCategory': 'Youtube Videos', 'eventAction': 'GTM', 'eventLabel': "youtube:" + e["target"]["src"] + "-" + e["data"] }) } // 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.title; // Get title of the current page var pageTitle = document.title; e["lastP"] = t; label = t * 100 + "% Video played - " + video_data.title; dataLayer.push({ 'event': 'youtube', 'eventCategory': 'Youtube Videos', 'eventAction': pageTitle, 'eventLabel': label }) } e["lastP"] != 1 && setTimeout(onPlayerPercent, 1000, e); } } // 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> |
Создаем тег «Youtube Listener», выбираем пользовательский тег «HTML» и вставляем код скрипта.
Условие активации – созданный ранее триггер “YouTube present”.
5) Для того чтобы передать всю информацию, надо создать еще 3 переменных: Event Action, Event Category, Event Label. Тип – переменная уровня данных.
В поле “Имя переменной уровня данных” прописываем соответственно “eventAction”, “eventCategory”, “eventLabel”. Версия уровня данных – Версия 2.
Также нужно создать пользовательский триггер для отсылки всех данных в Google Analytics. Выбор события – пользовательское событие. В условии активации в имени события пишем “YouTube”.
6) Для того чтобы собрать все данные и отослать их в Google Analytics создаем еще один тег “UA YouTube Event”. Выбор продукта – Google Analytics, выбор типа тега – Universal Analytics.
Теперь о настройках тега. В идентификатор ставим наш идентификатор Universal Analytics, тип отслеживания – Событие. Для категории выбираем – Event Category, для действия – Event Action, для ярлыка – Event Label. Условие активации – Youtube Event (триггер созданный на пятом шаге).
В целом должна получиться такая картина:
Этот тег будет посылать все взаимодействия с YouTube-видео в Google Analytics.
7) Для того чтобы проверить работу, в правом верхнем углу нажмите на стрелку около “Опубликовать” и далее выберите “Предварительный просмотр и отладка”.
Теперь перейдите на страницу сайта, где вставлено YouTube-видео, нажмите на проигрывание и потом остановите. У вас должны активироваться все 3 тега.
Если все активировалось, то возвращайтесь в Google TM и нажмите “Опубликовать”.
После этого можете сами проиграть видео и остановить. Все данные должны появиться в разделе «События» в GA во вкладке “В режиме реального времени”.
