Настройка отслеживания событий Google Analytics в Google Tag Manager

Google Analytics
Google Tag Manager

Продолжая тему настройки Google Analytics без внесения изменений в исходный код страниц предлагаю вам описание процесса настройки фиксации событий Google Analytics в Google Tag Manager.

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

Для начала определим, какие события мы можем фиксировать:

  1. клики по ссылкам
  2. клики на любых объектах страницы
  3. таймеры
  4. отправка формы

Обратите внимание, что каждый элемент на странице, событие по которому вы хотите зафиксировать, должен быть снабжен уникальным идентификатором, например, <div id=”button”></div>.

В связи с тем, что в настоящее время актуальной версией Google Tag Manager является версия 2, рекомендую ознакомиться с этим материалом, описывающим фиксацию кликов в новой версии.

Давайте остановимся на первых двух вариантах, поскольку это наиболее часто используемые варианты использования возможностей отслеживания событий Google Analytics. Если вы еще не используете их, обязательно настройте на своем сайте. Событиями на сайте могут быть различные “точки” взаимодействия между вашим сайтом и пользователем. Например, клик по кнопке “Подписка на новости”, загрузка файла с прайс-листом или коммерческого предложения, ссылка для печати купонов предоставляющих возможность получить услуги или приобрести товар, или приглашений на мероприятия. Немного отступая от темы хочу порекомендовать вам, если вы этого еще не сделали, настроить фиксацию целей на своем сайте, где в качестве цели будут использоваться события. Это позволит вам более объективно оценить эффективность вашего сайта.

Итак, приступим к настройке отслеживания событий Google Analytics в Google Tag Manager. Разберем подробно первые два варианта.

Первый вариант – фиксация кликов по ссылкам

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

Добавить тег Google Tag Manager

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

Укажите имя тега, к примеру “События – клики на ссылках” и тип тега “Блок прослушивания событий -> Прослушивание кликов по ссылке”. После выбора типа тега необходимо добавить правила его активации, т.е. условия при которых данный тег будет исполнятся. Нам для решения задачи необходимо добавить два правила, для этого нажмите на кнопку “Добавить правило активации тега”:

Добавить правило в тег Google Tag Manager

Добавление правила активации тега

Выбираем правило под именем “Все страницы” из списка существующих и нажимаем кнопку “Сохранить”.

Создание нового правила в Google Tag Manager

Выбор из существующих правил

После этого еще раз нажимаем на кнопку “Добавить правило активации тега”, в появившемся окне необходимо выбрать пункт “Создать новое правило” (у вас может не быть такого пункта если вы до этого уже использовали в теге все ранее созданные вами и предустановленные правила, ничего страшного), указать название правила, например, “Клик по ссылке О компании” и задать параметры условий, при которых это правило будет активироваться. Нам необходимо указать два условия, первое это событие “клик по ссылке” и второе, определить по какой ссылке произведен клик, используя для этого ID элемента.

Из первого выпадающего списка выберите макрос “{{event}}”, следующий выпадающий список задает условия сопоставления, выберите “равно” и в поле введите значение “gtm.linkClick”. На этом создание первого условия завершено.

Создадим второе условие в текущем правиле. Нажмите “+” справа от поля с текстом “gtm.linkClick”, ниже появится строка настройки второго условия. Выберите макрос “{{element id}}”, условие сопоставления “равно”, в поле введите ваше значение ID ссылки. Узнать его можно просмотрев исходный код страницы или используя популярный плагин Firebug.

Как узнать id элемента

Как узнать ID элемента на странице

Если вы сделали все как описано выше у вас должно получится следующее:

Сложное правило Google Tag Manager

Создание сложного правила активации тега

Нажмите на кнопку “Сохранить”, окно добавления правил для тега закроется. На этом настройка тега завершена, необходимо сохранить изменения в теге нажатием на кнопку “Сохранить” внизу страницы:

Сохранить изменения в теге Google Tag Manager

Настроенный тег

Следующим действием необходимо передать информацию о фиксации клика на ссылке в Google Analytics. Для этого создайте новый тег, введите его имя, например, “Event Tracking UA – Клик по ссылке О компании”, тип тега укажите как “Google Analytics” или “Universal Analytics”, в зависимости от того, какой вариант вы выбрали создавая профиль в Google Analytics, также необходимо указать “Идентификатор отслеживания” в формате UA-XXXXXXXX-XX.

Тип отслеживания выберите “Событие”. Вам предложат ввести информацию “Параметры отслеживания событий”, укажите нужные вам значения. Для этих целей, если не использовать Google Tag Manager используются функции _trackEvent(category, action, opt_label, opt_value, opt_noninteraction) в Google Analytics и ga(‘send’, ‘event’, ‘category’, ‘action’, ‘label’, value) в Universal Analytics.

После ввода значений необходимо указать правила активации тега, нажмите “Добавить правило активации тега” выберите из списка существующих правил созданное ранее “Клик по ссылке О компании”. Внимание! Нужно выбрать только одно правило! Сохраните изменения.

Добавить правило в Google Tag Manager

Настройка тега для передачи данных в Google Analytics

На этом создание тега для передачи данных в Google Analytics завершено, сохраните изменения нажатием на кнопку “Сохранить” в нижней части страницы. В итоге у вас должно получится примерно следующее:

Списко тегов Google Tag Manager

Список необходимых тегов

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

  1. тег с подключением кода отслеживания Google Analytics;
  2. тег для фиксации кликов на ссылке;
  3. тег для передачи данных о клике в Google Analytics.

Создайте версию контейнера Google Tag Manager нажав на кнопку “Создать версию” в правом верхнем углу, после чего опубликуйте изменения в контейнере нажав кнопку “Опубликовать”, также в правом верхнем углу.

Опубликовать версию контейнера

Публикация версии контейнера

Теперь вы можете проверить результаты работы перейдя в отчеты Google Analytics группы “В режиме реального времени” и выполнив необходимое вам действие. Обратите внимание, что в официальной документации, в примере отслеживания кликов по ссылкам, приводится немного отличный от предложенного мной вариант условия активации тега.

Вместо сопоставления во втором условии по ID элемента, предлагается использовать URL ссылки или его часть, для этого используется макрос {{element url}}. Какой вариант использовать, решать вам. Узнать больше о макросах вы можете в официальной документации, а также посмотрев их список в панели управления тегами:

Предустановленные макросы в Google Tag Manager

Предустановленные макросы в Google Tag Manager

Второй вариант – фиксация события на любом элементе страницы

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

Если в случае с ссылками мы фиксировали в макросе “{{event}}” событие “gtm.linkClick”, то для произвольных элементов нужно использовать “gtm.click”. Для тега мы выбирали значение “Блок прослушивания событий -> Прослушивание кликов по ссылке” то теперь нужно выбрать “Блок прослушивания событий -> Прослушивание кликов”.

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

Еженедельная рассылка кейсов!