Обратная связь
Введите ваши данные, и я свяжусь с вами!
Какой у вас вопрос?

Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c обработкой персональных данных

Как фиксировать события в Google Tag Manager

Материал обновлен 03:01:2022

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

В прошлом материале я описал некоторые обновления в Google Tag Manager. Сегодня предлагаю рассмотреть типичную ситуацию — фиксацию кликов.

На самом деле все достаточно просто, однако немного отличается от ранее используемой схемы. Напомню, в первой версии Google Tag Manager при настройке для фиксации событий использовались стандартные теги прослушивания событий и при их выполнении макрос {{event}} принимал одно из стандартных значений, например, gtm.click.

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

Рассмотрим несколько примеров:

  • клик по элементу, с указанным идентификатором;
  • клик по ссылке, которая уводит посетителя с сайта.

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

Посмотрим на фрагмент исходного кода страницы сайта:

Пример кода страницы

Пример кода страницы

Для работы нам понадобятся стандартные переменные, которые по умолчанию отключены. Перейдем к списку переменных:

Переход к переменным

Переход к переменным

И укажем те из них, которые понадобятся нам:

Переменные по умолчанию в Google Tag Manager

Переменные по умолчанию в Google Tag Manager

Первая переменная будет содержать ID элемента, по которому выполнен клик, вторая URL, по которому будет выполнен переход.

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

Первый пример: клик по элементу, с указанным идентификатором.

Перейдем к созданию нового тега:

Меню работы с тегом

Меню работы с тегом

выбираем тип пользовательский HTML:

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

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

Нажимаем синюю кнопку — продолжить. На втором этапе нам предлагают указать, при каких условиях будет активирован тег. Ранее такие условия назывались правилами, теперь это триггеры.

Создадим нужный нам триггер. Т.к. мы фиксируем клик, то тип события указываем как Click:

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

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

Отображается окно создания нового триггера типа Click. Первый шаг уже считается завершенным, т.к. мы выбрали тип нашего события — это клик.

На втором шаге нам предлагают выбрать один из вариантов — это все клики или использовать фильтр. Нам нужно фиксировать клик только по определенному элементу, по этому выбираем Some Clicks:

Выбор типа клика

Выбор типа клика

После этого нам предлагают указать условия. Вернемся к исходному коду страницы и посмотрим, что нас интересует элемент, у которого ID равен demo_id. Укажем это условие:

Условие клика по определенному элементу с id

Условие клика по определенному элементу с id

Первое поле — стандартная переменная, второе — условие сопоставление, третье — шаблон для сопоставления.

Нажимаем синюю кнопку Продолжить и завершаем создание триггера. Т.к. нам нужен клик по элементу, который не является ссылкой, выбираем тип триггера Click, в поле Название — указываем понятное название триггера:

Завершение создания триггера

Завершение создания триггера

Сохраняем выполненные настройки и возвращаемся к форме настройки тега. Теперь необходимо указать содержимое тега:

Содержимое тега

Содержимое тега

Нажимаем кнопку — создать тег. Если вы все сделали правильно, то вновь созданный тег появится в списке тегов:

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

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

Теперь проверим работу наших настроек, перейдем в режим просмотра версии контейнера.

Режим просмотра в Google Tag Manager

Режим просмотра в Google Tag Manager

В новой версии Google Tag Manager в режиме просмотра активируется режим отладчика, дополнительных инструментов нам не понадобится. Проверяем:

Результат настройки Google Tag Manager

Результат настройки Google Tag Manager

Работает, как нужно, посмотрим в отладчике:

Информация в отладчике Google Tag Manager

Информация в отладчике Google Tag Manager

Проверим через отладчик активацию тега:

Активация тега в отладчике

Активация тега в отладчике

Вывод — выполненная настройка работает, мы фиксируем клик по нужному нам элементу.

Второй пример: клик по ссылке, которая уводит посетителя с сайта.

Действия аналогичные, создаем тег пользовательский HTML и указываем для него триггер активации, но при создании триггера задаем немного другие условия.

Итак, вы дошли до этапа создания триггера, выбрали тип Click и находитесь на втором этапе создания триггера:

Второй этап создания триггера Google Tag Manager

Второй этап создания триггера Google Tag Manager

Выберите Some Clicks и в условиях укажите, что URL элемента по которому выполнен клик не должен содержать имя вашего домена, пример:

Переход с сайта prometriki.ru

Переход с сайта prometriki.ru

На следующем шаге укажите тип триггера как Link Click, и задайте дополнительное правило:

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

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

после чего можно проверить работу триггера.

Смотрим информацию в отладчике:

Активация тега по клику на ссылке

Активация тега по клику на ссылке

Клик по ссылке в отладчике

Клик по ссылке в отладчике

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

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

Не забывайте нажать кнопку любой социальной сети ниже поста!

Рассылка бесплатных кейсов, инструкций, обзоров
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
Ежедневные новости из мира аналитики в Telegram канале
Настройки, интеграции, примеры реальных задач, пошаговые инструкции
материалы ПО ТЕМЕ:
ОБСУЖДЕНИЕ:
Александр
13.11.2014 at 12:10

Здравствуйте Иван. Спасибо за материал, очень полезен. Было бы отлично если бы написали также о фиксации отправок форм.

Заранее спасибо и приятного дня.

    Иван
    16.11.2014 at 12:34

    Александр, отправка форма аналогична кликам, у Вас в чем сложности?

Алексей
18.11.2014 at 16:31

как быть если нет id у элемента? есть class. Второй вопрос. Можно ли поставить условие «при наличии определенного текста на странице» например если на странице есть текст «Светильник» то при клике на некую кнопку в гугл отправляется событие содержащее слово светильник

алексей
04.12.2014 at 12:41

Подскажите, как можно отследить скролинг страница. Т.к. работаю постоянно с длинными лендингами, Карта скролинга дает размыетое понимание результатов, хотелось бы знать сколько человек долистывают до каждого из блока.
результат в идеале:
div_1 = 75% пользователей
div2 = 50% пользователей
div_3=20% пользователей

Если это можно сделать по высоте в пикселях, тут разницы нету.

    Иван
    07.12.2014 at 00:48

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

Симтек Девелопмент
05.12.2014 at 04:58

Спасибо большое за отличный обзор, ваши рекомендации мне очень помогли.

Юлия
13.01.2015 at 21:22

Иван, спасибо за статью! Подскажите пожалуйста, настроила отслеживание перехода по баннеру на другой сайт, в отладке показывает, что тег работает правильно, а вот в UA в режиме реального времени данных нет ((. Что может быть не так?
Заранее спасибо!

    Иван
    15.01.2015 at 08:24

    Юлия, проверьте идентификатор счетчика, а также убедитесь, что в отладчике есть информация об отправке данных события

Денис
29.01.2015 at 22:30

Событие зафиксировать удаётся? Но как по нему настроить цель в GA?

    Иван
    03.02.2015 at 12:41

    Денис, нужно настроить цель основанную на событии. При создании цели в GA есть соответствующая опция

Алексей
03.02.2015 at 19:36

Спасибо большое за статью!

У меня 2 вопроса появилось.
1) Почему в «пользовательском html надо писать:

alert(‘Клик по элеменду с class’);

2) Захожу в предварительный просмотр.
Показывается, что код Аналитики на странице, а вот «пользовательского кода» на странице нет.

При этом когда кликаю на кнопку (на которую событие ставил), появляется сообщение, что был клик по элементу с class. И теперь отображается, что код аналитики, и пользовательский код есть.
Так и должно быть?

С уважением, Алексей.

    Иван
    07.02.2015 at 18:21

    Алексей, отвечаю по пунктам:
    1. Это для демонстрации работы, можно написать код для вывода в консоли информации или любой другой
    2. Верно, так и будет, код содержится в контейнере GTM

Анна
31.03.2015 at 18:48

Где то я потеряла мысль — что вставлять в блок :
Настройка тега HTML ???

Андрей Николаевич
09.04.2015 at 15:26

Здравствуйте, оперативно сделали обзор на GTM 2.0. Сам только начал разбираться что да как и сразу переход на версию 2.0. Вопрос в следующем:
Настройка тега HTML: в поле ввода html текста нужно указать строку, где присутствует отслеживаемая переменная? Поправьте если ошибся. Спасибо!

    Иван
    14.04.2015 at 13:00

    Из Вашего комментария не понятна проблема и задача

валерий
14.05.2015 at 22:33

к сожалению, материал не актуальный. возможно что-то менялось в ТегМенеджере. Если выбирать Пользовательский HTML, то обязательно нужно вставлять какой-то html!

во- вторых, для триггера нужно указывать два условия — условие активации и условие включения (в чем разница — я так и не поянл).

в-третьих, почему-то для отслеживания кликов, везде говорят, что нужен тег Аналитикса, а не HTML

    Иван
    15.05.2015 at 09:40

    Валерий, если выбран HTML тег, то в нем обязательно должен быть некоторый код. Вы можете использовать любой тип тега, HTML приведен для примера. Я не понял на основании чего вами сделан вывод о неактуальности материала?

Денис
23.05.2015 at 23:29

Сделал по инструкции, но события так и не появились в отчете GA.
В связи с этим вопрос:
> Нужно ли было что-то добавлять на сайт еще (код)?

Будет или может уже был материал на тему, как создать события для просмотра видео из Ютуба, показов баннеров?
Спасибо.

    Иван
    25.05.2015 at 16:46

    Денис, разобраться с причинами «не работает» можно только работая с сайтом. Про YT пока не писал, а про баннеры не понял. Что имелось ввиду?

Александр
26.05.2015 at 13:18

Добрый день, Иван! Спасибо за обзор! Подскажите где на этом этапе проставить событие для GA, которое после можно будет настроить в качестве цели?

Arkanum
26.05.2015 at 23:26

Всё супер! Но у меня не работает. Бьюсь и не могу понять

Сделал всё как надо, в отладчике есть событие, но у меня происходит переход и ничего не фиксируется.

http://prntscr.com/79pl6i

    Иван
    27.05.2015 at 13:19

    Из Вашего сообщения не понятно о чем идет речь

Максим
02.06.2015 at 19:27

Помогите настроить отправку форм для 2 форм SIGN UP и Play https://svetofor24.com/.
Уже 2 недели пробую все методы ничего не получается Версия таг менеджер 2.0

    Иван
    08.06.2015 at 13:10

    Максим, у Вас происходит предварительная валидация формы, нужно настраивать исходя из этого логику работы GTM. Если Вам необходима помощь в настройке — можете обратиться за соответствующей услугой

Денис
05.06.2015 at 12:53

Иван, еще вопрос, что писать в блоке с добавлением «содержимое тега» alert(‘клик по ссылке с id’) ?
Можно ли оставить только — ?

    Иван
    08.06.2015 at 13:11

    Денис, этот блок для демонстрации, используйте ту конструкцию, которая Вам необходима для решения конкретной задачи

Елена
12.06.2015 at 23:04

Иван, может сможете помочь. На моем сайте не прописан id кнопки. Есть что-то такое:
div class=»cart-button»
div class=»cart»
И сколько я ни прописываю Click Classes равно cart-button, GTM не фиксирует это событие 🙁 В чем может быть проблема?

    Иван
    13.06.2015 at 00:21

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

    Елена
    14.06.2015 at 11:38

    gobelendecor.ru . Пытаюсь отследить нажатие кнопки «В корзину». Буду очень благодарна за помощь!

    Иван
    16.06.2015 at 00:23

    Елена, у Вас на этой кнопке есть обработчик JS или jQuery, по этой причине не «видно» события GTM. Вам нужно написать собственный обработчик или дописать существующий, чтобы он отправлял некоторые данные в GTM через уровень данных, на основе которых Вы сможете настроить то, что Вам необходимо

Александр
25.06.2015 at 14:21

Добрый день, Иван!
Не удается настроить отслеживание формы по Вашему примеру. Подскажите пожалуйста, что делаю не так? Описание настройки привожу ниже
Тег:
Выбор продукта — Google Analytics
Выбор типа тега — Universal Analytics
Настройка тега
ID отслеживания — id GA
Тип отслеживания — Событие
Категория — форма
Действие — шапка
Не взаимодействие — False
Условие активации -> Еще -> форма шапка

Тригер (форма шапка):
Выбор события — Пользовательский
Условия активации:
Имя события: -*
Event равно gtm.formSubmit
Form ID равно form1

    Юрий
    26.06.2015 at 11:43

    аналогично! буду рад если автор напишет алгоритм.

    Иван
    04.07.2015 at 18:34

    Юрий, общий алгоритм таков — если работают стандартные события gtm.xxx, можно использовать их, если они не доступны, то необходимо писать свой собственный обработчик события, которое выполняет пользователь

Вера
07.07.2015 at 10:43

Добрый день, Иван!
Подскажите, чем все-таки отличаются условие включения и условие активации?

    Иван
    08.07.2015 at 00:04

    Добрый вечер, Вера! Условие активации — это настройка тега, в которой указываются триггер, при истинности которого тег «сработает». Условие включения — это набор условий ВНУТРИ триггера, при выполнении которых он будет считаться истинным.

Анна
12.08.2015 at 18:05

Добрый день, Иван!

Возникла сложность с настройкой нажатия на кнопку во всплывающей форме. В ситуации с поп-апами настройка отслеживания вообще меняется? Как это верно сделать?

    Иван
    16.08.2015 at 23:01

    Анна, причин по которым Google Tag Manager «не видит» кнопку несколько, попробуйте написать свой обработчик для клика по кнопке и через него передавать информацию на уровень данных

Р
09.09.2015 at 01:07

Добрый день.

Хотелось бы создать триггер, который активируется только при условии активации другого триггера (или тега). Также при настройке правила активации, выбирая 2 триггера, пишется «Любой из этих триггеров приведет к активации тега», может есть возможность использовать логическое «И» или последовательность?

Заранее спасибо.

    Иван
    09.09.2015 at 09:15

    Сейчас есть такая возможность. По логике: триггеры в контейнере работают по правилу ИЛИ, условия в триггере работают по правилу И

    Р
    09.09.2015 at 14:08

    Иван,
    можно использовать статус другого триггера в качестве условия для активации? Можете показать пример?

    Иван
    10.09.2015 at 17:49

    У тега может быть несколько триггеров, если хотя бы один из их принимает значение ИСТИНА, то тег активируется

Сергей
16.10.2015 at 02:31

Иван, спасибо за статью!
Только начинаю осваивать GTM, сделал все в точности по инструкции с custom html — события не передавались в аналитикс. Изменил тип тега на GA и уже в его настройках выбрал отслеживание событий — все стало Ок. В связи с чем возник вопрос — как передавать данные в Аналитикс, настроенные через все другие стандартные типы тегов, включая custom html? Пока что мне удалось это сделать только через тип тега GA.

    Иван
    18.10.2015 at 22:40

    Сергей, все что касается передачи данных в Google Analytics нужно настраивать в тегах типа Google Analytics, это правильная реализация

О
22.10.2015 at 11:45

Иван, добрый день! Только осваиваем GTM. Настроили клик с переходом на скачивание файла (по вашему второму примеру) и, возможно, глупый вопрос — как настроить эту цель отслеживания в GA?

    Иван
    30.10.2015 at 20:03

    Нужно создать тег типа Google Analytics, в нем указать тип хита событие и активировать его при клике по нужному элементу

Иван
10.11.2015 at 20:29

Подскажите пожалуйста почему отладчик может не открываться? пробовал в двух браузерах firefox и chrome, в режиме инкогнито в обоих, не вылезает… alert срабатывает и второй вопрос, можно ли это событие передать потом в метрику для достижения цели? спасибо!

    Иван
    10.11.2015 at 22:56

    Иван, подобной проблемы не возникало с отладчиком. Какое событие Вы хотите зафиксировать в Метрике? Если срабатывает триггер, то на него можно тег добавить, с кодом Метрики

    Иван
    11.11.2015 at 13:10

    Клик по элементу

    Вернуться в каталог

    вы имеете ввиду использование reachGoal? если можно на пальцах, что должно быть в коде?
    как я понимаю помимо проверки срабатывания события:

    alert('back-in-catalog');

    добавить еще отправку в счетчик срабатывание цели

    onclick="yaCounter.reachGoal(''); return true;"

    (не очень силен пока в этом…)

    Иван
    12.11.2015 at 09:02

    Иван, верно. Можно использовать reachGoal

Иван
13.11.2015 at 16:36

с целью в метрике заработало, подскажите пожалуйста как запараллелить тоже самое с GA?

    Иван
    17.11.2015 at 11:35

    На триггер, который активирует тег для Метрики «повесить» тег Google Analytics

Кристина
09.12.2015 at 15:06

а как отслеживать не только клики по id но и показы? в случае если это баннерная реклама.

Юрий
06.06.2016 at 09:40

При создании первого элемента /выбираем тип пользовательский HTML:/ просит ввести HTML. Что вводить?

    Иван
    07.06.2016 at 16:03

    Юрий, вводите код, который должен быть выполнен в случае активации тега

Роман
20.09.2016 at 13:18

Подскажите, и что нужно писать в HTML, если мне нужно передать событие о достижении цели в Universal Analytics

    Иван
    21.09.2016 at 00:50

    Роман, нужно использовать тег типа Universal Analytics, в котором задать необходимые настройки (например, описание события)

    Роман
    26.09.2016 at 13:22

    Т.е. я могу, например, написать туда: ga(‘send’, ‘event’, ‘button’, ‘click’);
    И настроить соответствующую цель в Google Analytics
    Чтобы отслеживать клик по кнопке?

    Иван
    28.09.2016 at 09:42

    Нет, для кода используется тип «Пользовательский HTML», в тегах Google Analytics нужно использовать соответствующие поля в настройках тега

Марина
04.11.2016 at 17:43

Иван, добрый день. В Вашем примере при создании триггера по другому показано настройку. Я поняла, что это скорее всего обновления GTM.
Есть два условия:
— Enable this trigger when all of these conditions are true
— Fire this trigger when an Event occurs and all of these conditions are true
Обязательно прописывать два? Или какое из них более приоритетное?

    Иван
    06.11.2016 at 12:16

    Марина, если я правильно понял Ваш вопрос, то это дополнительные условия активации триггера. Например, условие событие gtm.click И урл страницы содержит …. Если можете — приложите скриншот к своему вопросу

    Марина
    06.11.2016 at 19:49

    Вот скриншот http://www.picshare.ru/view/7749092/

    Пробую настроить отслеживания кнопок социальных сетей через GTM:) Не получается пока, но вот дополнительный параметр еще больше запутывает…
    Спасибо!

    Иван
    20.11.2016 at 18:32

    Марина, первый блок условий служит для определения страниц, где должен «находиться» триггер, второй блок непосредственно условие триггера

Анастасия
10.11.2016 at 13:20

Здравствуйте, Иван.
Спасибо большое за такую подробную и понятную статью. Пользуясь вашими рекомендациями настроила события в GTM, а именно — обработку нажатия на кнопку. Но теперь, если на сайте нажать на кнопку, для которой настроено событие, то появляется всплывающее окно с именем триггера. Где ошибка у меня в настройках, не могу понять.
Помогите, пожалуйста.
Заранее огромное спасибо!

    Иван
    20.11.2016 at 18:37

    Анастасия, для решения Вашей проблемы необходимо изучить настройки в Google Tag Manager

Сергей
11.11.2016 at 15:29

Привет.

Если есть внутри которого 10 разных ссылок. Мне нужно остлеживать нажатие на весь див, даже если юзер жмет на ссылку.

Стандартными методами GTM отслеживает нажатие на внешний див, только если тыкнуть в него мимо ссылки, если же нажать на ссылку, то нажатие на внешний див не остлеживается.

Изменить внутренние ссылки возможности нет — это внешний жаваскрипт.

Есть варианты?

    Иван
    20.11.2016 at 18:38

    Сергей, нужно писать свой обработчик для соответствующего элемента на JavaScript или JQuery

Сергей
11.11.2016 at 15:29

Вырезал теги софт твой…

…Если есть див, внутри которого 10 разных ссылок…

Николай
24.07.2018 at 12:29

Добрый день!
Подскажите что мне необходимо указать/исключить для того, чтобы выполнить условия активации. Скрин https://yadi.sk/i/wT8C1bCG3ZWVMS

    Иван
    26.07.2018 at 00:03

    Добрый день. Покажите настройку триггера в Google Tag Manager

Оставить комментарий
Для добавления комментария — заполните форму!

Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c обработкой персональных данных