Отслеживание кликов по кнопке и отправки форм с помощью Google Tag Manager
Нам всем интересно, что пользователи делают на наших сайтах. Поэтому мы изучаем Вебвизор, карту кликов, пользовательский поиск и т.д.
Сегодня по многочисленным просьбам я расскажу, как с помощью Google Tag Manager отследить клики по кнопкам и отправку формы.
Отслеживание кликов по кнопке
Предположим, у вас на сайте есть кнопка “Оформить заказ” или “Оставить комментарий”, причем после ее нажатия пользователь не перенаправляется на какую-либо страницу благодарности (вместо этого может появляться сообщение вроде “Спасибо за… комментарий, подписку и т.п.”). С другой стороны, пользователь может и перенаправляться на другую страницу, но она уже находится не на вашем сайте, и отследить это не получится.
Настроим отслеживание кликов по кнопке “Оформить заказ”
1. Подключаем в Google Tag Manager тег прослушивания всех кликов (как это сделать, описано здесь).
2. Создаем новый тег и называем его в соответствии с кнопкой, статистика кликов по которой нам нужна. Подставляем код отслеживания соответствующего аккаунта Аналитики. Тип отслеживания – событие.
Также подставляем категорию события и само действие – они будут отображаться в отчетах Гугл Аналитики.
3. Создаем правило работы тега: {{event}} равно gtm.click. Дальше нужно добавить правило, которое будет непосредственно относиться к кнопке. Например, нужен ее id. В нашем случае id=”butOrder”:
Именно это мы и используем для создания второй части правила работы тега:
4. Сохраняем тег и создаем версию контейнера.
5. Проверяем работу тега в версии (Просмотр и отладка)
6. Если тег отрабатывает корректно, публикуем версию.
Отслеживание отправки форм
Предположим, у нас есть форма, и мы хотим отследить ее отправку.
1. Создаем тег прослушивания форм.
В правиле активации тега выбираем ту страницу, которая нас интересует. В моем случае она заканчивается на /forma-zakaza.html
Сохраняем тег.
2. Создаем еще один тег, с таким вы уже знакомы:
тип тега – Universal Analytics (или Google Analytics)
тип отслеживание – событие
также заполняем категорию и действие (можно и ярлык).
3. Создаем правило для активации тега: {{event}} равно gtm.formSubmit
4. Сохраняем тег и тестируем его.
Кнопка или форма?
В принципе, механизмы отслеживания кнопок и форм довольно похожи. Я иногда для форм использую отслеживание кликов по кнопке. Например, на странице у меня две формы подписки на обновления: в сайдбаре и внизу статьи. После того, как человек подписывается, он перенаправляется на страницу с дальнейшими инструкциями. Но, не смотря на то, что я могу это отследить, я не могу узнать, какую именно форму заполняют чаще.
В итоге я создала 2 события: отслеживание клика по кнопке в форме внизу поста и отслеживание кликов по кнопке в сайдбаре. Достаточно было всего лишь присвоить им уникальные id.
В то же самое время, настроив отслеживание кликов по кнопке вместо отслеживания форм, вы не сможете воспользоваться функциями Ожидания Тегов и Проверки форм (доступны при создании тега прослушивания отправки форм.)
Поэтому прежде, чем настраивать то или иное событие в Google Tag Manager, продумайте, как именно вы хотите его отслеживать.
Надеюсь, статья была для вас полезной, поэтому подписывайтесь на не менее полезные обновления! А также задавайте вопросы и делитесь своими мыслями!
Спасибо, интересно. В статье лучше прописать как в HTML выглядит кнопка и где там id — так нагляднее. Для вашего случая это: <a href=”forma-zakaza.html” rel=”nofollow”>Оформить заказ</a>
Эх…система комментариев не дает исходный HTML код добавить в сообщение (((
Отредактировала ваш комментарий. Лучше залью сюда скрин того, как выглядит id. Просто не думаю, что это должно вызывать какие-то трудности, если человек уже дошел до настройки отслеживания кликов по кнопке
https://prntscr.com/3kvr2n
В моем комментарии был прописан id для ссылки, вида: id=”butOrder”
Кристина, а где в ГА можно смотреть события по отправке форм? К примеру после отправки формы из корзины? Спасибо
Отчет Поведение > События. Там уже можно выбирать, какое именно событие хотите посмотреть.
Да, спасибо!, увидел. И События при отладке или в Тег ассистант не сразу срабатывали но все равно я их опубликовал и за ночь я вижу что все работало и работает.
Замечательно)
А смотреть работу событий сразу после настройки лучше в режиме реального времени.
Да, спасибо, все видно и в реальном времени) Я вам тогда скрины тегов уже не будут делать – все ОК, спасибо!
Спасибо за статью, но есть вопрос, что если этих форм , отправку которых нужно отследить не 1, а много? около 100 , например.?
Просто есть несколько типов форм – заказ продукта, заказ услуги, отправка резюме и т.д. Они все разные и нужно отслеживать отправку каждой из них.. Как быть в таком случае?
У вас на сайте может быть и 100 форм, но типов этих форм наберется, cкажем, 5 (заказ продукта, заказ услуги, отправка резюме и т.д), причем не вижу смысла делать формы одного типа совершенно разными. В таком случае я бы настроила теги на каждый тип формы, а в Аналитике уже будет видно, с какой страницы форма была заполнена.
Кристина, да, получается как вы написали, но проблемка в том, что в аналитике показывает страницу с благодарностью, а не страницу с которой отправили заявку. Знаете ли вы как это можно исправить?
Ситуация такая, что на сайте много страниц, где есть одни и те же формы.
Попробуйте выбрать “Посадочные страницы” как дополнительный параметр в отчетах.
Кто-нибудь пробовал отслеживать формы поиска по сайту? Когда отправка формы происходит не кликом мышки, а нажатием Enter. Насколько я понимаю, в JS за это отвечает событие onSubmit. Но каким боком его к GTM привязать…
Что делать если на сайте используется Universal Analytics , а не GTM ?? где почитать о формах?
В таком случае используйте специальный код. Информации об этом много, включая и хэлп Гугла.