Выбрать главу

Таким образом, мы для двух категорий задаем общий CSS-селектор, с единственным отличием nth-child.

● для «category» .breadcrumbs .breadcrumbs__link:nth-child(2),

● для «sub category» .breadcrumbs .breadcrumbs__link:nth-child(3)

И получаем на выходе три переменные типа «Элемент DOM».

Рис. 518. Три переменные в GTM типа «Элемент DOM»

● создаем 4 переменных уровня данных для передачи событий, категорий, отслеживания времени пребывания и скроллинга

Рис. 519. Четыре переменных в GTM типа «Переменная уровня данных»

1. eventCategory: Имя переменной уровня данных – eventCategory (Версия 2)

2. eventAction: Имя переменной уровня данных – eventAction (Версия 2)

3. timing: Имя переменной уровня данных – time_on_page (Версия 2)

4. scrolling: Имя переменной уровня данных – percent_of_scrolling (Версия 2)

Далее создаются 2 триггера:

● 1 (autoEvent) с типом «Пользовательское событие» и условием активации «Все специальные события»;

● 2 (DOM Ready) с типом «Модель DOM готова» и условием активации «Все события».

Рис. 520. Два триггера в GTM

Затем переходим к тегам и окончательно связываем наши триггеры и переменные.

Создаем новый тег autoEvent UA для передачи данных в GA с типом конфигурации Universal Analytics и добавляем в него созданные раннее переменные. Индексы специальных параметров и показателей берем из Google Analytics (см. выше).

Триггер активации – autoEvent. Получаем такую конфигурацию:

Рис. 521. Конфигурация тега autoEvent UA

Теперь осталось добавить тег scroll tag на определение глубины скроллинга. Для этого я воспользовался скриптом от Анастасии Тимошенко из агентства интернет-маркетинга OdesSeo. Подробнее о том, что это за скрипт и как он работает, читайте здесь.

Тип тега – «Пользовательский HTML». Триггер активации – DOM Ready.

Рис. 522. Тег scroll tag, скрипт Анастасии Тимошенко (OdesSeo)

В общей сложности, в контейнере GTM получилось 4 тега (2 для решения задачи, 2 – коды счетчиков Google Analytics и Яндекс.Метрика)

Рис. 523. Теги в Google Tag Manager

Также нужно переопределить триггер для «Код счетчика Universal Analytics». Раньше там был триггер активации – All Pages, а теперь DOM Ready.

Схематично работу по созданию тегов, триггеров и переменных в Google Tag Manager можно представить так:

Рис. 524. Схема реализации

В Google Analytics осталось создать вычисляемый показатель, который позволит отслеживать среднюю глубину скроллинга по каждому материалу в %. Формула его такая:

Avg. Scrolling Per. = ( {{scrolling}} / 100 ) / {{Просмотры страниц}}

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

Все, что теперь осталось, это создать кастомный отчет в Google Analytics с нужными параметрами и показателями.

Рис. 525. Специальный отчет в Google Analytics

Отслеживание 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, в зависимости от того видит ли пользователь видео, когда срабатывает событие или нет.