Яков Осипенков
Google Tag Manager для googлят: Руководство по управлению тегами
Навыки и знания, необходимые в работе с 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. Фрагмент кода
● <a> – это элемент HTML;
● href, class – атрибуты элемента <a>;
● dataLayer.push () – это метод, который выполняется в ответ на событие onclick (возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick).
Google Tag Manager по умолчанию отслеживает все основные элементы и атрибуты, но не отслеживает кастомные (пользовательские) атрибуты.
Когда мы используем CSS-селекторы, мы находим элементы в DOM. для управления внешним видом HTML-документа существует формальный язык CSS. CSS это аббревиатура «Cascading Style Sheets» или «Каскадные Таблицы Стилей». Обычно CSS называют просто «стили». На текущий момент существует несколько спецификаций (CSS1, CSS2, CSS2.1, CSS3, CSS4). Последняя содержит незначительные изменения, и поэтому самой популярной и часто используемой на данный момент является CSS3.
Как правило, все стили веб-сайта выносятся в отдельный файл с расширением .css, к которому впоследствии можно обратиться по определенному пути.
Селекторы могут быть:
● простыми (напрямую идентифицируют элемент или несколько элементов страницы на основании типа элемента (или его класса (class) или id.);
● по атрибутам (позволяют искать элементы по их атрибутам attributes и значениям этих атрибутов. Делятся на две категории: селекторы наличия и значения атрибута и селекторы подстроки в значении атрибута);
● псевдоселекторами (те, что выбирают только часть элемента или только элементы в определенном контексте. Бывают двух типов – псевдоклассы и псевдоэлементы);
● комбинированными (селекторы и их взаимосвязи между друг другом выражаются посредством комбинаторов);
Давайте рассмотрим каждый вид подробнее.
Простые селекторы
К ним относятся: селекторы классов (class selectors) и селекторы по ID.
Селектор класса состоит из точки (.), за которой следует имя класса. Имя класса – это любое значение, не содержащее пробелов в HTML-атрибуте class.
Рис. 37. Пример селектора классов
Пример .form_button. Это означает, что css-селектор .class соответствует всем элементам с классом .form_button (class=”form_button”).
Рис. 38. Клик по элементам, соответствующим CSS-селектору класса .form_button
ID-селектор состоит из символа решетки (#), за которым следует ID нужного элемента. Каждый элемент может иметь уникальный идентификатор, назначаемый атрибутом id.
Рис. 39. Пример селектора по ID
Пример #maiLeaderboard. Это означает, что css-селектор #id соответствует всем элементам с идентификатором maiLeaderboard (id=”mainLeaderboard”).
Рис. 40. Клик по элементам, соответствующим CSS-селектору
c идентификатором #maiLeaderboard
Для выбора всех элементов на странице существует универсальный селектор (*). Помните этот спецсимвол в регулярных выражениях? Там он соответствует 0 или более предыдущих элементов, а здесь служит для одновременного установления одного стиля для всех элементов веб-страницы. Например, чтобы задать шрифт или начертание текста.
Рассмотрим пример, в котором нам необходимо отследить клик по любому блоку внутри блока <div class="block">.
Рис. 41. Пример использования универсального селектора *
Настроить в GTM триггер на клик по элементу с классом "block", используя встроенную переменную Click Classes = “block”, не получится, так как сам клик будет приходиться на один из узлов-потомков блока block. А настраивать на каждый внутренний элемент (firstscreen dark-1, secondscreen dark-1 и т.д.) не целесообразно.
По этой причине будем использовать универсальный селектор * для класса .block:
Рис. 42. Клик по элементам, соответствующим CSS-селектору
класса .block и всех узлов-потомков с помощью универсального селектора *
Такая запись означает, что необходимо отслеживать клик по всем узлам-потомкам элемента с классом "block".
В CSS есть такое понятие, как «комбинаторы». Они позволяют объединить множество селекторов, что дает возможность выбирать элементы внутри других элементов, или смежные элементы.