Упрощенный способ настройки фиксации событий 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 Analytics, и их обязательно стоит настроить на своем сайте.

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

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

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

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

0_b85b9_6dd8a816_L

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

0_b85ba_4ac53190_L

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

0_b85bb_b724f015_L

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

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

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

0_b8607_23a4b1df_XL

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

0_b8608_74fb79f7_XL

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

0_b860a_eb4b84ff_XL

Следующим действием необходимо передать информацию о фиксации клика на ссылке в 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.

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

0_b860b_9fa88579_L

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

0_b860c_b79e9b9c_XL

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

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

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

0_b860d_8f3acded_L

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

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

0_b860e_3baadd92_XL

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

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

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

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

Автор: Иван Иванов, веб-аналитик, автор блога ProMetriki.ru