Плагины и расширения для браузеров GTM

Для упрощения работы с Google Tag Manager, Google Analytics и улучшения производительности интернет-маркетолог/веб-аналитик в своей практике может использовать дополнительные инструменты — плагины и различные расширения для браузеров. Давайте разберем несколько самых популярных помощников для GTM.

Читайте также статью «Инструменты отладки Google Analytics»

Web Analytics Solution Profiler (WASP)

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

WASP запоминает состояние dataLayer после того, как вы покинули страницу и перешли на следующую. Этот функционал является большим плюсом, поскольку в режиме отладки GTM не позволяет видеть, что произошло на предыдущей странице.

Другие особенности:

  • обнаружение всех типов тегов, включая те, которые отправляются через POST;
  • SEO информация о странице (URL, title, description, keywords, cookie и др.);
  • возможность скрытия и блокировки тега;
  • декодирование информации для Google Analytics и других сервисов;
  • удобная визуализация, которая показывает отношения между всеми тегами с помощью связей в виде «стрелочек».
Плагины и расширения для браузеров GTM
WASP.inspector

Расширение предназначено для «продвинутых» пользователей. Скачать расширение для браузера Google Chrome можно по ссылке.

Code Editor for GTM

Расширение подсвечивает синтаксис JavaScript кода в интерфейсе Google Tag Manager, а также позволяет работать в полноэкранном режиме. Настройка очень простая – скачивание, установка, и активация на странице GTM.

Плагины и расширения для браузеров GTM
Смена цветовой темы GTM

Будет особенно актуально для веб-разработчиков, которые привыкли использовать различные темы с подсветкой кода в других редакторах, например, в Notepad++, Sublime Text, Atom, Visual Studio Code и т.д.

Плагины и расширения для браузеров GTM
Code Editor for GTM

Скачать расширение для браузера Google Chrome можно по ссылке.

Tag Manager Injector

Расширение позволяет начать работу с Google Tag Manager до того, как код контейнера будет размещен на страницах сайта. Это бывает особенно полезным, когда требуется начать работу над установкой GTM, но доступы по какой-либо причине заказчик или его команда оперативно предоставить не могут.

Плагины и расширения для браузеров GTM
Tag Manager Injector

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

Плагины и расширения для браузеров GTM
Настройки Tag Manager Injector

Затем необходимо прописать идентификатор контейнера GTM без каких-либо пробелов (поле «GTM Container ID»), а также домен (поле «Include Domain(s), на котором данный контейнер будет использоваться и нажать на кнопку «START»:

Плагины и расширения для браузеров GTM
Активация Tag Manager Injector

Настройки TMI позволяют добавлять фрагмент GTM только на определенные страницы сайта. Для этого нужно переключить поле «exact match» на «regex (ignore case)» и указать те страницы, к которым вы хотели бы применить изменения. Без помощи регулярных выражений здесь не обойтись.

В результате произойдет перезагрузка текущей страницы, Tag Manager Injector напишет, что GTM контейнер активирован, а внизу страницы появится панель отладки:

Плагины и расширения для браузеров GTM
Tag Manager Injector активирован

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

Tag Manager Injector позволяет имитировать выполнение кода, передающего информацию в уровень данных. Для этого в соответствующее поле введите информацию в виде пары “ключ”:”значение”.

Плагины и расширения для браузеров GTM
dataLayer.push ({});

После завершения всех настроек отключите расширение с помощью кнопки «STOP».

Плагины и расширения для браузеров GTM
Остановка работы Tag Manager Injector

Важно: плагин искусственно устанавливает GTM — но только для вас, в вашем браузере. Поделиться информацией с другим человеком вы не сможете. Также описанные выше действия не заменяют собой процесс внедрения Google Tag Manager путем размещения его кода на всех страницах сайта. Если вы хотите, чтобы GTM корректно работал, необходимо добавить два фрагмента кода на отслеживаемые страницы сайта согласно руководству Google.

Tag Manager Injector может быть использовать в режиме «инкогнито».

Google Tag Manager Blocker

Очень простое расширение для браузера Mozilla Firefox, которое блокирует передачу данных посетителя сайта в GTM, следовательно, и в Google Analytics и Яндекс.Метрика. Включается/выключается всего одним кликом.

Плагины и расширения для браузеров GTM
Google Tag Manager Blocker

Рекомендуется использовать при тестировании, каких-либо изменениях/правках на сайте и тогда, когда вы не хотите, чтобы ваш заход был зафиксирован системами веб-аналитики. Скачать расширение можно по ссылке.

GTM Sonar

Расширение для браузера разработал эксперт по Google Tag Manager и Google Analytics, автор самого популярного блога в мире на эти темы, Симо Ахава (Simo Ahava, simoahava.com).

Его творение, GTM Sonar (прошлое название GTM AutoEvent Listener Debugger) позволяет блокировать переход на другую страницу, но при этом формирует работу тегов таким образом, как будто вы совершили переход. Данные по действиям (кликам по элементам, по ссылкам или по формам) сохраняются в массив с именем debugDL, содержимое которого можно в консоли разработчика.

Скачать расширение для браузера Google Chrome можно по ссылке.

Плагины и расширения для браузеров GTM
GTM Sonar

В правом верхнем углу на панели вы увидите иконку в виде красного прицела:

Плагины и расширения для браузеров GTM
Иконка и настройки GTM Sonar

По умолчанию иконка красная и статус «Выключен (Disabled. Чтобы включить GTM Sonar, необходимо выбрать тип отслеживания: Click Listener, Link Click Listener или Form Submit Listener и нажать «Switch On».

Если сопоставлять настройки с триггерами GTM, то это будет выглядеть так:

Плагины и расширения для браузеров GTM
Сопоставление настроек в интерфейсе GTM и GTM Sonar

Разберем пример взаимодействия пользователей с отправкой формы. Поскольку мы будем отслеживать форму, то в GTM Sonar выбираем Form Submit Listener и нажимаем Switch On. Чтобы исключить отслеживание кликов с помощью jQuery, нажмите «Click to turn off jQuery listeners».

В результате мы получим зеленый прицел и статус «Включен (Enabled:

Плагины и расширения для браузеров GTM
GTM Sonar активирован

Когда мы включаем GTM Sonar, происходит следующее:

  1. все действия по умолчанию, которые были осуществлены кликами мыши по странице, приостанавливаются;
  2. когда вы кликаете на элемент, информация о данном действии сохраняется в массиве debugDL в том же формате, что и в GTM.

Чтобы продемонстрировать это на конкретном примере, я сделаю тестовую заявку:

Плагины и расширения для браузеров GTM
Пример тестовой заявки на сайте

Нажав на кнопку отправить, я получу уведомление о совершенном событии. Когда элемент добавлен в debugDL, счетчик в иконке браузера начинает свою работу, и данный счетчик показывает количество объектов в массиве debugDL. Появилась циферка «1»:

Плагины и расширения для браузеров GTM
Количество объектов в массиве

Хотя в действительности я должен был увидеть вот это окно:

Плагины и расширения для браузеров GTM
Это страница «Спасибо» должна была быть после отправки заявки

Для чего мы избегаем клики на странице? Дело в том, что при отладке было бы лучше, если бы вы находились на той же самой странице, не переключаясь на другую. Остановка действий по умолчанию предотвращает работу ссылок. По причине того, что debugDL — это объект в текущем документе, он будет работать только на той страничке, на которой вы находитесь.

Когда вы выключаете debugger, действия по умолчанию становятся активными. DebugDL массив не будет очищен, и вы можете наблюдать за содержимым массива в течение всего времени, пока будете находиться на данной странице.

Теперь чтобы перейти к событию, откроем консоль разработчика и перейдем на вкладку Console. Введя команду debugDL и нажав Enter, мы увидим наш массив с объектом:

Плагины и расширения для браузеров GTM
Содержимое debugDL после отправки формы

Теперь эту информацию можно использовать для отслеживания формы и передачи данных в GTM и Google Analytics.

Подробнее об инструменте Симо Ахавы можете ознакомиться в его блоге по ссылке.

Другие инструменты

Безусловно, есть еще целый ряд других полезных плагинов, дополнений и расширений для браузеров, например, dataslayer, Analytics Pros dataLayer Inspector+, Da Vinci Tools, GTM Variable Builder и т.д. Мы рассмотрели самые популярные расширения для браузеров, которые используют в своей повседневной работе веб-аналитиков со всего мира. В статье, посвященной инструментам отладки Google Analytics, встречаются и те, которые применимы для Google Tag Manager. Например, Google Analytics Debugger и Google Tag Assistant.

Понравилась статья? Подписывайтесь на социальные сети:

Я также оказываю помощь в настройке контекстной рекламы и веб-аналитики. Подробнее здесь.

Yakov Osipenkov | 28.06.2018

КонтактыКонтакты

Связаться

Контактная информация

Выпускник МГТУ им. Баумана (2008-2014), ведущий специалист по контекстной рекламе компании ConvertMonster (2016-2017), сертифицированный специалист по Google AdWords и Google Analytics, автор курса Google Adwords 3.0 (2017) и публикаций учебных материалов по продуктам Google на seonews.ru, searchengines.ru, webpromoexperts.com.ua, менеджер по мобильному трафику в компании Kokoc (2017-март 2018)

По вопросам консультаций, сотрудничества и предложений:

Skype

yasha.cmteam

E-mail

ya.osipenkov@icloud.com

Обратная связь

Имя:

E-mail:

Тема письма:

Ваше сообщение:


УслугиУслуги

Чем полезен
E-Commerce

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Responsive Design

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Web Security

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Behold appear first, kind all i saying fowl man itself moved which every open shall moved subdue appear.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

  •  Contabile computer 100% responsive design
  •  Contabile laptop 100% responsive design
  •  Contabile tablet 100% responsive design
  •  Contabile smartfon 100% responsive design

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

E-COMMERCE

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Обо мнеОбо мне

Интернет-маркетолог
  • Ведущий специалист по контекстной рекламе агентства Convert Monster
  • Сертифицированный специалист Google AdWords
  • Спикер и куратор на курсах “Специалист по трафику, трафик-менеджер”, “Интернет-маркетолог за 80 дней”
  • Опыт работы в интернет-маркетинге: 2 года
  • Специализация: интернет-магазины и посадочные страницы (Landing Page)

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

Amy Johnson
Amy Johnson
Java Developer, Htmlstream

Lorem Ipsum is simply dummy text of the printing and typesetting industry dummy text of the printing and typesetting.

John Doe
John Doe
Developer

REVIEWS

  • 0%
    HTML5
  • 0%
    CSS3
  • 0%
    BOOTSTRAP
  • 0%
    WORDPRESS

MY SKILLS

Happy Clients
0
working hours
0
coffee consumed
0
solved tickets
0
01/8/00 - 18/6/102012 - 2015
FRONT-END DEVELOPER

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

01/8/00 - 18/6/102010 - 2012
COMPUTER UNIVERSITY

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra grape. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

01/8/00 - 18/6/102000 - 2010
COMPUTER SCHOLL

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

КонтактыКонтакты

Связаться

Контактная информация

Выпускник МГТУ им. Баумана (2008-2014), ведущий специалист по контекстной рекламе компании ConvertMonster (2016-2017), сертифицированный специалист по Google AdWords и Google Analytics, автор курса Google Adwords 3.0 (2017) и публикаций учебных материалов по продуктам Google на seonews.ru, searchengines.ru, webpromoexperts.com.ua, менеджер по мобильному трафику в компании Kokoc (2017-март 2018)

По вопросам консультаций, сотрудничества и предложений:

Skype

yasha.cmteam

E-mail

ya.osipenkov@icloud.com

Обратная связь

Имя:

E-mail:

Тема письма:

Ваше сообщение:


УслугиУслуги

Чем полезен
E-Commerce

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Responsive Design

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Web Security

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Behold appear first, kind all i saying fowl man itself moved which every open shall moved subdue appear.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

  •  Contabile computer 100% responsive design
  •  Contabile laptop 100% responsive design
  •  Contabile tablet 100% responsive design
  •  Contabile smartfon 100% responsive design

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

E-COMMERCE

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Обо мнеОбо мне

Интернет-маркетолог
  • Ведущий специалист по контекстной рекламе агентства Convert Monster
  • Сертифицированный специалист Google AdWords
  • Спикер и куратор на курсах “Специалист по трафику, трафик-менеджер”, “Интернет-маркетолог за 80 дней”
  • Опыт работы в интернет-маркетинге: 2 года
  • Специализация: интернет-магазины и посадочные страницы (Landing Page)

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

Amy Johnson
Amy Johnson
Java Developer, Htmlstream

Lorem Ipsum is simply dummy text of the printing and typesetting industry dummy text of the printing and typesetting.

John Doe
John Doe
Developer

REVIEWS

  • 0%
    HTML5
  • 0%
    CSS3
  • 0%
    BOOTSTRAP
  • 0%
    WORDPRESS

MY SKILLS

Happy Clients
0
working hours
0
coffee consumed
0
solved tickets
0
01/8/00 - 18/6/102012 - 2015
FRONT-END DEVELOPER

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

01/8/00 - 18/6/102010 - 2012
COMPUTER UNIVERSITY

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra grape. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

01/8/00 - 18/6/102000 - 2010
COMPUTER SCHOLL

Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape.

Бесплатные уроки по контекстной

рекламе и веб-аналитике!

Решаем задачи

Общаемся

Делимся

Спасибо за подписку!