5 расширений для браузера облегчающих работу с GA и GTM

Ga debugger

Это моё любимое расширение, которое я всегда использую при настройке GA. С его помощью можно выводить в консоль браузера все запросы, которые уходят с вашего сайта в GA. Соответственно вы можете найти где у вас проблемы, например при каком-то действии данные не отправляются или например отправляются не правильные данные. В моём блоге этому расширению посвящена отдельная статья

Ссылка на Gadebugger

Скриншот логов в консоли браузера, которые выводит GA debugger

Google tag assistant

Это расширение по функционалу похоже на предыдущее, оно также отслеживает запросы отправляемые с сайта в Google analytics. После активации записи, приложение начинает записывать все запросы GA, которые происходят в вашем браузере, затем вы можете открыть отчет, где будет история всех запросов отправляемых в GA. Удобно искать баги и делиться отчетами с другими.

Ссылка на Google tag assistant

Скриншот пример отчета tag assistant

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

Скриншот пример уведомлений об ошибках tag assistant

Tagmanager injector

Это расширение позволяет провести настройку GTM даже если на сайте код GTM еще не установлен. В расширении нужно ввести GTM container ID и указать домен для которого нужно активировать GTM. После этого в GTM нужно включить режим предварительного просмотра и на нужном сайте у вас будет показана панель отладчика GTM и вы сможете провести настройку GTM как будто он уже установлен на сайте. Данные будут собираться только из вашего браузера, чтобы данные  собирались о всех пользователях нужно все таки установить код GTM на сайт.

Ссылка на Tagmanager injector

Скриншот пример окна для запуска Tag Manager Injector

GTM variable builder

Это приложение полезно для тех, кто ничего не понимает в JS. Зачастую при настройке GTM требуется узнать css селектор элемента, чтобы получить его значение в переменную типа javascript или на странице есть несколько одинаковых элементов, например кнопок с одним и тем же классом, а вам нужно отследить клик по какой-то одной кнопке, для этого нужно получить её уникальный селектор.

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

Ссылка на GTM variable builder

Скриншот пример данных в консоли при работе GTM variable builder

GTM sonar

С помощью этого расширения можно определить атрибуты отправленных форм и кликов по элементам к которым можно привязаться при настройке GTM. Рассмотрим на примере формы. Если форма отправляется на сервер и происходит перезагрузка страницы, то в отладчике GTM вы не успеете увидеть срабатывание стандартного триггера для отслеживания форм и посмотреть, какие переменные типа element_class и element_id есть у тега form. Можно конечно открыть исходный код страницы и посмотреть в нем, но здесь мы рассматриваем решение этой задачи при помощи расширения.

Ссылка на GTM sonar

Для того чтобы воспользоваться плагином нужно выбрать тип отслеживаемого объекта, в нашем случае “Form Submit Listener” и нажать кнопку switch on. 

Скриншот пример интерфейса GTM sonar

Теперь при отправке формы она не будет отправлена и не произойдет перезагрузка страницы. Расширение отследит отправку формы и получит её атрибуты. Чтобы узнать эти атрибуты нужно открыть консоль браузера и ввести команду debugDL. Ниже скрин консоли в ней показаны class и id отправленной формы.

Скриншот пример данных в консоли при работе GTM sonar

P.S. Для тех кто дочитал до конца вот ссылка еще на один полезный сервис www.gachecker.com в него можно ввести адрес сайта и он обойдет каждую страницу сайта и проверит есть ли на них коды GA, GTM и других сервисов google.