Google Tag Manager для googлят: Руководство по управлению тегами

Рис. 25. Переменная уровня данных

Среды в Google Tag Manager позволяют протестировать изменения, внесенные в контейнер, перед их публикацией на сайте. По умолчанию в контейнере создается две среды – Live (реальная) и Latest (последняя).

Рис. 26. Среды в GTM

Подробнее о каждом из вышеописанных терминов разберем в последующих разделах книги.

Навыки и знания, необходимые в работе с GTM

На мой взгляд, наиболее ценные навыки и знания, которые необходимы веб-аналитику при работе с проектами, заключаются не в умении пользоваться интерфейсами Google Tag Manager, Google Analytics, Яндекс.Метрика и т.д., знать где расположены различные кнопочки и функции, а в понимании принципов работы с данными – делать из них выводы, которые будут ценными для компании (клиента, заказчика) и в дальнейшем приведут к положительному результату.

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

Помимо этого, аналитик должен понимать, как работает тот или иной канал трафика, по которым посетители приходят на сайт. Он должен уметь пользоваться не только базовыми и бесплатными инструментами, но и иметь возможность предложить заказчику более серьезные сервисы и ориентироваться в них.

Рис. 27. Пример потоков данных проекта

Изображение выше иллюстрирует один из примеров настройки потоков данных для среднего интернет-магазина. Вы уже видели эту картинку в самом начале руководства в разделе «Собираю команду». Если вы считаете себя неплохим веб-аналитиком, задайте вопрос: «Сколько сервисов и технологий из перечисленных я»:

А. из этого списка знаю;

Б. пробовал внедрить для заказчика;

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

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

Переходя к инструментарию веб-аналитика в целом, и в Google Tag Manager в частности, я бы выделил следующие:

● счетчики веб-аналитики Google Analytics или Яндекс.Метрика;

● диспетчер тегов Google Tag Manager;

Он позволяет упростить взаимодействие между вами и заказчиком, снизив при этом зависимость от команды разработчиков сайта. Чтобы максимально использовать функционал системы управления тегами, желательно знать основы HTML, CSS и язык программирования JavaScript. Именно в такой последовательности лучше всего начинать обучение: 1. HTML; 2. CSS; 3. JavaScript.

HTML (от англ. HyperText Markup Language – «язык гипертекстовой разметки») – стандартизированный язык разметки документов в интернете. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Рис. 28. HTML

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

Один из самых важных механизмов CSS – селекторы. Это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля. В процессе работы с GTM вы будете очень часто сталкиваться с ситуацией, когда необходимо настроить отслеживание клика по какому-либо элементу на веб-странице, а у этого элемента нет идентифицирующих его атрибутов, таких как, например, ID, class или URL. Тогда на помощь приходят CSS-селекторы.

Рекомендуемая литература: htmlbook.ru и книга Влада Мержевича «HTML и CSS на примерах».

Рис. 29. JavaScript

Как правило, счетчики веб-аналитики представляют собой фрагмент JavaScript кода, который размещается на отслеживаемых страницах сайта. Код Google Analytics, Google Tag Manager, Яндекс.Метрика – в основе всех их лежит JavaScript.

На JavaScript также можно писать скрипты для Google AdWords для автоматизации определенных действий.

Рис. 30. Библиотека jQuery

Помимо самого JS, не помешают знания jQuery. jQuery – библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Она помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими.

Рекомендуемая литература: learn.javascript.ru, Крис Минник и Ева Холланд «JavaScript для чайников», Марейн Хавербек «Выразительный JavaScript», Эрик Фримен и Элизабет Робсон «Изучаем программирование на JavaScript», Антон Шевчук «Учебник jQuery для начинающих».

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

Использование SQL-запросов может пригодиться при работе с BigQuery. В последнее время все чаще используются инструменты визуализации данных (Google Data Studio, Microsoft Power BI, Tableau и др.). В службе Power BI можно просматривать визуальные элементы, созданные с использованием R-скриптов, и взаимодействовать с ними. Они написаны на языке программирования R – самом популярном языке программирования среди специалистов по статистике, обработке и анализу данных.

Все большую популярность набирает и Python, который имеет встроенные библиотеки для анализа данных (Anaconda – Pandas). Не стоит забывать и про старый добрый Microsoft Excel с мощным функционалом для работы с табличными данными.

Образование в ВУЗах оставляет желать лучшего. Не берусь назвать ни один из университетов, кто готовил бы и выпускал специалистов по профессии «веб-аналитик». Разве что слышал о дополнительном образовании в ВШЭ (Высшая школа экономики). Но курсы и онлайн-тренинги, как правило, не дают полных знаний. Однако решение практических задач и аналитический склад ума является преимуществом и ускоряет освоение нового материала. Веб-аналитик без высшего образования – редкость в наше время.

CSS-селекторы в GTM

Если в книге «Google Analytics для googлят» одной из самых непростых тем для изучения по праву считают регулярные выражения (из-за сложного восприятия и запоминания синтаксиса команд, метасимволов), то в этой, пожалуй, ей равнозначны именно css-селекторы, поскольку знания в данной области лежат далеко за пределами анализа статистики и построения отчетов.

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

В процессе настройки аналитики часто приходится отслеживать клики по определенным элементам на странице сайта. Все просто, если у отслеживаемых элементов (кнопки, ссылки, формы и т.д.) есть атрибуты id или class. Например, как здесь (инспектирование кода веб-страницы в консоли разработчика):

Рис. 31. Атрибуты id и class у элемента на сайте

В Google Tag Manager для активации тега на данный элемент остается только настроить триггер со встроенными переменными Click Classes и Click ID.

Рис. 32. Пример условия активации триггера по Click ID

Но часто бывает, что у необходимого элемента нет таких атрибутов. Тогда на помощь приходят css-селекторы.

Селектор – это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применен стиль.

CSS-селекторы применяются в Google Tag Manager для условий активации триггеров, а также в пользовательских переменных, таких как «Видимость элемента», «Элемент DOM» и «Собственный код JavaScript».

Рис. 33. CSS-селекторы в триггерах и переменных GTM

Если атрибут нужного элемента не повторяется на странице, то рекомендуется использовать именно встроенные переменные. Но если один и тот же класс используется в нескольких элементах на странице, тогда рекомендуется использовать селекторы CSS.

Как правило, большинство настроек с использованием селекторов CSS приходится на связку «соответствует селектору CSS» + Click Element или Form Element.

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

Подробнее обо всех элементах HTML читайте в руководстве разработчиков Mozilla. Чаще всего бы будете встречаться с такими тегами, как <p>, <a>, <div>, <span>, <h1>…<h6>.

Кроме этого, вы должны познакомиться с объектной моделью документа (Document Object Model, DOM). Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами.

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

DOM определяет логическую структуру документа, способы доступа к элементам и их изменению. Документ может быть как HTML, так и XML. Когда DOM используется для определения логической структуры HTML-документа, значит речь идет о HTML DOM. Давайте рассмотрим пример:

Рис. 34. Пример HTML-документа

Представление DOM этого документа HTML выглядит следующим образом:

Рис. 35. Представление DOM для документа HTML

Здесь html, head, body, title, meta, h2, p, table, tr, td, Google Tag Manager для googлят, Интернет-маркетинг и веб-аналитика, 2018 и т.д. являются примерами объектов DOM. Они также называются элементами или узлами. Нижние блоки с пометкой «Текст» являются текстовыми узлами.

Чтобы отслеживать клики/события через GTM по определенным элементам на странице, необходимо понимать взаимосвязь между различными узлами документа.

DOM нужен для того, чтобы манипулировать страницей – читать информацию из HTML, создавать и изменять элементы. Получив узел, мы можем что-то сделать с ним. Все узлы в документе имеют иерархическое отношение друг к другу. Существует несколько специальных терминов для описания отношений между узлами:

● родительский узел (parent node) – родительским узлом по отношению к рассматриваемому объекту является узел, в который вложен рассматриваемый объект.

На примере выше по отношению к узлам <h2>, <p> и <table> элемент <body> является родительским. Для узла <title> родительским является узел <head>.

● узлы-потомки (child node) – узлом-потомком по отношению к рассматриваемому объекту является узел, который вложен в рассматриваемый объект. На нашей схеме по отношению к узлу <body> <h2>, <p> и <table> являются потомками. Для узла <head> потомками являются <title> и атрибут “meta”.

● узлы-братья (sibling node) – узлы, находящиеся на одинаковом уровне вложенности по отношению к их родительскому узлу. На нашей схеме узлами-братьями являются <body> и <head> по отношению к корневому <html>, а также <h2>, <p> и <table> по отношению к родительскому узлу <body>.

Самый верхний узел в DOM называется корневым. Так как объект document не является частью DOM, в нашем примере корневым является <html>. Он не имеет родителей и сам является родительским узлом по отношению к <head> и <body>.

В интернете в различных материалах можно встретить разные термины – предок, потомок (прямой и непрямой), сыновья, дочери, дети, ребенок, братья, сестры, правнуки и т.д. По сути, это одно и тоже. То, как вы привыкнете их называть, не имеет значения. Главное – это правильно понимать взаимосвязь между ними и уметь к ним обращаться.

Каждый объект HTML, кроме текстовых узлов, имеет свойства (атрибуты) и методы. Например:

Рис. 36. Фрагмент кода