Предыдущий ролик Следующий ролик  

Видео урок: Отладка Google Analytics и решение основных проблем при помощи диспетчера тегов

Советы по Google Analytics

Из предыдущего видео мы узнали, что процесс отладки начинается с нескольких основных шагов. Мы проверяем код. Затем проверяем наличие скрипта на JavaScript и тот факт, что он загружается и запускается. А после этого проверяем, отправляются ли данные обратно в Google Analytics посредством вызова Universal Analytics версии кода или запроса пикселя отслеживания (tracking pixel), известного как UTM-GIF, в устаревшей версии асинхронного кода Google Analytics - в файле ga.js. Все это можно увидеть на вкладке "Network" (Сеть). Файл analytics.js - это Universal Analytics версия Javascript кода, а с помощью следующего файла, в названии которого содержится слово "collect", выполняется обратный запрос на сервер Google.

Но если отладка выполняется с помощью системы управления тегами, отслеживание всех этих моментов может сильно усложниться, поскольку мы не можем просто открыть код и просмотреть его. Давайте разберемся в том, что я подразумеваю под этой сложностью. Вернемся обратно на страницу нашего сайта. Выберем пункт "Просмотр кода страницы" (View Page Source) и рассмотрим код, расположенный в нижней части. Мы видим уже не код Google Analytics, а тег "Google tag manager" (Диспетчер тегов). Подробнее диспетчер тегов и системы управления тегами мы рассмотрим в следующих выпусках. Но, по сути, это загружаемый в браузере JavaScript файл. Впоследствии этот файл запрашивает все необходимые файлы с сервера, в том числе и код Google Analytics.

Это позволяет вам выполнять все действия динамически, поскольку вы можете в режиме реального времени выбирать, для какой страницы какой код использовать. Вам не придется вставлять код досрочно при создании сайта. Таким образом, пока в коде страницы присутствует контейнер (container), вы можете при необходимости добавлять и удалять код на стороне сервера, не вставляя ничего досрочно. Это все, конечно, замечательно, но при таком подходе значительно усложняется процесс отладки. В предыдущем видео мы рассматривали такие проблемы, как отсутствие блока <<script>> и добавление шаблонного кода из справочного центра Google Analytics.

Теперь же, если что-то пойдет не так, будет намного сложнее выявить причины неполадок, поскольку код, по сути, скрыт за слоем системы управления тегами. Тем не менее, есть одна небольшая хитрость, которая поможет упростить анализ. Консультанты по аналитике должны пользоваться мощными инструментами, поэтому мы купили программное обеспечение под названием "Wasp", которое способно заглядывать внутрь тега "Google tag manager", и выпустили его бесплатно как плагин, таким образом, скачать его может каждый желающий. Просто введите в поисковике Google запрос "Wasp Chrome plugin". Следуйте по ссылкам, а затем добавьте этот плагин в Chrome.

Все, что мы будем делать далее, очень похоже на то, что мы делали до этого. Переходим к инструментам разработчика, но теперь работаем не с вкладками "Resources" (Ресурсы) и "Network" (Сеть), а с расположенной справа вкладкой "Wasp". Чтобы заставить плагин работать и открыть консоль WASP, нужно просто загрузить соответствующую страницу. Итак, давайте вернемся на наш тестовый сайт и увидим, как WASP загружает данные. Следует уделить внимание нескольким элементам интерфейса WASP. Во-первых, в консоли WASP есть раздел "Page Info" (Информация о странице). В этом разделе приводится общая информация о странице. Мы видим несколько переменных cookie и header. При необходимости здесь мы можем увидеть даже исходный код.

Но куда более интересно то, что мы видим теги и скрипты. Здесь скрипты - это, по сути, файлы javascript, в которых загружаются разные теги. А вот и наш диспетчер тегов. И файл gtm.js, который олицетворяет систему управления тегами. Как видите, от этого файла отходит небольшая синяя стрелка. Она указывает на то, что из системы управления тегами загружаются файлы analytics.js или файлы Google Analytics. Из файла analytics.js отправляется запрос на серверы Google посредством вот этого запроса "collect".

Итак, если мы рассмотрим файл analytics.js, то сможем увидеть не только код самого файла javascript, но и запросы, и то, откуда они первоначально вызывались. А теперь давайте рассмотрим пример посложнее. Перейдем на сайт компании Cardinal Path. Именно здесь вы и увидите всю мощь этого инструмента. Во-первых, для этого сайта используется гораздо больше тегов, и с него отправляется намного больше запросов. Здесь используются не только теги Google Analytics, но и множество других тегов маркетинга. Фактически, здесь упоминается несколько разработчиков. Но такие ситуации встречаются не так уж и редко. Давайте разберемся в том, что здесь происходит.

Во-первых, мы видим тот же самый скрипт диспетчера тегов, который уже видели до этого - gtm.js. Из диспетчера тегов мы загружаем файл analytics.js, Universal Analytics версию javascript кода, которую тоже уже видели ранее. Кроме того, мы загружаем систему Quant-Cast, а именно файл quant.js, который запрашивает собственный пиксель отслеживания. Если мы вернемся к файлу analytics.js, то увидим вызов уже наблюдаемой нами ранее строки "collect". Что же еще мы здесь увидим? UTM-gif файл. Файл UTM-gif, на самом деле, вызывается из файла DC.js.

Dc.js - это еще одна разновидность файла javascript, которую мы используем для Google Analytics. Но этот файл не загружается напрямую. На самом деле, он загружается из файла gas.js. Файл gas.js - это усовершенствованная версия кода Google Analytics. Фактически, этот скрипт является оберткой для Google Analytics, которую мы запускаем, чтобы получить некоторую функциональность Google Analytics. Пусть даже он и не загружается напрямую. Gas.js загружается из другого файла Javascript - cpga.js. Как видите, здесь используется довольно сложная схема.

Есть файл cp.js, который вызывает файл gas.js. Gas.js вызывает dc.js. Dc.js вызывает файл utm-gif. Таким образом, если бы вы попытались выяснить происхождение файла utm-gif, или, что более вероятно, захотели бы узнать, что происходит, вы увидели бы всего лишь то, что в систему Google Analytics поступают какие-то дополнительные данные. Возможно, что выясняя причину возникновения проблемы и пытаясь ее устранить (а это действительно бывает очень трудно сделать), вы и правда сможете найти эту причину, просто самостоятельно прочесав весь код. Однако если использовать правильные инструменты, то будет намного проще все это понять. На то, чтобы понять, что здесь происходит, мы потратили всего несколько секунд.

Есть еще кое-что, что вы можете сделать в консоли WASP. Если вы хотите немного привести здесь все в порядок, то можете скрыть любой из этих элементов. А если вы не хотите видеть все теги и скрипты одновременно, то можете раскрывать их по мере необходимости. Вы можете заглянуть внутрь каждого файла Javascript, просто нажав сюда. При этом вы увидите код JavaScript, который запускается в каждом из этих файлов. Итак, как видно из последнего примера, если в одном и том же браузере одновременно запускается несколько систем управления тегами и несколько файлов Javascript, то вложенные файлы для таких ситуаций вполне обычное явление. Но с помощью правильных инструментов вы сможете с легкостью увидеть, какие теги из каких файлов вызываются, и какая информация отправляется с вашего сайта на аналитические серверы.