Отслеживание кликов по кнопке и отправки форм с помощью Google Tag Manager

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

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

Эта статья предназначена для тех, кому необходимо отслеживать клики по кнопкам и отправку форм на своем сайте. Прежде, чем перейти к настройке, вы должны установить Google Tag Manager на сайт, создать тег Google Analytics или Universal Analytics, а также понимать механизм работы автоматических событий в Диспетчере Тегов.

Отслеживание кликов по кнопке

Предположим, у вас на сайте есть кнопка “Оформить заказ” или “Оставить комментарий”, причем после ее нажатия пользователь не перенаправляется на какую-либо страницу благодарности (вместо этого может появляться сообщение вроде “Спасибо за… комментарий, подписку и т.п.”). С другой стороны, пользователь может и перенаправляться на другую страницу, но она уже находится не на вашем сайте, и отследить это не получится.

Настроим отслеживание кликов по кнопке “Оформить заказ”

Отслеживание кликов по кнопке в Диспетчере Тегов

1. Подключаем в Google Tag Manager тег прослушивания всех кликов (как это сделать, описано здесь).

2. Создаем новый тег и называем его в соответствии с кнопкой, статистика кликов по которой нам нужна. Подставляем код отслеживания соответствующего аккаунта Аналитики. Тип отслеживания – событие.

Также подставляем категорию события и само действие – они будут отображаться в отчетах Гугл Аналитики.

Настройка тега отслеживания кликов по кнопке

3. Создаем правило работы тега: {{event}} равно gtm.click. Дальше нужно добавить правило, которое будет непосредственно относиться к кнопке. Например, нужен ее id. В нашем случае id=”butOrder”:

Отслеживание кликов по кнопке - id кнопки

Именно это мы и используем для создания второй части правила работы тега:

Правило активации тега для отслеживания кликов по кнопке

4. Сохраняем тег и создаем версию контейнера.

5. Проверяем работу тега в версии (Просмотр и отладка)

Проверка отслеживания кликов по кнопке

6. Если тег отрабатывает корректно, публикуем версию.

Отслеживание отправки форм

Предположим, у нас есть форма, и мы хотим отследить ее отправку.

Настройка отслеживания формы в Google Tag Manager

1. Создаем тег прослушивания форм.

Создание тега прослушивания форм в Google Tag Manager

В правиле активации тега выбираем ту страницу, которая нас интересует. В моем случае она заканчивается на /forma-zakaza.html

Правило активации тега прослушивания форм

Сохраняем тег.

2. Создаем еще один тег, с таким вы уже знакомы:

тип тега – Universal Analytics (или Google Analytics)
тип отслеживание – событие
также заполняем категорию и действие (можно и ярлык).

Тег отслеживания отправки формы

3. Создаем правило для активации тега: {{event}} равно gtm.formSubmit

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

4. Сохраняем тег и тестируем его.

Кнопка или форма?

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

В итоге я создала 2 события: отслеживание клика по кнопке в форме внизу поста и отслеживание кликов по кнопке в сайдбаре. Достаточно было всего лишь присвоить им уникальные id.

В то же самое время, настроив отслеживание кликов по кнопке вместо отслеживания форм, вы не сможете воспользоваться функциями Ожидания Тегов и Проверки форм (доступны при создании тега прослушивания отправки форм.)

Настройки тега прослушивания отправки форм

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

Надеюсь, статья была для вас полезной, поэтому подписывайтесь на не менее полезные обновления! А также задавайте вопросы и делитесь своими мыслями!

Если Вам понравилась статья, подпишитесь на обновления блога, и Вы будете всегда в курсе выхода новых материалов.

1 звезда2 звезды3 звезды4 звезды5 звезд! Ура! (55 голосов, оценка: 4.80 из 5)
Loading...Loading...
Последние комментарии

А что думаете Вы?

Ваш email не будет опубликован. Обязательные поля отмечены *

CommentLuv badge