Google Tag Manager для googлят: Руководство по управлению тегами

● Ярлык – Переменная {{Scroll Depth Threshold}}, которую мы активировали и «%» (что бы в отчетах Google Analytics мы видели значение и %, например 25%);

● Не взаимодействие – True.

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

● Идентификатор отслеживания – Прописываем код счетчика Google Analytics;

В данном примере код счетчика записан через переменную cod ua. Пример настройки переменной идентификатора GA:

Рис. 505. Переменная GA типа «Константа»

● Триггер активации – scroll – blog (триггер, который мы создали выше)

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

Рис. 506. Конечные настройки тега ga – scroll – blog

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

Рис. 507. Передача данных о глубине прокрутки в режиме отладки

Просматриваем переменные:

Рис. 508. Переменные

Если все передается корректно, не забудьте опубликовать контейнер GTM с изменениями.

Следует отметить, что если вы находитесь в самом низу страницы (100%) и обновите страницу, то триггер сработает для всех значений, которые вы настроили (25%, 50%, 75%,100%). Аналогично Google Tag Manager будет работать с якорными ссылками.

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

Рис. 509. Категория событий scroll blog

Категория scroll blog соответствует названию, которое мы прописали в теге.

Переходим на вкладку «Действия событий». В GTM мы прописывали часть url-страницы Page Path.

Рис. 510. Действия по событию – Page Path

Выбираем нужную нам страницу (кликаем по ней) и смотрим настроенный процент просмотров.

Рис. 511. Ярлык события – Процент скроллинга

Отслеживание глубины скроллинга в GTM с привязкой к автору статьи и категории в блоге

Немного усложним задачу. Теперь необходимо настроить передачу данных в Google Analytics и получить срез по каждой из статей в блоге по показателям (просмотры страниц, показатель отказов, средняя длительность просмотра страницы и % скроллинга), а также с учетом автора и категории публикации.

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

Итоговый отчет должен был выглядеть примерно так:

Рис. 512. Пример того, как это должно выглядеть на выходе

Используя дополнительный параметр, можно посмотреть статистику, например, по статьям конкретного автора и посадочной странице. Также помимо основной категории, на сайте присутствовал второй уровень вложенности, а именно категории делились еще на подкатегории. Например, «Новости» на «Медиа», «Маркетинг», «Поисковые системы» и «Сервисы».

Рис. 513. Категории и Подкатегории на сайте

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

Что мы делаем?

● создаем 3 специальных параметра в Google Analytics – «author», «category» и «subcategory name» с областью действия «Hit»;

Запоминаем индексы параметров – 1,2 и 3. Они нам пригодятся при создании тега в GTM.

Рис. 514. Специальные параметры: author, category name, subcategory name

● создаем 2 пользовательских показателя в Google Analytics – «scrolling» и «timing» с областью действия «Hit» для отслеживания количества скроллов и времени пребывания;

Рис. 515. Специальные показатели в Google Analytics: timing, scrolling

Запоминаем индексы показателей – 1 и 2. Они нам пригодятся при создании тега в GTM.

● создаем 3 пользовательских переменных в Google Tag Manager типа «Элемент DOM»

Метод выбора: CSS селектор

Селектор элементов: брался путем копирования значения через консоль разработчика (клавиша F12 в Google Chrome)

Рис. 516. Копирование CSS селектора элемента Author

Таким образом, три вышеописанные переменные имели одинаковые настройки, но разные селекторы элементов. Пример с переменной «author»:

Рис. 517. Переменная author в Google Tag Manager

Однако не все было так просто с «category» и «sub category». Копировав CSS-selector, мы убедились, что он одинаковый как для категории внутри статьи, так и для самой категории.

body > nav.page__breadcrumbs.breadcrumbs > span

Очень редко, но иногда приходится делать свои селекторы. В данном случае нам помог псевдокласс nth-child, который позволяет отследить определенный элемент списка из хлебных крошек. Например, :nth-child(3) позволяет отследить третий элемент.

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

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