Установка Google Tag Manager, настройка Google Analytics и целей на события
Блог / Аналитика

Google Tag Manager: установка, подключение Analytics и настройка целей

Автор: Мария Саловарова 03.10.2017

google tag manager

Краткое содержание статьи:

  1. Установка Google Tag Manager
  2. Подключение Google Analytics через Google Tag Manager
  3. Настройка целей с помощью Google Tag Manager
    1. Отслеживание кликов по элементу с помощью class
    2. Отслеживание кликов по кнопке с помощью id
    3. Отслеживание кликов по тексту

Благодаря 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, указав для него и для контейнера наименования, выбрав категорию «Веб-сайт».

Создание аккаунта Google Tag Manager

Настройки Google Tag Manager

Далее установим GTM в код нашего сайта: первый скрипт должен располагаться в начале раздела , а второй – идти ниже тега . Естественно, приведенные скрипты размещаются в сквозном варианте, т.е. отображаются в коде совершенно на всех страницах вашего сайта.

Фрагменты кода в GTM

В результате мы получаем область, где можем заметить вкладки «Теги», «Триггеры», «Переменные» и многое другое.

С тегами мы уже разобрались немного ранее. Единственное, что стоит добавить – можно как выбирать шаблонные теги, так и создавать новые, написав на языке программирования JavaScript. В качестве шаблонов вы обнаружите Google Analytics, Universal Analytics, отслеживание конверсий AdWords и прочие.

Триггер – это условие, определяющее, когда тегу необходимо сработать.

Переменные – это сочетания «ключ-значение», которые определяют, когда следует запустить триггер и используются в тегах для отправки данных. Аналогично тегам, можно использовать как шаблоны, так и собственноручно созданные переменные.

Рабочая область GTM

2. Подключение Google Analytics через Google Tag Manager

После завершения добавления двух фрагментов скриптов от GTM, из кода сайта необходимо удалить код счётчика GA (если он был ранее установлен). Далее приступаем к настройке Google Analytics через Google Tag Manager.

Начнем с создания первого тега: в опции «Тег» нажмём кнопку «Создать» и выберем:

  • тип тега – «Universal Analytics Google Analytics»;
  • тип отслеживания – «Просмотр страницы»;
  • идентификатор отслеживания – создаётся новая переменная, где указывается идентификатор отслеживания вашего счетчика GA (UA-xxxxxx-xx), переменную можно переименовать как угодно;
  • триггер активации – «All Pages Просмотр страницы».

Создание тега в GTM

Следующий шаг – проверка и публикация тега и триггера. Проверка происходит следующим образом:

  • Нажимаем на кнопку «Предварительный просмотр».
  • Открываем испытываемый сайт в том же браузере, что и 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.

Переменная Click Classes

На следующем этапе приступаем к созданию нового тега, дав ему имя «Клик по номеру» с параметрами:

  • тип тега «Universal Analytics Google Analytics»;
  • тип отслеживания «Событие»;
  • категорию – number (задаётся в произвольном написании);
  • действие – click (задаётся в произвольном написании);
  • идентификатор отслеживания.

Настройки конфигурации тега

Здесь же настроим триггер, где выберем:

  • тип триггера – «Клик – Все элементы»;
  • условие активации – «Некоторые клики»;
  • переменная Click Classes;
  • класс telephone.

Настройка триггера в GTM

Далее сделаем проверку: нажмём на «Предварительный просмотр» и посмотрим на наш сайт в том же браузере, что и GTM. Внизу нашего сайта вылезла консоль GTM. Для проверки нажимаем правой кнопкой мыши по телефонному номеру в шапке, видим, что тег сработал и можем смело жать кнопку «Опубликовать».

Проверка запуска тега в консоли

Последний шаг – создание события в GA. Заходим в GA, добавляем новую цель с типом «Событие», где зададим данные, которые мы ранее вносили в тег «Клик по номеру»: категория – number; действие – click.

Настройка события в GA

Вот, собственно, и всё. Посмотреть зафиксированные данные GA можно зайдя в «Отчеты» – «Конверсии» – «Цели» – «Обзор» или в режиме реального времени.

Обращение к цели в GA

3.2. Отслеживание кликов по кнопке с помощью id

Теперь разберём, как происходит настраивание цели для наблюдения за кликами, совершенными, например, по кнопке «Добавить в корзину». На нашем испытываемом сайте у данных кнопок уже есть единый атрибут id – id="button", поэтому вносить изменения в код нет необходимости. Настройка отслеживания по id мало чем отличается от class.

Итак, во встроенных переменных ставим чек-бокс около Click ID.

Переменная Click ID

Создаём новый тег с названием «Добавить в корзину». Дальше идут настройки практически такие же, как мы описывали ранее, но зададим для типа отслеживания новую категорию – addtobasket и действие – click.

Конфигурация тега

Далее создаём новый триггер с указанием:

  • типа триггера – «Клик – Все элементы»;
  • условия активации – «Некоторые клики»;
  • переменной Click ID;
  • атрибута id нашей кнопки – button.

Настройки триггера

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

Проверка запуска тега

На заключительном шаге открываем Google Analytics, добавляем цель «Событие» с данными: категория – addtobasket; действие – click.

Настройка события в Google Analytics

На всякий случай тестируем достижение цели по кнопке «Добавить в корзину». На скриншоте ниже мы видим, что данные Google Analytics действительно зафиксировал.

Обращение к цели

3.3. Отслеживание кликов по тексту

Что делать, если вносить правки в код вы не умеете и у элемента, клики которого вы хотите отследить, нет необходимых параметров, при этом создать цель вам просто жизненно необходимо? В таком случае через Google Tag Manager можно мониторить клики по заданному тексту, который имеется на вашем элементе. Предположим, на вашем ресурсе есть раздел со статьями, которые сначала идут с небольшим анонсом и полностью открываются при клике на кнопку «читать дальше». Именно с помощью текста «читать дальше» мы и настроим отслеживание кликов. Единственный минус отслеживания кликов по тексту – это наличие других элементов с таким же текстом, поэтому внимательно смотрите, нет ли идентичных наименований на вашем сайте.

Пример клика по тексту

Снова обращаемся ко встроенным переменным, где включаем Click Text.

Переменная Click Text

Создаём новый тег с названием «читать дальше». Назначаем категорию в произвольном написании, у нас это будет readmore и действие – click.

Конфигурация тега

Добавим триггер с указанием:

  • типа триггера – «Клик – Все элементы»;
  • условия активации – «Некоторые клики»;
  • переменной Click Text;
  • отслеживаемого текста – «читать дальше».

Настроки триггера

С помощью предварительного просмотра тестируем клик по «читать дальше» и видим, что настроенный нами тег сработал.

Проверка запуска тега в GTM

Заходим в Google Analytics и создаём цель с типом «Событие», где укажем readmore и click в соответствующие поля.

Аналогично прошлым заключительным пунктам проверяем, что данные при клике на «читать дальше» передались.

Обращение к цели Google Analytics

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

Автор: Мария Саловарова