Рис. 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, мы убедились, что он одинаковый как для категории внутри статьи, так и для самой категории.
Очень редко, но иногда приходится делать свои селекторы. В данном случае нам помог псевдокласс nth-child, который позволяет отследить определенный элемент списка из хлебных крошек. Например, :nth-child(3) позволяет отследить третий элемент.
Таким образом, мы для двух категорий задаем общий 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 готова» и условием активации «Все события».
