Читать книгу: «Google Tag Manager для googлят: Руководство по управлению тегами», страница 17

Отслеживание YouTube видео в Google Analytics c помощью GTM

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

Не секрет, что в разных нишах конверсия будет разной. Как вариант, можно загрузить пробное видео на сайт и настроить отслеживание YouYube видео в Google Analytics через Google Tag Manager. Настроить отслеживания довольно просто, так как в GTM есть для этого специальный триггер.

Активируем встроенные переменные для отслеживания триггеров.

Рис. 526. Переменные типа «Видео»

● Video Provider – название площадки (YouTube);

● Video Status – статус видео. Может быть: Start, Complete, Pause, Seek (промотка), Buffering, Progress;

● Video URL – url-видео на площадке, пример https://www.youtube.com/watch?v=…

● Video Title – название видео;

● Video Duration – длина видео в секундах;

● Video Current Time – время в секундах, когда сработало событие;

● Video Percent – процент, когда происходит событие;

● Video Visible – может быть true или false, в зависимости от того видит ли пользователь видео, когда срабатывает событие или нет.

Создаем триггер. В GTM для отслеживания видео с YouTube есть специально встроенный триггер.

● Название – Youtube video event (название может быть любым);

● Тип триггера – Видео YouTube;

● Выбираем, что будет регистрироваться – Начало, Завершение, Приостановка, Перемотка, Буферизация;

● Ход просмотра – можно выбрать в процентах (прописываем через запятую) или по времени (в секундах);

Дополнительно:

● Включить поддержку JavaScript API для всех видео Youtube

● Условие активации триггера – В примере данный триггер будет срабатывать на всех видео.

Рис. 527. Настройки триггера

Посмотреть работу триггера и значение переменных можно через режим предварительного просмотра GTM.

Рис. 528. Отслеживание события gtm.video

Общая переменная (таблица поиска)

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

● Создаем пользовательскую переменную «Таблица поиска»;

● Название: Video Status – таблица поиска (произвольное название);

● Тип переменной – Таблица поиска;

● Входная переменная – Video Status;

Входные данные. Прописываем значение переменной «Video Status» (см. выше). В поле результат прописываем: как мы их хотим назвать (произвольное название)

Пример заполнения:

● start – начал просмотр;

● pause – пауза;

● buffering – буфер;

● progress – просмотр – {{Video Percent}}%;

● seek – промотка;

● сomplete – просмотр до конца;

Примечание: при значении progress рекомендуем прописать название (пример «просмотр») – переменную процентов просмотра {{Video Percent}} и значок %.

По умолчанию выставляем переменную {{Video Status}}.

Рис. 529. Настройка переменной типа «Таблица поиска»

Проверим работу переменной через режим предварительного просмотра.

Рис. 530. Проверка переменной «Таблица поиска» в режиме отладки

На следующем шаге создаем тег.

● Название тега – ga – Youtube video;

● Тип тега – Universal Analytics;

● Категория – Youtube video (произвольное название);

● Действие – Переменная Video Status – таблица поиска, которую мы предварительно создали);

● Ярлык – Как пример, можно вставить две переменные {{Video Title}} и {{Video URL}};

● Включаем переопределение настроек в этом теге;

Можно прописать код счетчика через переменную. Для этого ее нужно создать, в примере название cod ua, или вставить код напрямую.

Рис. 531. Переменная типа «Константа» с идентификатором отслеживания GA

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

Рис. 532. Настройки тега ga – Youtube video

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

Рис. 533. Срабатывание тега

Данные о событиях с видео в Google Analytics доступны в отчете «Лучшие события», который находится в разделе «Поведение».

Категория – Youtube video (соответствует названию, которое мы прописали в теге)

Рис. 534. Отчет «Лучшие события»

Переходим на вкладку «Действие по событию». В GTM мы прописывали переменную «Video Status – таблица поиска».

Рис. 535. Действие по событию

В ярлыке событий вы увидите название видео и url-адрес. Это значения переменных, которые мы прописали в ярлыке событий тега в Google Tag Manager.

Рис. 536. Ярлык события

Подмена контента на сайте с помощью GTM

Подмену контента на сайте (заголовка, подзаголовка, телефона, акции, метро и т.д.) в зависимости от условия в параметре URL (источника, рекламного объявления, запроса, гео и т.д.) можно осуществлять различными способами. Например, на базе .php (если знакомы с этим языком или есть разработчик) или с помощью сторонних сервисов, таких как YAGLA, Adfor и другие (если есть лишние $). В этом материале мы разберем бесплатный способ подмены заголовка на сайте с помощью Google Tag Manager.

Пример. На сайте на первом экране есть заголовок:

Рис. 537. «Получите СРО «под ключ» за 1 день! Работаем по всей России!»

Нам необходимо изменять этот заголовок в зависимости от параметра URL. В качестве параметра возьмем метку utm_content (можно взять любую другую, хоть нестандартную, например, m_change), в которую будем помещать значения других заголовков. Чтобы проще и быстрее реализовать задуманное, лучше всего подготовить заранее отдельную таблицу с метками и их значениями. Вот как это может выглядеть в Excel:

Рис. 538. Пример подмены заголовков в таблице Excel

Например, вы сделали пост в социальной сети или разметили рекламные кампании, разбили свой товар или услугу на категории (мебель -> один заголовок, кухни -> другой заголовок и т.д.). При переходе по одной из ссылок (столбец «Конечный URL») пользователь будет видеть подмененный заголовок (из столбца «Заголовок на сайте»).

Ссылка обязательна должна содержать параметр запроса, иначе подмена не произойдет. Давайте перейдем к настройке в GTM. Последовательность действий:

● Создаем пользовательскую переменную типа «URL»;

● Название – paramURL (любое произвольное);

● Тип компонента – Запрос;

● Ключ запроса – utm_content (тот, который вы определили для себя, может быть другим);

Сохраняем.

Рис. 539. Пользовательская переменная типа «URL»

Далее создаем еще одну пользовательскую переменную «Таблица поиска» из типа «Утилиты».

● Название – podmeniZag (может быть любым);

● Входная переменная – {{paramURL}} (та, которую создали на шаге выше);

● Таблица поиска – в каждую из строк в поле «Входные данные» вводим атрибут ключа запроса utm_content (см. таблицу выше), а в поле «Результат» вводим значение параметра utm_content, то есть наши подмененные заголовки;

● Установить значение по умолчанию (галочка) – добавляем исходный заголовок.

Сохраняем переменную.

Рис. 540. Переменная «Таблица поиска» с нашими значениями

После этого создаем триггер типа «Просмотр страницы», который будет активироваться только тогда, когда значение переменной utm_content определено. В противном случае если в ссылке нет параметра запроса, и оно принимает значение «undefined» (не определено), то контент подменяться не будет, и тег не сработает.

● Название – undefined (может быть любым);

● Тип триггера – Просмотр страницы;

● Условие активации триггера – Некоторые просмотры страниц;

Активация триггера при наступлении события и выполнения всех этих условий: paramURL не равно undefined.

Рис. 541. paramURL не равно undefined

Сохраняем триггер.

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

● Создаем пользовательский HTML-тег;

● Название – Tag – podmenaZag (может быть любым);

● HTML

Рис. 542. Пользовательский HTML-тег

Что же добавлять в текстовое поле? Какой фрагмент кода? Перед реализацией этого шага необходимо определить атрибуты заголовка, на основании которого мы можем производить изменения. Именно от этого будет зависеть реализация пользовательского HTML в Google Tag Manager.

Поясним на конкретном примере. Переходим на наш сайт и открываем консоль разработчика, чтобы посмотреть фрагмент кода нашего заголовка.

Рис. 543. Фрагмент кода заголовка в консоли разработчика

Если бы у данного заголовка h1 был атрибут id со значением, например, zagolovok (может быть другим), то фрагмент кода, который нужно вставить тег, выглядел так:

Рис. 544. Фрагмент JS-кода в случае, если бы у нас был атрибут id

В данном случае конструкция document.getElementById(“zagolovok”).innerHTML=”{{podmeniZag}}”; изменяет содержимое HTML-элемента h1 с id = zagolovok на новое из переменной podmeniZag (нашей таблицы поиска).

Но у нас нет атрибута id, а есть class. Тогда необходимо использовать другую конструкцию для подмены. Вот пример реализации:

Рис. 545. Фрагмент кода реализации через class

Сначала мы объявляем переменную x, которой присваиваем значение всех элементов, которые имеют заданные имена классов. Сам метод getElementsByClassName () возвращает коллекцию дочерних элементов элемента с указанным именем класса.

В данном случае класс b-promo__content__title.title-border – это атрибут заголовка h1 в нашем примере (см. выше на скриншот). К узлам можно обращаться по номерам индексов. Индекс начинается с 0, поэтому в нашем примере x[0], то есть у 1 дочернего элемента изменяем HTML, подставляя пользовательскую переменную podmeniZag таблицы поиска.

Есть еще проще вариант. Использовать библиотеку jQuery. Тогда конструкция будет иметь вид:

Рис. 546. Используем jQuery и функцию .html()

Функция .html (newHTML) в jQuery заменяет содержимое всех выбранных элементов на newHTML. В нашем примере она заменяет содержимое значение заголовка на переменную podmeniZag, которая содержит значения в таблице поиска.

Есть и такой вариант. Использовать метод querySelector(). Он возвращает первый элемент, который соответствует указанному CSS-селектору в документе.

Рис. 547. Метод querySelector()

В теге мы выбираем условие активации триггера undefined и сохраняем тег.

Рис. 548. Условие активации тега – undefined

Проверяем корректность работы в режиме предварительного просмотра.

Рис. 549. Тег не сработал, переменной utm_content нет

Если мы переходим без метки в адресной строке, то тег не активируется и заголовок не подменяется. Все правильно. Давайте добавим к нашему url метку utm_content=zag3.

Рис. 550. Заголовок 3: Получите СРО «под ключ» за 666 дней! Работаем по всей России!

Тег сработал

Тег с меткой сработал, значение заголовка поменялось. Убедимся еще один раз. Теперь введем utm_content=zag4.

Рис. 551. Заголовок 4: Никогда не получите СРО! Мы не работаем в принципе! Тег сработал

Все работает корректно. Публикуем контейнер GTM и радуемся подменам.

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

Однако все же лучший способ реализации динамического контента на сайте – это серверная сторона (через тот же .php), а не браузерная, поскольку различные манипуляции с DOM могут привести к замедлению загрузки страницы у пользователя, да так, что он увидит эту подмену на сайте.

Допустимо использование такого приема в небольшом проекте (лендинге, несколько страничном сайте) и на малом объеме трафика (до 50–100 посетителей в день). Но если ежедневное количество пользователей гораздо больше, на сайте много заголовков и подмен, то рекомендуется реализовать все это через backend.

В заключение

Вот и подошло к концу первое в русскоязычном сообществе электронное руководство по самому популярному диспетчеру тегов Google Tag Manager. Мы постарались добавить в него самые важные навыки и знания, которые будут необходимы вам в процессе работы.

Обе части (теоретическая и практическая) подробно изложены и разобраны с примерами и скриншотами. Все, что необходимо делать – это просто читать, делать, читать снова, переосмысливать, и снова делать. Только так можно разобраться в чем-то новом и неизведанном. Ну и должно пройти какое-то время, чтобы началась адаптация и привыкание. Продукты Google в этом плане не исключение.

К тому же, если заложить основы работы с GTM получилось даже у меня за полгода (хотя бы на уровне «новичок»), то почему не сможете вы? Я в вас верю!

Практическая часть составлена из примеров, которые встречались команде GaSend и мне во время работы с различными проектами. Разумеется, в главе 3 разбирается лишь 5% от возможностей диспетчера тегов Google. Однако не стоит забывать, что данное электронное руководство является достоянием всемирной паутины и каждого интернет-маркетолога и веб-аналитика в мире.

Вы также можете принять участие в расширении примеров этой книги. Просто присылайте материалы мне на почту ya.osipenkov@icloud.com и свое согласие на публикую в следующей версии «Google Tag Manager для googлят: Руководство по управлению тегами» И это будет сделано!

Увидимся в следующих изданиях и на моих вебинарах!

Понравилась книга? Подписывайтесь на мои социальные сети:

● Vk.com – vk.com/ya.osipenkov

● Facebook.com – facebook.com/osipenkov.ru

● Instagram.com – instagram.com/yakov.osipenkov

● Telegram: t.me/osipenkovru

До встречи в январе 2019