Как фиксировать события в Google Tag Manager 2.0
7 уроков, более 2 часов обучающих видео материалов. Вы можете начать изучение прямо сейчас!
В новой версии Google Tag Manager несколько изменился принцип работы с событиями, теперь нет стандартных тегов прослушивания кликов и других событий. Как же решить задачу по фиксации подобных действий?
В прошлом материале я описал некоторые обновления в Google Tag Manager. Сегодня предлагаю рассмотреть типичную ситуацию – фиксацию кликов.
На самом деле все достаточно просто, однако немного отличается от ранее используемой схемы. Напомню, в первой версии Google Tag Manager при настройке для фиксации событий использовались стандартные теги прослушивания событий и при их выполнении макрос {{event}} принимал одно из стандартных значений, например, gtm.click.
В новой версии Google Tag Manager нет необходимости добавлять теги прослушивания событий, достаточно при создании триггеров (ранее - правила) указать нужный тип события и задать правила сопоставления, например, с элементом, по которому выполнен клик.
Рассмотрим несколько примеров:
- клик по элементу, с указанным идентификатором;
- клик по ссылке, которая уводит посетителя с сайта.
Эти примеры служат только для демонстрации нового принципа работы, но поняв принцип их работы вы сможете создавать свои триггеры для активации нужных правил.
Посмотрим на фрагмент исходного кода страницы сайта:
Пример кода страницы
Для работы нам понадобятся стандартные переменные, которые по умолчанию отключены. Перейдем к списку переменных:
Переход к переменным
И укажем те из них, которые понадобятся нам:
Переменные по умолчанию в Google Tag Manager
Первая переменная будет содержать ID элемента, по которому выполнен клик, вторая URL, по которому будет выполнен переход.
Теперь все готово для начала работы по созданию триггеров фиксирующих клики, приступим.
Первый пример: клик по элементу, с указанным идентификатором.
Перейдем к созданию нового тега:
Меню работы с тегом
выбираем тип пользовательский HTML:
Создание нового тега
Нажимаем синюю кнопку – продолжить. На втором этапе нам предлагают указать, при каких условиях будет активирован тег. Ранее такие условия назывались правилами, теперь это триггеры.
Создадим нужный нам триггер. Т.к. мы фиксируем клик, то тип события указываем как Click:
Создание триггера в Google Tag Manager
Отображается окно создания нового триггера типа Click. Первый шаг уже считается завершенным, т.к. мы выбрали тип нашего события – это клик.
На втором шаге нам предлагают выбрать один из вариантов – это все клики или использовать фильтр. Нам нужно фиксировать клик только по определенному элементу, по этому выбираем Some Clicks:
Выбор типа клика
После этого нам предлагают указать условия. Вернемся к исходному коду страницы и посмотрим, что нас интересует элемент, у которого ID равен demo_id. Укажем это условие:
Условие клика по определенному элементу с id
Первое поле – стандартная переменная, второе – условие сопоставление, третье – шаблон для сопоставления.
Нажимаем синюю кнопку Продолжить и завершаем создание триггера. Т.к. нам нужен клик по элементу, который не является ссылкой, выбираем тип триггера Click, в поле Название – указываем понятное название триггера:
Завершение создания триггера
Сохраняем выполненные настройки и возвращаемся к форме настройки тега. Теперь необходимо указать содержимое тега:
Содержимое тега
Нажимаем кнопку – создать тег. Если вы все сделали правильно, то вновь созданный тег появится в списке тегов:
Список тегов в Google Tag Manager
Теперь проверим работу наших настроек, перейдем в режим просмотра версии контейнера.
Режим просмотра в Google Tag Manager
В новой версии Google Tag Manager в режиме просмотра активируется режим отладчика, дополнительных инструментов нам не понадобится. Проверяем:
Результат настройки Google Tag Manager
Работает, как нужно, посмотрим в отладчике:
Информация в отладчике Google Tag Manager
Проверим через отладчик активацию тега:
Активация тега в отладчике
Вывод – выполненная настройка работает, мы фиксируем клик по нужному нам элементу.
Второй пример: клик по ссылке, которая уводит посетителя с сайта.
Действия аналогичные, создаем тег пользовательский HTML и указываем для него триггер активации, но при создании триггера задаем немного другие условия.
Итак, вы дошли до этапа создания триггера, выбрали тип Click и находитесь на втором этапе создания триггера:
Второй этап создания триггера Google Tag Manager
Выберите Some Clicks и в условиях укажите, что URL элемента по которому выполнен клик не должен содержать имя вашего домена, пример:
Переход с сайта prometriki.ru
На следующем шаге укажите тип триггера как Link Click, и задайте дополнительное правило:
Дополнительное правило активации
после чего можно проверить работу триггера.
Смотрим информацию в отладчике:
Активация тега по клику на ссылке
Клик по ссылке в отладчике
Приведенным примеры демонстрирую работу по фиксации кликов в новой версии Google Tag Manager.
Не уверен, что подобное может быть у вас, но у меня фиксация кликов в новой версии Google Tag Manager не работала на сайте, где установлена первая версия. Код первой версии шел выше кода новой, вероятно это замечание будет кому-то полезно.
Не забывайте нажать кнопку любой социальной сети ниже поста!
Обсуждение
Ваш комментарий
Последние публикации
- Производственный календарь в Power BI
- Как не “засорять” счетчик Google Analytics при отладке на этапе внедрения
- Работа с JavaScript кодом в Google Tag Manager
- Как фиксировать максимум реальных ClientID Google Analytics
- Как добавить контейнер Google Tag Manager без изменения исходного кода страницы сайта
- 6 обновлений Google Analytics
- Как в Google Analytics отобразить полный адрес страницы
- Правильное внедрение Google Tag Manager
- Как настроить параметры посетителей Яндекс Метрики в Google Tag Manager
- Как копировать цели между представлениями и аккаунтами в Google Analytics
Здравствуйте Иван. Спасибо за материал, очень полезен. Было бы отлично если бы написали также о фиксации отправок форм.
Заранее спасибо и приятного дня.
Александр, отправка форма аналогична кликам, у Вас в чем сложности?
как быть если нет id у элемента? есть class. Второй вопрос. Можно ли поставить условие “при наличии определенного текста на странице” например если на странице есть текст “Светильник” то при клике на некую кнопку в гугл отправляется событие содержащее слово светильник
Подскажите, как можно отследить скролинг страница. Т.к. работаю постоянно с длинными лендингами, Карта скролинга дает размыетое понимание результатов, хотелось бы знать сколько человек долистывают до каждого из блока.
результат в идеале:
div_1 = 75% пользователей
div2 = 50% пользователей
div_3=20% пользователей
Если это можно сделать по высоте в пикселях, тут разницы нету.
Для этого есть готовые решения или обратитесь к разработчикам, они смогут подобное реализовать. Вам нужно только в нужное время отправлять данные в GA. Постараюсь про это рассказать в одной из статей
Спасибо большое за отличный обзор, ваши рекомендации мне очень помогли.
Иван, спасибо за статью! Подскажите пожалуйста, настроила отслеживание перехода по баннеру на другой сайт, в отладке показывает, что тег работает правильно, а вот в UA в режиме реального времени данных нет ((. Что может быть не так?
Заранее спасибо!
Юлия, проверьте идентификатор счетчика, а также убедитесь, что в отладчике есть информация об отправке данных события
Событие зафиксировать удаётся? Но как по нему настроить цель в GA?
Денис, нужно настроить цель основанную на событии. При создании цели в GA есть соответствующая опция
Спасибо большое за статью!
У меня 2 вопроса появилось.
1) Почему в “пользовательском html надо писать:
alert(‘Клик по элеменду с class’);
2) Захожу в предварительный просмотр.
Показывается, что код Аналитики на странице, а вот “пользовательского кода” на странице нет.
При этом когда кликаю на кнопку (на которую событие ставил), появляется сообщение, что был клик по элементу с class. И теперь отображается, что код аналитики, и пользовательский код есть.
Так и должно быть?
С уважением, Алексей.
Алексей, отвечаю по пунктам:
1. Это для демонстрации работы, можно написать код для вывода в консоли информации или любой другой
2. Верно, так и будет, код содержится в контейнере GTM
Где то я потеряла мысль – что вставлять в блок :
Настройка тега HTML ???
Здравствуйте, оперативно сделали обзор на GTM 2.0. Сам только начал разбираться что да как и сразу переход на версию 2.0. Вопрос в следующем:
Настройка тега HTML: в поле ввода html текста нужно указать строку, где присутствует отслеживаемая переменная? Поправьте если ошибся. Спасибо!
Из Вашего комментария не понятна проблема и задача
к сожалению, материал не актуальный. возможно что-то менялось в ТегМенеджере. Если выбирать Пользовательский HTML, то обязательно нужно вставлять какой-то html!
во- вторых, для триггера нужно указывать два условия – условие активации и условие включения (в чем разница – я так и не поянл).
в-третьих, почему-то для отслеживания кликов, везде говорят, что нужен тег Аналитикса, а не HTML
Валерий, если выбран HTML тег, то в нем обязательно должен быть некоторый код. Вы можете использовать любой тип тега, HTML приведен для примера. Я не понял на основании чего вами сделан вывод о неактуальности материала?
Сделал по инструкции, но события так и не появились в отчете GA.
В связи с этим вопрос:
> Нужно ли было что-то добавлять на сайт еще (код)?
Будет или может уже был материал на тему, как создать события для просмотра видео из Ютуба, показов баннеров?
Спасибо.
Денис, разобраться с причинами “не работает” можно только работая с сайтом. Про YT пока не писал, а про баннеры не понял. Что имелось ввиду?
Добрый день, Иван! Спасибо за обзор! Подскажите где на этом этапе проставить событие для GA, которое после можно будет настроить в качестве цели?
Всё супер! Но у меня не работает. Бьюсь и не могу понять
Сделал всё как надо, в отладчике есть событие, но у меня происходит переход и ничего не фиксируется.
http://prntscr.com/79pl6i
Из Вашего сообщения не понятно о чем идет речь
Помогите настроить отправку форм для 2 форм SIGN UP и Play https://svetofor24.com/.
Уже 2 недели пробую все методы ничего не получается Версия таг менеджер 2.0
Максим, у Вас происходит предварительная валидация формы, нужно настраивать исходя из этого логику работы GTM. Если Вам необходима помощь в настройке – можете обратиться за соответствующей услугой
Иван, еще вопрос, что писать в блоке с добавлением “содержимое тега” alert(‘клик по ссылке с id’) ?
Можно ли оставить только – ?
Денис, этот блок для демонстрации, используйте ту конструкцию, которая Вам необходима для решения конкретной задачи
Иван, может сможете помочь. На моем сайте не прописан id кнопки. Есть что-то такое:
В чем может быть проблема?
div class=”cart-button”
div class=”cart”
И сколько я ни прописываю Click Classes равно cart-button, GTM не фиксирует это событие
Елена, возможно на этих элементах есть некоторые обработчики, которые выполняются ДО фиксация события в GTM. Это распространенная ситуация, но ответить более точно можно только ознакомившись с сайтом
gobelendecor.ru . Пытаюсь отследить нажатие кнопки “В корзину”. Буду очень благодарна за помощь!
Елена, у Вас на этой кнопке есть обработчик JS или jQuery, по этой причине не “видно” события GTM. Вам нужно написать собственный обработчик или дописать существующий, чтобы он отправлял некоторые данные в GTM через уровень данных, на основе которых Вы сможете настроить то, что Вам необходимо
Добрый день, Иван!
Не удается настроить отслеживание формы по Вашему примеру. Подскажите пожалуйста, что делаю не так? Описание настройки привожу ниже
Тег:
Выбор продукта – Google Analytics
Выбор типа тега – Universal Analytics
Настройка тега
ID отслеживания – id GA
Тип отслеживания – Событие
Категория – форма
Действие – шапка
Не взаимодействие – False
Условие активации -> Еще -> форма шапка
Тригер (форма шапка):
Выбор события – Пользовательский
Условия активации:
Имя события: -*
Event равно gtm.formSubmit
Form ID равно form1
аналогично! буду рад если автор напишет алгоритм.
Юрий, общий алгоритм таков – если работают стандартные события gtm.xxx, можно использовать их, если они не доступны, то необходимо писать свой собственный обработчик события, которое выполняет пользователь
Добрый день, Иван!
Подскажите, чем все-таки отличаются условие включения и условие активации?
Добрый вечер, Вера! Условие активации – это настройка тега, в которой указываются триггер, при истинности которого тег “сработает”. Условие включения – это набор условий ВНУТРИ триггера, при выполнении которых он будет считаться истинным.
Добрый день, Иван!
Возникла сложность с настройкой нажатия на кнопку во всплывающей форме. В ситуации с поп-апами настройка отслеживания вообще меняется? Как это верно сделать?
Анна, причин по которым Google Tag Manager “не видит” кнопку несколько, попробуйте написать свой обработчик для клика по кнопке и через него передавать информацию на уровень данных
Добрый день.
Хотелось бы создать триггер, который активируется только при условии активации другого триггера (или тега). Также при настройке правила активации, выбирая 2 триггера, пишется “Любой из этих триггеров приведет к активации тега”, может есть возможность использовать логическое “И” или последовательность?
Заранее спасибо.
Сейчас есть такая возможность. По логике: триггеры в контейнере работают по правилу ИЛИ, условия в триггере работают по правилу И
Иван,
можно использовать статус другого триггера в качестве условия для активации? Можете показать пример?
У тега может быть несколько триггеров, если хотя бы один из их принимает значение ИСТИНА, то тег активируется
Иван, спасибо за статью!
Только начинаю осваивать GTM, сделал все в точности по инструкции с custom html – события не передавались в аналитикс. Изменил тип тега на GA и уже в его настройках выбрал отслеживание событий – все стало Ок. В связи с чем возник вопрос – как передавать данные в Аналитикс, настроенные через все другие стандартные типы тегов, включая custom html? Пока что мне удалось это сделать только через тип тега GA.
Сергей, все что касается передачи данных в Google Analytics нужно настраивать в тегах типа Google Analytics, это правильная реализация
Иван, добрый день! Только осваиваем GTM. Настроили клик с переходом на скачивание файла (по вашему второму примеру) и, возможно, глупый вопрос – как настроить эту цель отслеживания в GA?
Нужно создать тег типа Google Analytics, в нем указать тип хита событие и активировать его при клике по нужному элементу
Подскажите пожалуйста почему отладчик может не открываться? пробовал в двух браузерах firefox и chrome, в режиме инкогнито в обоих, не вылезает… alert срабатывает и второй вопрос, можно ли это событие передать потом в метрику для достижения цели? спасибо!
Иван, подобной проблемы не возникало с отладчиком. Какое событие Вы хотите зафиксировать в Метрике? Если срабатывает триггер, то на него можно тег добавить, с кодом Метрики
Клик по элементу
Вернуться в каталогвы имеете ввиду использование reachGoal? если можно на пальцах, что должно быть в коде?
как я понимаю помимо проверки срабатывания события:
alert('back-in-catalog');добавить еще отправку в счетчик срабатывание цели
onclick="yaCounter.reachGoal(''); return true;"(не очень силен пока в этом…)
Иван, верно. Можно использовать reachGoal
с целью в метрике заработало, подскажите пожалуйста как запараллелить тоже самое с GA?
На триггер, который активирует тег для Метрики “повесить” тег Google Analytics
а как отслеживать не только клики по id но и показы? в случае если это баннерная реклама.
При создании первого элемента /выбираем тип пользовательский HTML:/ просит ввести HTML. Что вводить?
Юрий, вводите код, который должен быть выполнен в случае активации тега
Подскажите, и что нужно писать в HTML, если мне нужно передать событие о достижении цели в Universal Analytics
Роман, нужно использовать тег типа Universal Analytics, в котором задать необходимые настройки (например, описание события)
Т.е. я могу, например, написать туда: ga(‘send’, ‘event’, ‘button’, ‘click’);
И настроить соответствующую цель в Google Analytics
Чтобы отслеживать клик по кнопке?
Нет, для кода используется тип “Пользовательский HTML”, в тегах Google Analytics нужно использовать соответствующие поля в настройках тега
Иван, добрый день. В Вашем примере при создании триггера по другому показано настройку. Я поняла, что это скорее всего обновления 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
Обязательно прописывать два? Или какое из них более приоритетное?
Марина, если я правильно понял Ваш вопрос, то это дополнительные условия активации триггера. Например, условие событие gtm.click И урл страницы содержит …. Если можете – приложите скриншот к своему вопросу
Вот скриншот http://www.picshare.ru/view/7749092/
Пробую настроить отслеживания кнопок социальных сетей через GTM:) Не получается пока, но вот дополнительный параметр еще больше запутывает…
Спасибо!
Марина, первый блок условий служит для определения страниц, где должен “находиться” триггер, второй блок непосредственно условие триггера
Здравствуйте, Иван.
Спасибо большое за такую подробную и понятную статью. Пользуясь вашими рекомендациями настроила события в GTM, а именно – обработку нажатия на кнопку. Но теперь, если на сайте нажать на кнопку, для которой настроено событие, то появляется всплывающее окно с именем триггера. Где ошибка у меня в настройках, не могу понять.
Помогите, пожалуйста.
Заранее огромное спасибо!
Анастасия, для решения Вашей проблемы необходимо изучить настройки в Google Tag Manager
Привет.
Если есть внутри которого 10 разных ссылок. Мне нужно остлеживать нажатие на весь див, даже если юзер жмет на ссылку.
Стандартными методами GTM отслеживает нажатие на внешний див, только если тыкнуть в него мимо ссылки, если же нажать на ссылку, то нажатие на внешний див не остлеживается.
Изменить внутренние ссылки возможности нет – это внешний жаваскрипт.
Есть варианты?
Сергей, нужно писать свой обработчик для соответствующего элемента на JavaScript или JQuery
Вырезал теги софт твой…
…Если есть див, внутри которого 10 разных ссылок…