Google Tag Manager: установка, подключение Analytics и настройка целей
Краткое содержание статьи:
- Установка Google Tag Manager
- Подключение Google Analytics через Google Tag Manager
- Настройка целей с помощью Google Tag Manager
Благодаря Google Tag Manager (он же «Диспетчер тегов Google») можно управлять тегами. Но что является «тегами»? Теги – это различные коды сторонних сервисов: к примеру, код счётчика Google Analytics – это тег. GTM позволяет размещать теги, не изменяя код сайта. Единственная правка, которую вам необходимо сделать на сайте – это установить код непосредственно самого GTM, а уже в самом интерфейсе GTM добавить необходимые скрипты (систем статистики, кнопки шеринга, коды ретаргетинга и пр.), не утяжеляя исходный код и не замедляя работу сайта.
Еще одна полезная особенность Google Tag Manager – это возможность настройки целей, плюс их создания благодаря GTM – минимум правок в коде сайта или вообще без них. К тому же некоторых вариантов целей в Google Analytics (далее GA) попросту нет, а интерфейс GTM их предоставляет.
Итак, предлагаем вам изучить, как происходит установка Google Tag Manager (далее GTM), как через него подключить Google Analytics (далее GA) и настроить цели на те или иные события с соответствующими пошаговыми скриншотами.
1. Установка Google Tag Manager
Google постарался сделать интерфейс данного инструмента максимально доступным, поэтому с ним справится даже новичок. Но на всякий случай познакомим вас с ним.
Создаём аккаунт в GTM, указав для него и для контейнера наименования, выбрав категорию «Веб-сайт».
Далее установим GTM в код нашего сайта: первый скрипт должен располагаться в начале раздела 
, а второй – идти ниже тега 
. Естественно, приведенные скрипты размещаются в сквозном варианте, т.е. отображаются в коде совершенно на всех страницах вашего сайта.
В результате мы получаем область, где можем заметить вкладки «Теги», «Триггеры», «Переменные» и многое другое.
С тегами мы уже разобрались немного ранее. Единственное, что стоит добавить – можно как выбирать шаблонные теги, так и создавать новые, написав на языке программирования JavaScript. В качестве шаблонов вы обнаружите Google Analytics, Universal Analytics, отслеживание конверсий AdWords и прочие.
Триггер – это условие, определяющее, когда тегу необходимо сработать.
Переменные – это сочетания «ключ-значение», которые определяют, когда следует запустить триггер и используются в тегах для отправки данных. Аналогично тегам, можно использовать как шаблоны, так и собственноручно созданные переменные.
2. Подключение Google Analytics через Google Tag Manager
После завершения добавления двух фрагментов скриптов от GTM, из кода сайта необходимо удалить код счётчика GA (если он был ранее установлен). Далее приступаем к настройке Google Analytics через Google Tag Manager.
Начнем с создания первого тега: в опции «Тег» нажмём кнопку «Создать» и выберем:
- тип тега – «Universal Analytics Google Analytics»;
- тип отслеживания – «Просмотр страницы»;
- идентификатор отслеживания – создаётся новая переменная, где указывается идентификатор отслеживания вашего счетчика GA (UA-xxxxxx-xx), переменную можно переименовать как угодно;
- триггер активации – «All Pages Просмотр страницы».
Следующий шаг – проверка и публикация тега и триггера. Проверка происходит следующим образом:
- Нажимаем на кнопку «Предварительный просмотр».
- Открываем испытываемый сайт в том же браузере, что и GTM.
- Внизу испытываемого сайта появится консоль. В консоли есть два варианта запуска тегов – Tags fired on this page (когда тег запустился) и Tags not fired on this page (если тег не запустился и не сработал). Нам, конечно, необходимо, чтобы созданный нами тег определился под заголовком Tags fired on this page.
Когда наш тег сработал корректно (см. скриншот выше), идём обратно в GTM и нажимаем кнопки «Отправить» и «Опубликовать». Установка Google Analytics через Google Tag Manager закончена.
3. Настройка целей с помощью Google Tag Manager
Одна из полезных функций GTM – создание целей для фиксации данных по кликам с использованием атрибута какого-либо элемента сайта, текста или определенного html-элемента (для последнего вида требуется знание JavaScript-программирования). Такое отслеживание пригодится для дополнительного анализа взаимодействия пользователя с сайтом.
Чтобы отследить данные по кликам, требуется настройка как в GTM, так и в GA. Иногда требуется внесение правок в код, но только тогда, когда в отслеживаемом элементе нет необходимых вам параметров. Правки в коде в таком случае будут отличаться от кода события, который мы рассматривали в другой нашей статье. Отслеживание может происходить благодаря:
- элементу html;
- атрибутам class, id, target, href;
- тексту внутри элемента.
Итак, рассмотрим несколько вариантов.
3.1. Отслеживание кликов по элементу с помощью class
В качестве примера настройки цели через Google Tag Manager, выберем клик по номеру телефона в шапке сайта. Пользователь принял решение позвонить в организацию, начал искать номер, увидел его в шапке и, к примеру, выделил его левой кнопкой мыши, тем самым совершив клик. Способы измерения количества этих кликов мы сейчас и рассмотрим.
Для получения данных о кликах по телефонному номеру выберем, например, атрибут class. Если в вашем коде телефон уже обёрнут в какой-нибудь класс, то правок вносить не нужно. Если класса нет, создадим его, например, так: 
.
Теперь займёмся добавлением переменных в GTM: переходим в «Переменные», жмем кнопку «Настроить» и ставим чекбокс около Click Classes.
На следующем этапе приступаем к созданию нового тега, дав ему имя «Клик по номеру» с параметрами:
- тип тега «Universal Analytics Google Analytics»;
- тип отслеживания «Событие»;
- категорию – number (задаётся в произвольном написании);
- действие – click (задаётся в произвольном написании);
- идентификатор отслеживания.
Здесь же настроим триггер, где выберем:
- тип триггера – «Клик – Все элементы»;
- условие активации – «Некоторые клики»;
- переменная Click Classes;
- класс telephone.
Далее сделаем проверку: нажмём на «Предварительный просмотр» и посмотрим на наш сайт в том же браузере, что и GTM. Внизу нашего сайта вылезла консоль GTM. Для проверки нажимаем правой кнопкой мыши по телефонному номеру в шапке, видим, что тег сработал и можем смело жать кнопку «Опубликовать».
Последний шаг – создание события в GA. Заходим в GA, добавляем новую цель с типом «Событие», где зададим данные, которые мы ранее вносили в тег «Клик по номеру»: категория – number; действие – click.
Вот, собственно, и всё. Посмотреть зафиксированные данные GA можно зайдя в «Отчеты» – «Конверсии» – «Цели» – «Обзор» или в режиме реального времени.
3.2. Отслеживание кликов по кнопке с помощью id
Теперь разберём, как происходит настраивание цели для наблюдения за кликами, совершенными, например, по кнопке «Добавить в корзину». На нашем испытываемом сайте у данных кнопок уже есть единый атрибут id – id="button", поэтому вносить изменения в код нет необходимости. Настройка отслеживания по id мало чем отличается от class.
Итак, во встроенных переменных ставим чек-бокс около Click ID.
Создаём новый тег с названием «Добавить в корзину». Дальше идут настройки практически такие же, как мы описывали ранее, но зададим для типа отслеживания новую категорию – addtobasket и действие – click.
Далее создаём новый триггер с указанием:
- типа триггера – «Клик – Все элементы»;
- условия активации – «Некоторые клики»;
- переменной Click ID;
- атрибута id нашей кнопки – button.
Каждый раз после этих процедур следует сохранять настройки, тестировать тег через интерфейс предварительного просмотра, и после успешного срабатывания – отправлять данные.
На заключительном шаге открываем Google Analytics, добавляем цель «Событие» с данными: категория – addtobasket; действие – click.
На всякий случай тестируем достижение цели по кнопке «Добавить в корзину». На скриншоте ниже мы видим, что данные Google Analytics действительно зафиксировал.
3.3. Отслеживание кликов по тексту
Что делать, если вносить правки в код вы не умеете и у элемента, клики которого вы хотите отследить, нет необходимых параметров, при этом создать цель вам просто жизненно необходимо? В таком случае через Google Tag Manager можно мониторить клики по заданному тексту, который имеется на вашем элементе. Предположим, на вашем ресурсе есть раздел со статьями, которые сначала идут с небольшим анонсом и полностью открываются при клике на кнопку «читать дальше». Именно с помощью текста «читать дальше» мы и настроим отслеживание кликов. Единственный минус отслеживания кликов по тексту – это наличие других элементов с таким же текстом, поэтому внимательно смотрите, нет ли идентичных наименований на вашем сайте.
Снова обращаемся ко встроенным переменным, где включаем Click Text.
Создаём новый тег с названием «читать дальше». Назначаем категорию в произвольном написании, у нас это будет readmore и действие – click.
Добавим триггер с указанием:
- типа триггера – «Клик – Все элементы»;
- условия активации – «Некоторые клики»;
- переменной Click Text;
- отслеживаемого текста – «читать дальше».
С помощью предварительного просмотра тестируем клик по «читать дальше» и видим, что настроенный нами тег сработал.
Заходим в Google Analytics и создаём цель с типом «Событие», где укажем readmore и click в соответствующие поля.
Аналогично прошлым заключительным пунктам проверяем, что данные при клике на «читать дальше» передались.
Варианты настройки фиксации данных по событиям в GTM не ограничиваются приведёнными примерами. Углубившись в интерфейс и функции данного инструмента, можно очень гибко настраивать цели, а их варианты будут зависеть от поставленной перед вами задачи.
