Vimeo + Google Tag Manager для очень загорелого подписчика (я не шучу!)

Привет, друзья! На связи Евгений Тридчиков, и в этом видео мы разберем, как отслеживать взаимодействия с плеером Vimeo на вашем сайте с помощью Google Tag Manager.

Этот вопрос поступил от очень загорелого пользователя с никнеймом MVG. MVG спрашивает:

“Как сделать то же самое, только если у меня видео с vimeo?”

Это комментарий к ролику про отслеживание YouTube видео на сайте. Напомню, что в случае с YouTube это делается очень просто, потому что у Google единая эко-система и в Диспетчере тегов на этот случай есть готовое решение. Триггер, который так и называется – YouTube видео.

Vimeo Player API

А вот Vimeo по умолчанию так делать не умеет. Стоит отметить, что у плеера есть интеграция с Google Analytics, но она доступна для тарифов Business и выше. Поэтому здесь нам пригодится API Vimeo, который доступен на гитхабе.

Демонстрацию я проведу на том же сайте, с которым мы работали в прошлом ролике про отслеживание взаимодействий с JivoSite.

Перемещаемся в знакомый контейнер и здесь, как видите, у меня уже есть готовое решение. Для вашего удобства и в Вашу честь, как говорит Сергей Жигалко, я просто разберу его пошагово. А сам скрипт закину на облако: клик-клак

Vimeo + Google Tag Manager для очень загорелого подписчика (я не шучу!)
Вот, что у меня получилось

Этот тег я останавливаю, создаю новый типа Пользовательский HTML, и начнем движение по порядку. Я буду переключаться между вкладками браузера, поэтому постарайтесь внимательно следить, чтобы уловить суть того, что я тут наковырял. На самом деле ничего сложного.

Получаем доступ к управлению плеером

Первым делом нам нужно получить доступ к API Vimeo. Для этого перемещаемся к инструкции, и здесь в самом верху предлагается несколько вариантов для начала работы. Нам подходит вариант, когда плеер уже реализован на странице.

Vimeo + Google Tag Manager для очень загорелого подписчика (я не шучу!)
Это мне подходит

Здесь написано, что нужно передать плеер в конструктор, и мы получим доступ к его управлению. Под каждой такой задачей вы найдете пример реализации.

Например здесь мы видим, что в первой строчке располагается айфрейм с видео. Далее подключаем API, создаем переменную iframe, в которую кладем ссылку на видео-плеер, который размещен выше. Мы находим ее с помощью поиска по селектору iframe. После этого передаем плеер в конструктор и получаем доступ к его управлению с помощью колбек-функций и методов, о чем мы поговорим позже.

Напомню, что я не программист, поэтому рассказать вам какие-то глубокие вещи про js не смогу. Но в целом с задачей по отслеживанию Vimeo мы справимся, поэтому не беспокойтесь, друзья.

Итак, можно сказать я копирую этот решение, вставляю в свой новенький тег и немножко кастомизирую. Здесь я, конечно, убрал iframe с самим видео и добавил вывод в консоль переменной iframe, чтобы понимать, что она подсасывает.

Проверим, все ли четенько?

Хорошо, давайте проверим, что у нас получается. Для этого добавляем триггер Модель DOM готова, чтобы видосик точно успел подгрузиться в документе, включаем режим превью, перемещаемся на сайт, открываем консоль и обновляем страницу.

Как видите, переменная подсасывает не тот iframe, который нужно. Из-за чего появляется соответствующая ошибка. Дело в том, что поиск по селектору возвращает ссылку на первый найденный элемент, который соответствует условию.

Vimeo + Google Tag Manager для очень загорелого подписчика (я не шучу!)
Айфрейм айфрейму рознь

Давайте посмотрим, сколько айфремов на странице. Используем метод document.querySelectorAll и видим, что их пять. И как раз первый на странице это виджет Яндекс Карт. Iframe с видео второй.

Данная страница реализована на платформе Тильда, поэтому я просто перетаскиваю блок с видео выше карты, сохраняю и обновляю страничку. Как видите, теперь мы получаем то, что нужно, а ошибка ушла.

Важный момент

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

Например, у вас будет другая система управления сайтом, а не Тильда; много страниц с видео, а не одна, как у меня; интеграция видео на страницах сайта тоже может быть иной.

Поэтому вам нужно найти свой способ для поиска видео на страницах сайта. Например, добавить им уникальный класс или айди. Здесь я вам не подскажу, потому что здесь имеет значение конкретика. Используйте помощь разработчика и не партесь.

Начинаем развлекаться

А мы двигаемся дальше и начинаем развлекаться. Только что мы получили доступ к плееру, а значит нам доступны методы и функции. Теперь давайте решим, какие именно взаимодействия с плеером нам интересны.

Предлагаю далеко не ходить и взять пример с триггера для YouTube видео. Давайте получим название ролика, его продолжительность и передадим основные точки просмотра: начало просмотра, 25%, 50% и 90% просмотра видео.

Для демонстрации передадим эту информацию в Google Analytics в виде воронки по каждому видео. У меня видео одно, но я предполагаю, что у вас их много.

Обратите внимание, что мы отслеживаем взаимодействия с помощью Диспетчера тегов, поэтому вы можете не ограничиваться Google Analytics и передавать информацию, куда пожелаете.

Название видео

Итак, название видео. Для этого нам понадобится метод getVideoTitle(). Перемещаемся в справку, находим его, копируем и вставляем в тег. Для удобства можно убрать проверку на ошибки. Выведем название ролика в консоль и сохраним в глобальную переменную.

Vimeo + Google Tag Manager для очень загорелого подписчика (я не шучу!)
Забираем название видео

Длительность видео

Продолжительность видео получаем с помощью метода getDuration(), который возвращает длительность видео в секундах. Копируем, вставляем, добавляем вывод в консоль и здесь же начинаем работу с отметками просмотра видео: 25%, 50%, 90%.

Vimeo + Google Tag Manager для очень загорелого подписчика (я не шучу!)
Получаем длительность видео в секундах

Контрольные точки

Для этого есть метод addCuePoint(time: number, data: object). Он позволяет добавить в плеер контрольные точки просмотра, по достижении которых появляется событие cuepoint. Как видите, мы должны указать значение контрольной точки в секундах (!), а также опционально можно добавить пользовательские ключи.

Vimeo + Google Tag Manager для очень загорелого подписчика (я не шучу!)
Добавляем контрольные точки

Продолжительность видео может быть разной, поэтому переведем секунды в относительные единицы, то есть проценты. Для этого умножим переменную duration на 0.25, 0.50 и 0.90 соответственно. А в customKey положим описательные значения в процентах, это нам пригодится чуть позже.

Создадим три контрольные точки и добавим вывод в консоль, чтобы понимать, что методы отработали. Приготовления мы закончили, теперь ловим события с помощью метода .on и колбек-функций.

Ловим события

На входе мы указываем имя события, которое хотим прослушать. А в тело колбек-функции кладем нужные нам команды, а именно – обращения к уровню данных, чтобы Диспетчер тегов получил эту информацию.

Play

Вызов метода .on приводится в самом начале, помните? Копируем его и вставляем. Здесь он прослушивает событие play, которое означает начало просмотра ролика. Вывод в консоль есть, осталось добавить пуш для уровня данных. В этом вам поможет инструкция для разработчиков, о которой я упоминал в прошлом видео.

Передаем событие с именем Vimeo и пару переменных:

  • eventAction – в которую помещаем название ролика,
  • eventLabel – куда положим значение start.

Таким образом, мы передали на уровень данных событие о начале просмотра видео с нужными нам атрибутами. Сделаем это и для контрольных точек.

Cuepoint

Снова вызываем метод .on, но уже с прослушкой события cuepoint. Как вы уже знаете, это событие возникает в момент достижения контрольной точки. А мы добавили три контрольные точки и кроме того для каждой точки передаем пользовательский ключ.

Поэтому снова пишем обращение к уровню данных и передаем тот же набор:

  • событие с именем Vimeo,
  • eventAction с названием видео
  • и eventLabel со значением пользовательского ключа.

Чтобы передать значение customKey мы используем точечную нотацию и обращаемся к свойству объекта data, который является свойством объекта data, который возвращает данная колбек-функция. Также выводим customKey в консоль.

Vimeo + Google Tag Manager для очень загорелого подписчика (я не шучу!)
Подкинем дровишек из лесу вестимо

Что ж, на этом развлекаловка подходит к концу. Я не делал промежуточных проверок, чтобы не тратить ваше время. Давайте проверим, что у нас получается. Сохраним тег, обновим режим превью, перезагрузим страницу. И я немного ускорю видео.

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

Отправляем информацию в анал

Дело за малым! Отправим все это дельце-тельце в Google Analytics. Для этого предварительно создадим две переменные уровня данных: eventAction и eventLabel. А также макрос типа Пользовательское событие со значением Vimeo.

Остальное вы уже знаете:

  • создаем тег типа Universal Analytics,
  • тип взаимодействия событие,
  • в категорию кладем макрос event или можно вручную написать Vimeo,
  • в действие кладем переменную eventAction – это название ролика,
  • а в метку кладем eventLabel – это глубина просмотра видео.

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

Обновим режим превью, страницу и посмотрим, что у нас получилось. Таким образом, мы настроили отслеживание взаимодействий с плеером Vimeo с помощью Диспетчера тегов. Вы можете изучить справку, чтобы добавить недостающие вам события.

Vimeo + Google Tag Manager для очень загорелого подписчика (я не шучу!)
Это вы уже умеете

Также вы можете повесить цели на эти события. Или сделать составную цель, но для этого передавайте виртуальные страницы вместо событий.

Смотреть видео

Друзья, не забывайте про колокольные дела. Я мечтаю о 10%. Также предлагаю поддержать загорелого MVG вашим сочным лайком, потому что вопрос получился действительно интересным. С вами был Евгений Тридчиков, и я желаю вам великолепного дня!

Рейтинг
( 3 оценки, среднее 5 из 5 )
Евгений Тридчиков/ автор статьи
Загрузка ...
CONTEXT-KILL.BY