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

CSS Selector Tester

Чтобы проверить правильность выбора определенного элемента для настройки триггера и его отладки в GTM, можно воспользоваться специальным расширением для браузера Google Chrome, которое называется CSS Selector Tester. Скачать его можно по ссылке.

Рис. 59. Расширение для браузера CSS Selector Tester

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

Рис. 60. Иконка CSS Selector Tester

У вас откроется дополнительное окно со строкой ввода селектора. Просто вставьте ваш селектор, и он подсветится на странице. В качестве примера я добавлю a.button.hp-button-1.slide-button.w-button.green.fancybox – укороченную версию селектора, который мы определили с помощью консоли разработчика.

Рис. 61. Поиск селектора на странице

CSS Selector Tester нашел такой элемент на странице и выделил его границы красной пунктирной линией. Вот так он выделил все элементы div на странице:

Рис. 62. Элементы div на странице

Если бы мы ввели неверный селектор, то сообщение было бы «undefined» (не определено) и элемент не был бы найден на странице.

SelectorGadget

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

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

Рис. 63. Пример работы расширения SelectorGadget

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

Рис. 64. Иконка SelectorGadget

Селекторы в jQuery

Как мы узнали раннее, jQuery – это библиотека JavaScript, которая фокусируется на взаимодействии JavaScript, HTML, CSS и служит для облегчения работы разработчика. На данный момент она является самой распространенной библиотекой JS в мире.

В природе существуют и другие JS-библиотеки, фреймворки и инструменты, например, React, AngularJS, Backbone.js, Ember.js и т.д. Но в свое время именно jQuery произвела революцию в программировании клиентской части веб-приложений, введя селекторы CSS для доступа к узлам DOM-дерева, обработчики событий, анимации и AJAX-запросы.

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

Библиотека jQuery на сайте по умолчанию отсутствует. Для ее подключения необходимо скачать актуальную версию с официального сайта jquery.com/download, загрузить ее на сервер, а затем подключить с помощью фрагмента кода:

Рис. 65. Подключение библиотеки jQuery через путь к файлу (версия 3.3.1)

Существует альтернативный способ подключить jQuery на страницы вашего сайта (не закачивая библиотеку на сервер). Можно подключить библиотеку, которая находится не на вашем сервере, а на серверах CDN. Существуют несколько таких хранилищ, наиболее известные и надежные из них Google CDN, Microsoft CDN, а также CDN, который организовали создатели jQuery.

Рис. 66. Подключение библиотеки jQuery через CDN

Можно подключить jQuery и через GTM. Для этого необходимо создать пользовательский HTML-тег и добавить туда фрагмент кода выше, а в качестве триггера активации выбрать «All Pages» (Все страницы).

Селекторы в jQuery базируются на CSS селекторах (см. выше), они также используются для определения элемента или группы элементов.

Все селекторы в jQuery начинаются со знака доллара и круглых скобок $ (), например, $('div'). В этом случае будет осуществлен поиск всех элементов div на странице, $('.className') найдет все элементы с классом className, $('#sidebar') найдет все элементы на странице с идентификатором sidebar и т.д.

Примечание: при использовании метасимволов (#;&,.+*~':"!^$[]()=>|/) в значении любого идентификатора, класса или названия атрибута, необходимо экранировать эти символы в селекторах с помощью двух обратных слэшей \\

Рис. 67. Экранирование специальных символов с помощью \\

В процессе работы с Google Tag Manager jQuery позволяет удобнее решать множество задач. Задачи можно разделить на два типа:

1. взять элемент, который у нас находится на сайте, например, значение цены, название продукта, категорию продукта и т.д.;

2. отследить факт того, что у нас произошел клик по какому-либо элементу, зафиксировано событие или пользователь заполнил и отправил форму на сайте.

При настройке некоторых событий в GTM иногда возникают ситуации, когда необходимо получить дополнительную информацию, связанную с элементом, над которым произошло событие. Но эту информацию так просто нельзя получить через CSS-селекторы, поскольку она может находится в структуре других элементов, которые логически связаны с рассматриваемым элементом. В это случае можно воспользоваться функциями библиотеки jQuery.

Давайте разберем на нескольких примерах работу библиотеки jQuery с набором элементов. Для этого я перейду на свой сайт osipenkov.ru и вызову консоль разработчика, а затем перейду на вкладку Console.

С помощью $("div").css("border", "1px solid red"); выберем все элементы div на странице и обведем их в красную рамку в 1 пиксель.

Рис. 68. Все div на странице обведены в красную рамку шириной в 1 пиксель

Примечание: мой блог работает на WordPress. В нем стандартный способ обращения к элементам через $ () отключен (в конце файла …/wp-includes/js/jquery/jquery.js прописана строчка jQuery.noConflict();, которая отключает работу с элементами страницы через $.), так как другие библиотеки также могут использовать данный механизм обращения к элементам. Поэтому вместо знака доллара я использовал альтернативную конструкцию jQuery (). Для изменения способа обращения на привычный $ необходимо изменить фрагмент кода. Решение проблемы ищите в интернете с пометкой «jQuery не работает в WordPress».

Теперь давайте поработаем с формами. Перейдем на страницу Контакты https://osipenkov.ru/contacts/ где есть форма обратной связи.

Добавим в консоль такую строчку:

$("form input").css("border", "1px solid blue");

Данная конструкция добавит рамку всем input-ам, которые являются потомками элемента form. Это пример так называемого «parent child», когда выбираются все элементы input, являющиеся узлами-потомками для родительского элемента form.

Рис. 69. Все div на странице обведены в красную рамку шириной в 1 пиксель

В качестве еще одного простого примера разберем вывод значения заполненного поля «Имя» с name=”your-name”.

Рис. 70. Поле «Имя» с name=”your-name”

В консоли разработчика вводим такую конструкцию:

$('[name="your-name"]').val()

Метод .val() позволяет получать и изменять значения элементов форм. Для элементов input это значение атрибута “name”, то есть в нашем случае “your-name”.

Получим результат Yakov Osipenkov.

Рис. 71. Результат $('[name="your-name"]').val()

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

Рис. 72. Список функций jQuery перемещения по дереву DOM

Функции фильтрации набора элементов:

Рис. 73. Функции фильтрации набора элементов

Также, как и с CSS-селекторами, рекомендую перейти на сайт w3schools.com и изучить два материала для лучшего понимания темы селекторов jQuery:

Селекторы jQuery: w3schools.com/jQuery/jquery_selectors.asp

Демонстрация селекторов jQuery: w3schools.com/jQuery/trysel.asp

На сайте jquery-docs.ru есть перевод официальной документации API jQuery на русский язык.

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

Данная статья написана с использованием следующих ресурсов – habr.com, puzzleweb.ru, jquery.page2page.ru, odesseo.com.ua, jquery-docs.ru, learn.javascript.ru, htmlbook.ru и developer.mozilla.org.

Регистрация аккаунта

Для того чтобы начать работу с инструментом Google Tag Manager, необходимо зарегистрировать обычную почту в Gmail.com.

Однако если вы когда-либо работали с другими продуктами Google и уже имеете почту, то заводить отдельную не требуется. Авторизовавшись в аккаунте Google, просто перейдите на сайт диспетчера тегов Google или на обновленную англоязычную версию google.com/analytics/tag-manager/

В первом случае нажимаем «Регистрация»

Рис. 74. Регистрация Google Tag Manager

Во втором по любой из кнопок «Sign up for free» – разницы нет абсолютно никакой, кроме языка веб-страницы. Если еще не авторизовались, то сначала войдите в аккаунт (кнопка в правом верхнем углу), а затем приступайте к добавлению нового аккаунта.

Рис. 75. Англоязычная версия Google Tag Manager

Создание аккаунта состоит из двух этапов:

● ввод названия аккаунта (лучше всего вводить простое, запоминающееся название, которое вы с легкостью сможете найти, если в учетной записи этих аккаунтов станет много);

Также Google просит вас разрешить передавать основные данные в свои продукты анонимно.

Рис. 76. Согласие о сборе дополнительной информации

Текст похож на то, как аргументировали разработчики включение функции «Сравнения» в Google Analytics, не находите? Однако никаких отчетов не будет. Можете ставить галочку, можете нет – как хотите.

● ввод названия контейнера и тип использования: веб-сайт, мобильные приложения на iOS или Android, AMP-страницы.

Рис. 77. Добавление нового аккаунта в GTM

За основу структуры аккаунт-контейнер вы можете взять традиционные аккаунт-ресурс из Google Analytics, где аккаунт – это верхний уровень доступа, а контейнер – ресурс из Google Analytics, то есть домен сайта или мобильное приложение. Чаще всего используют два подхода при именовании:

1. аккаунт – название компании, сотрудник, ответственный (например, Яков), группа сайтов (общее название);

2. контейнер – конкретные сайты или мобильные приложения;

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

1. аккаунт = контейнер;

2. аккаунт – название компании, контейнеры – сайты по регионам;

Рис. 78. Пример структуры в GTM

Вы в любой момент потом можете поменять как название аккаунта, так и название контейнера. После их ввода нажимаем «Создать». Далее внимательно читаем соглашение об условиях использования диспетчера тегов Google, при желании переключив на русский язык. Если все устраивает (а другого и быть не может), то нажимаем «Да» в правом верхнем углу.

Рис. 79. Соглашение об Условиях использования Диспетчера тегов Google

Установка контейнера

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

Рис. 80. Код установки Google Tag Manager

Если вы используете готовые CMS-движки, то в 99% случаев на рынке существует готовые решения, где с помощью установки дополнительного модуля или плагина можно исключить ручную вставку кода на сайт. Например, у движка интернет-магазина на cs-cart есть готовый модуль, благодаря которому весь процесс настройки GTM сводится к вставке ID контейнера в соответствующее поле:

Рис. 81. Вставка ID контейнера

После добавление кода GTM не забудьте опубликовать контейнер, нажав на кнопку «Отправить» – «Опубликовать».

Рис. 82. Публикация контейнера GTM

До публикации ваш контейнер будет возвращать ответ 404. В Google Tag Assistant это будет выглядеть так:

Рис. 83. Google Tag Assistant. Ошибка 404

HTTP response code indicates tag failed to fire: Status 404. This could be due to an empty or un-published container

Если все сделаете правильно, увидите опубликованную версию и зеленую иконку в GTA:

Рис. 84. Корректная установка кода GTM на сайт

Установка Google Analytics и Яндекс.Метрика через GTM

После регистрации и установки контейнера Google Tag Manager на сайт произведем установку счетчиков веб-аналитики Google Analytics и Яндекс.Метрика.

Установка кода Google Analytics через GTM

Получив идентификатор отслеживания в Google Analytics (UA-XXXXXXXXX-X), создадим переменную для экономии времени и избежание ошибок в дальнейшем.

Переменная – это объект, которому дано имя и который может принимать различные значения (вида пара “ключ-значение”). Переменные используются для хранения данных, а также если приходится несколько раз использовать одно и тоже значение в различных процессах.

В Google Tag Manager используются переменные двух типов: встроенные и пользовательские. Подробнее о переменных будет разобрано дальше. А пока разберем создание пользовательской переменной. Для этого переходим в «Переменные – Создать».

Рис. 85. Создание пользовательской переменной

Выбираем тип переменной – «Настройки Google Analytics». Эта переменная позволяет задавать настройки Google Analytics для использования с разными тегами.

Рис. 86. Тип переменной – Настройки Google Analytics

Вводим название переменной, идентификатор отслеживания (код Google Analytics) и нажимаем «Сохранить».

Рис. 87. Идентификатор отслеживания и Название переменной

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

Рис. 88. Пользовательская переменная GA ID

Переходим в меню «Теги», создаем новый тег.

Рис. 89. Создание нового тега Google Analytics

Конфигурация тега – Universal Analytics, поскольку библиотека классического Google Analytics (ga.js) сильно устарела и больше не развивается. Однако есть достаточное количество сайтов, на которых по-прежнему установлен старый код. На смену ему уже пришли analytics.js и gtag.js.

Рис. 90. Рекомендуемый тип тега – Universal Analytics

Настройки:

● Тип отслеживания – Просмотр страницы;

● Настройки Google Analytics – Выбираем нашу переменную GA ID (автоматически заключается в двойные фигурные скобки, как шаблон);

Рис. 91. Конфигурация тега

● Триггер / Условие активации тега – All Pages (на всех страницах).

Рис. 92. Триггер активации – All Pages (на всех страницах сайта)

Вводим название тега и сохраняем его. На этом настройка кода отслеживания Google Analytics через Google Tag Manager на сайт завершена.

Проверим корректность настройки кода отслеживания GA традиционным способом через сам Google Analytics без использования предварительного просмотра в отладчике. Для этого в правом верхнем углу нажимаем «Отправить» – «Опубликовать» и «Далее». Новая версия контейнера опубликована!

Теперь просто перейдем в интерфейс Google Analytics и в отчетах «В режиме реального времени» увидим наш заход. Для наглядности пометим свой переход с помощью utm-меток. Можно перейти на различные разделы и посмотреть, фиксируются ли переходы по всем страницам сайта или нет.

Рис. 93. Проверка установки кода Google Analytics в режиме реального времени

Данные передаются, тег настроен корректно. Проверить фиксацию данных также можно с помощью встроенного в GTM инструмента, который называется «Предварительный просмотр» (или режим отладки). Ему будет посвящена отдельная статья в этом руководстве, а пока установим код счетчика Яндекс.Метрика.

Установка кода Яндекс.Метрика через GTM

Перед установкой кода ЯМ необходимо создать счетчик в аккаунте Яндекса и получить код отслеживания. Аналогично Google Analytics создаем новый тег. Только вместо рекомендуемого типа тега выбираем специальный – «Пользовательский HTML».

Рис. 94. Тип тега – Пользовательский HTML

Копируем код отслеживания из интерфейса Яндекс.Метрика и вставляем его в поле HTML. Не забываем про триггер – условие активации тега – All Pages (на всех страницах). Нажимаем «Сохранить».

Рис. 95. Копирование кода из Я.Метрика в Пользовательский HTML GTM

В результате мы с вами получили два тега и два кода счетчика веб-аналитики.

Рис. 96. Теги двух кодов счетчиков аналитики

Чтобы данные передавались в Яндекс.Метрика, осталось только опубликовать новую версию контейнера на сайт. Действия прежние: в правом верхнем углу нажимаем «Отправить» – «Опубликовать» и «Далее». Новая версия контейнера опубликована!

Самый простой способ проверить корректность настройки счетчика ЯМ – это обновить статус самого счетчика в списке всех счетчиков учетной записи.

Рис. 97. Счетчик Яндекс.Метрика корректно установлен

Если вместо желтого или красного значка появился зеленый, значит он корректно установлен.

Есть еще один способ проверки установки кода счетчика – это добавление к адресу страницы параметра _ym_debug со значением 1. В моем случае это https://watersports.ru/?_ym_debug=1

Далее необходимо вызвать консоль разработчика (в браузере Google Chrome кнопка «F12») и перейти на вкладку Console. Если код установлен правильно, в консоли вы увидите номер вашего счетчика и данные, которые отправляет код.

Рис. 98. Данные о просмотре страниц передаются

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

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