Инструменты отладки Google Analytics

Бывали ли у вас ситуации, когда Google Analytics работал не так, как предполагалось? Не срабатывали цели, события, не передавались данные по электронной торговле или не отслеживались какие-либо другие действия пользователей на сайте? Уверен, что да.

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

В режиме реального времени

Конечно же, самым простым и базовым методом проверки чего-либо в Analytics является группа отчетов «В режиме реального времени». С помощью них можно понять, передаются ли данные в результате выполнения целей (конверсий) и событий на сайте.

Инструменты отладки Google Analytics
В режиме реального времени

При тестировании используйте utm_метки, чтобы разграничить трафик и сразу же определить свой переход в случае, если на сайте есть еще кто-то, кроме вас. Например, так:

https://osipenkov.ru/?utm_source=yakov&utm_medium=test

Инструменты отладки Google Analytics
Переход с меткой UTM

Если трафик не поступает на сайт (вы не видите ваши обращения), то необходимо убедиться в отсутствии фильтра, который ограничивает поступление этого трафика с собственного IP-адреса.

Отчеты «В режиме реального времени» позволяют отследить пользователей, которые находятся на сайте в текущий момент времени, страницы, которые они просматривают и действия, которые при этом совершают.

Консоль разработчика (браузер)

Как еще удостовериться в том, что нужное нам событие передалось в Google Analytics? Для этого можно использовать собственный браузер и консоль разработчика (Developer Tools). При нажатии клавиши F12 (для браузера Google Chrome) откроется панель, на которой необходимо перейти на вкладку «Network (Сеть)». В результате загрузки страницы мы увидим следующие данные:

Инструменты отладки Google Analytics
Фильтр в Network по слову analytics

Во-первых, на странице загружается файл analytics.js. Во-вторых, нечто, начинающееся со слова «collect». Именно эти данные и отправляют обратно в Google Analytics. Если у вас загружается большое количество данных, можно применить фильтр по значению analytics в соответствующем поле.

Нажав на collect, можно увидеть пользовательские данные, которые передались в Google Analytics. Например, тот же Client ID:

Инструменты отладки Google Analytics
Client ID

Существует несколько проблем из-за которых данные не передаются в Google Analytics:

  1. первоначальный JavaScript не загружается (запроса analytics.js нет в консоли разработчика);

В этом случае проверьте корректность установки кода в нужное место и сам фрагмент кода, его полный внешний вид, от <script> до </script>.

  1. Код загружается, но не отправляются данные в Google Analytics

Как правило, это связано с тем, что вы скопировали код с другого сайта или вообще из справки Google, при этом не подогнали его под свой сайт и не изменили идентификатор отслеживания.

Как понять, что данные отправились именно в Google Analytics? Посмотрите на Request URL. Перед вами будет запрос с данными, которые передаются в Analytics через Measurement Protocol.

Measurement Protocol

Инструменты отладки Google Analytics
Запрос в Google Analytics

Запрос по Measurement Protocol (MP) формируется из строки пользовательского агента (User agent), строки отправки (transport), и строки набора данных с параметрами (payload data). Cтроки отправки (transport) указывают куда отправлять MP запрос. Они состоят из двух частей:

  • адрес Google Analytics (куда отправлять данные, https://www.google-analytics.com/, скриншот выше);
  • конечная точка URL (один или несколько обращений в запросе).

О том, что означают обязательные (v, tid, cid, t) и дополнительные параметры, как правильно формировать запросы и передавать их в Google Analytics, разберем в отдельной статье.

Проверить сформированный запрос можно с помощью инструмента Hit Builder, отправляя данные в Google Analytics вручную (метод POST).

Справка по параметрам Measurement Protocol.

Google Analytics Debugger

Расширение для браузера. Является надстройкой для консоли разработчика, в которую Debugger отправляет без изменения кода отслеживания school, информацию о том, что передается в Google Analytics. С помощью расширения можно не только проверить собственные страницы, но и узнать, как Analytics работает на других сайтах.

Инструменты отладки Google Analytics
Google Analytics Debugger

Для установки перейдите по ссылке. В панели браузера в правом верхнем углу у вас должен появиться значок:

Инструменты отладки Google Analytics
GA Debug: ON

После активации в панели разработчика на вкладке «Console (Консоль)» появится информация:

Инструменты отладки Google Analytics
Debugger в Console

Необходимо отметить, что после включения Google Analytics Debugger отладка производится с помощью analytics_debug.js.

Инструменты отладки Google Analytics
analytics_debug.js

Расширение для браузера автоматически изменило библиотеку analytics.js на отладочную версию. Чтобы включить отладочную версию analytics.js вручную, следует изменить URL в коде отслеживания JavaScript с https://www.google-analytics.com/analytics.js на https://www.google-analytics.com/analytics_debug.js:

Инструменты отладки Google Analytics
Добавление debug в код отслеживания Google Analytics

Примечание: отладочную версию analytics.js следует использовать только при разработке сайта и устранении ошибок, так как она значительно больше основной библиотеки и может существенно замедлить загрузку страниц.

Если вы не хотите, чтобы данные передавались в Google Analytics (например, в среде разработки или тестирования), вы можете отключить задачу sendHitTask. Подробнее об этом читайте в официальной справке разработчиков Google.

Разберем пару команд из консоли Google Analytics Debugger.

Инструменты отладки Google Analytics
LOG команд GA Debugger
  1. Запуск analytics_debug.js. Консоль сообщает, что этот скрипт предназначен только для тестирования и отладки;
  2. Инициализация Google Analytics;
  3. Команда на создание счетчика Universal Analytics и нового трекера с именем gtag_UA Все дальнейшие команды будут работать с Analytics по имени трекера;
  4. Автоматическая конфигурация домена cookie osipenkov.ru, поскольку в фрагменте кода отслеживания JavaScript устанавливалось для поля cookieDomain значение ‘auto’.
  5. Запуск команды ga(Function)

Вызов функции очереди команд ga() путем передачи в нее функции запланирует выполнение переданной функции в следующей позиции в очереди. Так как команды выполняются только после полной загрузки библиотеки analytics.js, чаще всего передача функции в очередь выполняется с целью обратного вызова после загрузки библиотеки.

Подробнее об этом читайте в официальной справке разработчиков Google.

  1. Запуск команды и отправки данных о просмотре страницы «PageView» с дополнительными полями:
  • forseSSL — принудительное использование SSL (по умолчанию значение ‘false’);
  • &gtm — устанавливает значение параметра &gtm:u5o;
  • hitCallback — с помощью нее можно задать функцию, которая будет выполняться после обработки команды;
  • dimension1пользовательский параметр, который мне необходим для передачи Client ID в Google Analytics;

Справка по полям analytics.js доступна здесь.

Чуть ниже доступны запрос по протоколу, который передает данные в Google Analytics (Sent beacon) и блок с параметрами из запроса, их расшифровка и принятые значения:

Инструменты отладки Google Analytics
Блок с параметрами из запроса со значениями и сам запрос по протоколу

Иногда данные отправляются в Google Analytics во время перехода со страницы на страницу, перезагрузки страницы или тогда, когда вы отправляете заполненную форму, и вас отправляет на другую страницу. В этих случаях нет возможности отследить информацию ни на старой странице, ни на новой (консоль очищается и там нет данных).

Решается это путем использования функции «Preserve log».

Инструменты отладки Google Analytics
Функция Preserve log в консоли

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

Google Tag Assistant Recordings (GTAR)

GTAR — это часть расширения Google Tag Assistant для браузера Chrome. Инструмент позволяет быстро выполнять проверку или диагностику сайта, анализировать внедрение кода Analytics и устранять неполадки.

Когда у вас включена функция Google Tag Assistant Recordings, будут записываться все страницы, даже те, которые не являются частью вашего сайта или создаются динамически (например, страница просмотра заказа в корзине). После остановки записи создается отчет с вашими действиями. Действия других пользователей не учитываются.

Инструменты отладки Google Analytics
Tag Assistant Recordings

Подробнее о работе функции Google Tag Assistant Recordings читайте в официальной справке Google или в статье Google Tag Assistant в моем блоге.

Web Analytics Solution Profiler (WASP)

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

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

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

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

Для установки перейдите по ссылке. В панели браузера в правом верхнем углу у вас должен появиться значок:

Инструменты отладки Google Analytics
Значок WASP.inspector: Analytics Solution Profiler

После этого откройте консоль разработчика (Ctrl+Shift+I) и перейдите на новую созданную вкладку WASP. Перезагрузите страницу. Для каждой страницы будет доступна своя визуализация в виде «карты путей».

Инструменты отладки Google Analytics
Консоль WASP

Верхний уровень:

  • Page Info (общая информация о странице);
  • dataLayer (уровень данных);
  • Tags (теги);
  • Scripts (скрипты).

Каждый из уровней можно развернуть/свернуть. В правом блоке отображается информация о передаваемых данных, а стрелочками показаны связи между запросами. Теги для удобства можно скрывать и блокировать.

Инструменты отладки Google Analytics
Скрытие и блокировка тегов

WASP является незаменимым помощником в руках опытных маркетологов и веб-аналитиков и обладает мощнейшим функционалом по определению всех типов тегов и взаимодействию их друг с другом.

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

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

Yakov Osipenkov | 06.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.