Настройка отслеживания событий 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.

Кейсы и инструкции по настройке в вашем ящике. Подпишитесь сейчас!

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

  1. Привет!
    Иван, возможно Вы подскажете – настраиваю сейчас в таг менеджере отправку событий – через {{element id}}, {{element class}} всё работает замечательно. Но возникла проблема с просто {{element}}. На странице есть нонейм элементы (без айди и классов), и необходимо добавить отслеживание и к ним. Но, как не пытался, но при активации правил вида event=gtm.click и element= (для примера) – ничего не работает. Возможно, я где-то ошибся?

  2. @Viner, здравствуйте!
    Если есть возможность опишите проблему подробнее, сообщение отправьте почтой

  3. Иван,

    А что если макроса {{element id}} нет по умолчанию? Как его правильно создать? Какой тип макроса ему присвоить?

  4. Добрый вечер @Иван!
    Создайте новый макрос с именем – “element id”, тип макроса укажите как – “Переменная автоматического события”, тип переменной – “Идентификатор элемента”.

  5. Добрый день. Возник вопрос. Зачем отдельно создавать тег о прослушивании ссылок?
    При помощи прослушивания кликов по странице просто создаем правило где:
    1. event=gtm.click
    2. url=(наш url)

  6. Добрый день, @Максим!
    Вы правы, можно для кликов по ссылкам использовать и gtm.click, но вероятно разработчики выделили gtm.linkClick для того, чтобы при необходимости фиксации только кликов по ссылкам не проводить проверку на срабатывание тега и за счет этого экономит ресурсы.
    Но это мое личное мнение.

  7. Добрый день.
    Могли бы Вы подсказать как правильно настроить правило, если у элемента нет id, класса или ссылки и необходимо использовать id родительского элемента. В справке GTM указано: {{element}}.parentNode.id можно использовать в правиле или теге, чтобы получить идентификатор родительского элемента.

    Но я не совсем понял как это использовать на практике. Заранее спасибо :)

    • Добрый день! Вы должны полученное значение записать в макрос, затем в правилах к тегу использовать этот макрос для сопоставления.

  8. И еще один вопрос, если можно.

    Ранее на сайте стоял аналитикс без GWT. Затем установил аналитикс через GWT, но при этом перестали работать виртуальные просмотры, которые были заданы при клике на кнопку. На кнопке стоит такой код:
    onclick=”_gaq.push(['_trackPageview', '/clicl-ok']);”
    Ранее в отчетах по содержанию появлялась страница /clicl-ok, после перехода на GWT страницы при клике в отчетах нет. Могли бы вы сказать в чем может быть проблема?

    • Нужно в теге настроить виртуальные просмотры страниц, а код убрать с сайта. Вот здесь есть информация о виртуальных просмотрах страниц.

  9. @Иван
    Необходимо создать новый макрос? Могли бы вы уточнить какой тип должен быть у макроса? Не совсем разобрался как это правильно сделать, как записать {{element}}.parentNode.id в макрос :(

    • Андрей, создайте макрос типа пользовательский JavaScript, в нем создайте функцию (пример покажет сам GTM), в которой используйте Ваш код. Если у Вас будут вопросы, можете написать мне письмо

  10. Спасибо за статью! уже неделю мучаюсь с этой настройкой, в том числе по видео туториалу Киссметрикс. По вашему методу все получилось, хотя мне кажется не очень логичным, что тег на прослушивание кликов (Click Listener) должен включаться на как на всех страницах всегда, так и на более узкое правило. Но главное – работает…

  11. Добрый день.

    Такой вопрос.
    Настроил все по Вашим рекомендациям, все работает все круто. Спасибо Вам за статью.
    Если настраиваю отслеживание конверсий Google AdWords, можно ли использовать правило клика на любых объектах страницы?

    • Добрый день, Владимир!
      Смотря какое целевое действие у Вас на странице, если просмотр, то можно настроить правило на показ определенной страницы, если клик по объекту на странице, то на него. Клик на любой странице можно настроить для конверсии для AdWords.

  12. @Иван
    Добрый день, Иван!
    Я имел ввиду клик по объекту на странице и чтобы это событие передавалось как конверися Google AdWods. То есть по аналогии с Google Analytics можна настроить?

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

    • Спасибо, Вадим! Я знакомился с этим материалом, думаю тем кто дойдет до этого комментария он окажется полезным

  14. Здравствуйте!
    Сделал все как описано в примере.
    Отладчик пишет, что Event Tracking UA – Клик по ссылке О компании не активизировался
    В чем может быть причина?

    • Дмитрий, добрый день!
      Вариантов может быть масса. Вы уверены, что событие gtm.click происходит? Если да, то нужно проверить правила активации тегов, если нет – искать причину, почему gtm.click не обрабатывается.

  15. Иван, спасибо!
    Изменил правило, установив прослушку всех кликов – не помогло. Это означает, что gtm.click не работает?
    Какими инструментами можно найти решение проблемы?

    • Дмитрий, все зависит от конкретной ситуации, нужно смотреть логику работы сайта и потом делать выводы

  16. Скорее всего причина в том, что нажатие на кнопку, которое отслеживал, приводит к пересылке на другую страницу. И скрипт просто не успевал срабатывать

  17. Добрый день!
    Не могу разобраться, что настраиваю не верно, когда создаю событие, через GTM.
    Задача следующая:
    В интернет магазине на карточке товара есть список “забрать лично в N магазинах”
    http://www.vodmag.ru/catalog/biotualety-dlya-dachi/biotualety/850200010000100000
    Необходимо на этот список настроить событие.
    Я делал по этому руководству:
    http://prometriki.ru/nastroyka-otslegivaniya-sobyitiy-google-analytics-v-google-tag-manager/
    Сделал следующие настройки:
    Скрин 1: http://cs618423.vk.me/v618423551/6e04/W8a89mnwI48.jpg
    Скрин 2: http://cs618423.vk.me/v618423551/6e0e/q5578Aob4eY.jpg

    В чем могут быть проблемы, отслеживаю не тот элемент или ошибся в настройки?

  18. Хотел бы заметить, что в теге «События – клики на ссылках» не обязательно создавать правило «Клик по ссылке О компании», его можно создать сразу в теге передачи события «Event Tracking UA». Так и действий нужно меньше, и список тегов выглядит эстетичней.

  19. Добрый день!
    Нужно настроить отслеживание отправок форм. На странице одну и ту же форму ( заявка) можно отправить из разных мест (вверху и внизу страницы форма повторяется). Можно ли настроить так, чтобы отправка любой формы отслеживалась как одно событие, чтобы потом в аналитикс это настроить как одну цель? Может быть не нужно указывать ID в правилах?

  20. @Мария , можно указать для каждой формы одинаковые значения «Категория» и «Действие» при передачи данных в GA. Так они должны отображаться под одной “целью в аналитикс”.

    А если каждой форме добавить индивидуальный «Ярлык», то в итоге можно также отслеживать и какая именно форма была задействована – верхняя или нижняя.

  21. Иван, с удовольствием читаю ваш блог.

    Что делать, если в интерфейсе только 3 макроса?

    Скриншот gyazo.com/333bdd28ffdd07d3a2a1d7ad5d82d093

    Нет других, например element id или element class. Не удалял их вроде

    • @Руслан, у Вас очень давно создан контейнер, судя по скриншоту. Есть два варианта – создать новый контейнер и перенести в него все имеющиеся теги или создавать нужные макросы на основе настроек, которые можно узнать создав новый контейнер и перейдя к свойствам тегов в нем.

  22. Иван, как поступить, если у элемента нет своего класса или ай ди?

    К примеру есть страница с несколькими табами (вкладками). Они имеют общий класс.
    При клике по каждому из табов переключается содержимое страницы. Название каждого таба сверстано в html “названием вкладки”

    Правило:

    {{event}} равно “gtm.click”
    {{element classes}} равно “название класс”
    {{element text}} равно “название вкладки”

    В процессе отладки событие не фиксируется. И соответственно в GA данные не поступают

  23. Иван, вот такая ситуация. У меня есть такая форма:

    Подписаться

    Создал тег отслеживания отправки форм на всех страницах.
    Создал тег отслеживания события отправки формы с правилами:
    {{event}} содержит gtm.formSubmit
    {{element id}} содержит form-signature-news

    Все я правильно сделал? Или event по другому должен регистироваться?
    Просто после публикации проверял через онлайн события и оно не было зафиксировано.

  24. Иван, подскажите пожалуйста как лучше решить такую задачу.
    Есть сайт основным целевым действием на котором является установка пользователем кода на своем сайте. На пути к этому он проходит несколько этапов.
    1. Регистрируется разными способами
    2. Кликает на кнопку проверки правильности установки кода
    3. Получает подтверждение правильности установки
    Все три действия фиксируются как события через GTM в UA. На все эти 3 события события настроены цели в UA.
    Можно ли сделать так, чтобы для каждого уникального посетителя каждая из этих целей фиксировалась только один раз, если он ее достиг?
    Буду очень благодарен за совет.

    • Цель фиксируется один раз в течении сессии, если вам нужно в принципе один раз фиксировать ее за все время посещений сайта, то продумайте вариант блокировки отправки данных по цели для некоторых посетителей. Например пометка кукой или другой вариант

  25. Настроил согласно инструкции отслеживание кликов на ссылку.
    Однако в Режиме реального времени » Конверсии ничего не отображается при клике на ссылку.
    А вот в События появляются undefined → http://joxi.ru/vDr8nBYsD86p26

    Возможно, что то неправильно настроил.
    Вопросы:
    1. gtm.linkClick – приставка gtm должна совпадать с названием контейнера или всегда ставится такая
    2. нужно ли устанавливать параметры отслеживания событий → http://joxi.ru/48An0kluKJ9VmO

    Скрины настроек
    http://joxi.ru/48An0kluKJ9VmO
    http://joxi.ru/wRmzgGyCVeLy2O
    http://joxi.ru/qVrwQvxhgeGZ2X
    http://joxi.ru/vn2Yz9JI0zDoA6
    http://joxi.ru/LQ2Kx9ZIglp0Aj

    Буду признателен за наводку, что неверно сделал.

    • Юрий, gtm.linkClick это стандартное событие GTM, параметры отслеживания событий обязательно указываются, посмотрите в документации про отслеживание событий GA

  26. Правильно ли я понял. Показы элемента, например сообщение об ошибке, получается tagmanager “ловить” не может?

    • В GTM есть тип тега связанный с ошибками JS, в разделе прослушивание событий. Попробуйте использовать его

  27. Иван, спасибо за подробную статью!
    У меня два вопроса:
    1. не совсем поняла, что вписывать в графы “Параметры отслеживания событий” при создании тега события для отправки в UA
    2. сделала 2 события по вашей инструкции (как раз кроме заполнения параметров), опубликовала, но события не считаются. Прошло буквально 30 минут. Нужно подождать?
    Кстати, после добавление GTM на сайт специалисты забыли удалить код отслеживания GA. Может, это как-то мешает?

    • Ася, у настройки событий есть обязательные поля – категория и действие, их нужно указать. На сайте для одного счетчика нужно использовать или GTM или код отслеживания, совмещать их не стоит

  28. (Иван, оч хорошо объяснили, спасибо за подробности.
    У меня появилась проблема на этапе отслеживания событий.
    На Nnov.ponominalu.ru есть кнопка “оформить билет”, которая появляется если положить любое событие в корзину.
    Она имеет id = orderFinishButton http://prntscr.com/6j3jz3
    Я вставил на сайт тег менеджер
    дальше настроил тег (http://prntscr.com/6j3qdc) , который
    {
    а) Отдает категорию = conversion
    б) Отдает событие = go2done
    }
    (если
    а) {{event}} равно gtm.formSubmit
    б) {{element_id}}=OrderFinishButton
    )
    Тажке в гугле создал категорию и конверсию, чтобы принимать категории и конверсии http://prntscr.com/6j3nnm
    Далее запустил отладчик, нажимаю на кнопку, но все равно вижу, что несмотря на то, что кликаю на кнопку с верным id + что gtmFormsubmit уходит http://prntscr.com/6j3ox1, но тег все равно не отображается как “Fired”
    Вы не знаете, в связи с чем конверсии все равно не приходят?:)

    • Александр, я не могу по скриншотам определить в чем проблема в настройках, для этого нужно смотреть сайт и настройки в контейнере

  29. Крайне непонятная и дурацкая инструкция для СТАРОГО интерфейса. Ее давно пора сжечь. Автора – тоже. чудака отгребаного. Час убил вникуда.

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

  30. Кстати, тоже хочу вставить свои 5 копеек – изучаю ваш блог в связи с необходимостью разобраться с GTM и поэтому собираю все знания по частям – ваш блог на многие вопросы отвечает, но все портит тот факт, что все примеры у вас разобраны на старом интерфейсе GTM. Из-за этого возникает путаница, потери времени и негатив, что подтверждает посты в данной ветке. Может пора переделывать все руководства под новый интерфейс?
    Я понимаю, это геморрой и куча времени, но какой смысл в блоге, если инфа в нем стремительно теряет свою актуальность?
    С уважением.

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

  31. Здравствуйте.
    Подскажите, пожалуйста, как настроить макрос или элемент таким образом, чтобы событие передавалось только в том случае, если пользователь отправил свои данные, а не просто кликнул по кнопке без заполнения данных?

    Спасибо!

  32. Иван, пытаюсь настроить отслеживание формы отправки.
    Событие в отладке отправляется, в wasp смотрел в дата лауер уходит.
    В UA нет.. в разделе событий.

    Подскажи, куда смотреть ? айдишника на кнопке нет, отправляю из содержания
    <input type="submit" value="Зарегистрироваться"
    привязку делаю как форма Form Text

    • Максим, вероятно Ваш ip указан в списке в настройках фильтра, если проблема носит технический характер, то необходимо разбираться с настройками в GTM и реализацией на сайте

  33. Подскажите, пожалуйста, если можете отчет на такой теоретический вопрос, какие изменения необходимо внести в стандартный код Analytics если оформление заказа происходит на субдомене my.site.com и что будет происходить если эти изменения не внести?

    • Необходимо настроить междоменное отслеживание, в противном случает трафик с субдомена my…. будет считаться реферральным

Добавить комментарий

Current month [email protected] day *