Скачать расширение для браузера Google Chrome можно по ссылке.
Рис. 111. GTM Sonar
В правом верхнем углу на панели вы увидите иконку в виде красного прицела:
Рис. 112. Иконка и настройки GTM Sonar
По умолчанию иконка красная и статус «Выключен (Disabled)». Чтобы включить GTM Sonar, необходимо выбрать тип отслеживания: Click Listener, Link Click Listener или Form Submit Listener и нажать «Switch On».
Если сопоставлять настройки с триггерами GTM, то это будет выглядеть так:
Рис. 113. Сопоставление настроек GTM и GTM Sonar
Разберем пример взаимодействия пользователей с отправкой формы. Поскольку мы будем отслеживать форму, то в GTM Sonar выбираем Form Submit Listener и нажимаем Switch On. Чтобы исключить отслеживание кликов с помощью jQuery, нажмите «Click to turn off jQuery listeners».
В результате мы получим зеленый прицел и статус «Включен (Enabled)»:
Рис. 114. GTM Sonar активирован
Когда мы включаем GTM Sonar, происходит следующее:
1. все действия по умолчанию, которые были осуществлены кликами мыши по странице, приостанавливаются;
2. когда вы кликаете на элемент, информация о данном действии сохраняется в массиве debugDL в том же формате, что и в GTM.
Чтобы продемонстрировать это на конкретном примере, я сделаю тестовую заявку:
Рис. 115. Пример тестовой заявки на сайте
Нажав на кнопку отправить, я получу уведомление о совершенном событии. Когда элемент добавлен в debugDL, счетчик в иконке браузера начинает свою работу, и данный счетчик показывает количество объектов в массиве debugDL. Появилась циферка «1»:
Рис. 116. Количество объектов в массиве
Хотя в действительности я должен был увидеть вот это окно:
Рис. 117. Это страница «Спасибо» должна была быть после отправки заявки
Для чего мы избегаем клики на странице? Дело в том, что при отладке было бы лучше, если бы вы находились на той же самой странице, не переключаясь на другую. Остановка действий по умолчанию предотвращает работу ссылок. По причине того, что debugDL – это объект в текущем документе, он будет работать только на той страничке, на которой вы находитесь.
Когда вы выключаете debugger, действия по умолчанию становятся активными. DebugDL массив не будет очищен, и вы можете наблюдать за содержимым массива в течение всего времени, пока будете находиться на данной странице.
Теперь чтобы перейти к событию, откроем консоль разработчика и перейдем на вкладку Console. Введя команду debugDL и нажав Enter, мы увидим наш массив с объектом:
Рис. 118. Содержимое debugDL после отправки формы
Теперь эту информацию можно использовать для отслеживания формы и передачи данных в GTM и Google Analytics.
Подробнее об инструменте Симо Ахавы можете ознакомиться в его блоге по ссылке.
Другие инструменты
Безусловно, есть еще целый ряд других полезных плагинов, дополнений и расширений для браузеров, например, dataslayer, Analytics Pros dataLayer Inspector+, Da Vinci Tools, GTM Variable Builder и т.д. Мы рассмотрели самые популярные расширения для браузеров, которые используют в своей повседневной работе веб-аналитиков со всего мира.
Глава 2. Разбор Google Tag Manager
Интерфейс
В процессе знакомства с любым новым для себя продуктом у пользователей часто возникает проблема привыкания к самому сервису, программе или ее отдельным функциям. Будь-то это совершенно новый интерфейс Google AdWords, обновленный Google Analytics , или Google Tag Manager версии 2.
Вот так выглядит страница контейнера GTM одного из аккаунтов:
Рис. 119. Интерфейс Google Tag Manager
1. На главную страницу
При клике на данную стрелочку вы попадете на страницу tagmanager.google.com/#/home, где будут отображены все доступные вам контейнеры GTM.
Рис. 120. Список аккаунтов и контейнеров GTM
На главной странице возможно создание нового аккаунта, фильтра по .текущим, а также доступны общие настройки по каждому конкретному контейнеру. Фильтр доступен как по названию контейнера, так и по его идентификатору. То есть когда вы начнете вводить последовательность букв/цифр, Google Tag Manager сразу же выдаст соответствующий результат.
Рис. 121. Поиск по идентификатору контейнера
На главной странице в самом низу располагаются удаленные аккаунты и контейнеры. Чтобы удалить аккаунт или контейнер, необходимо обладать соответствующими правами.
Рис. 122. Удаленные аккаунты и контейнеры в Google Tag Manager
При удалении аккаунта через «Администрирование» в GTM он будет перемещен в корзину и окончательно удален через 30 дней. Вместе ним будут удалены все контейнеры, включая все теги, триггеры и переменные. Теги из этого контейнера больше не будут активироваться при посещении вашего сайта пользователями. При удалении контейнера он также будет перемещен в корзину и окончательно удален через 30 дней.
Рис. 123. Корзина
По клику на контейнер мы можем узнать точную дату удаления. По прошествии 30 дней данного контейнера в корзине уже не будет, также, как и возможности его восстановления. Если же нам понадобиться восстановить элемент из корзины, мы должны:
● выбрать его из списка;
● в открывшемся окне нажать кнопку «Восстановить».
Рис. 124. Сведения об удаленном аккаунте GTM
Еще нам будет доступна возможность экспорта контейнера и информация о пользователях, у которых есть разрешение на восстановление, а также электронная почта того человека, кто совершил операцию удаления (поле «Кем удалено»).
2. Портал Google Analytics Suite
В одном меню Google объединил все свои продукты, и теперь доступ к ним стал возможен через одну панель. Если вы захотите перейти в Google Analytics, Google Data Studio (Центр данных) или любой другой продукт, который привязан к данному аккаунту Google, просто нажмите на соответствующий значок на панели «Все аккаунты».
Рис. 125. Google Analytics Suite
3. Дополнительные настройки
Меню состоит из пользовательских настроек, отзывов и справки Google.
Рис. 126. Дополнительные настройки
В пользовательских настройках содержится информация по вашему роду деятельности (агентство, маркетолог, веб-разработчик), языку интерфейса Google Tag Manager и уведомлениях, связанных с новостями, анонсами новых функций, тестированию и различными предложениями от Google.
Рис. 127. Данные аккаунта
В разделе «Оставить отзывы» вы можете описать проблему работы с GTM или поделиться мнением с командой Google об этом инструменте. Справка позволяет получить ответы на интересующие вас вопросы. Просто введите необходимые ключевые слова и ознакомьтесь с результатами поиска.
Рис. 128. Справка Google
4. Аккаунты
Можно быстро переключаться между аккаунтами при условии, что вы залогинены в несколько из них.
Рис. 129. Несколько аккаунтов Google
5. Горизонтальное навигационное меню
Рис. 130. Рабочая область – Версии – Администрирование
Позволяет быстро переключаться между рабочими областями, версиями и панелью администрирования аккаунта и контейнера.
По умолчанию активна первая вкладка «Рабочая область» (пространство для работы с изменениями в диспетчере тегов), но в любой момент можно перейти на «Версии» (сохраненная копия контейнера в данный момент времени) или «Администрирование».
Рис. 131. Версии
На вкладке «Администрирование» можно управлять доступами, изменять настройки, на уровне аккаунта и контейнера, импортировать-экспортировать контейнеры, работать со средами и др.
Рис. 132. Администрирование
6. Идентификатор контейнера GTM
При клике на ID контейнера Google Tag Manager откроется окно с кодом, часть которого необходимо вставить в раздел <head> кода страницы как можно ближе к началу, а часть после открывающего тега