Контроль перезагрузки страницы: 2 способа

Сентябрь 26, 2020

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

Одно будет связано с добавлением дополнительного кода в консоль разработчика, а другое - с установкой специального расширения для браузера Google Chrome. Давайте разберем каждый способ подробнее.

Специальный код

Скопируйте этот код, вставьте его в консоль разработчика (вызов клавишей F12 для Google Chrome) на вкладке Console. Нажмите Enter:

Контроль перезагрузки страницы: 2 способа

Консоль разработчика - Console

В результате вы увидите undefined в последней строчке. Событие beforeunload позволяет веб-странице вызвать диалоговое окно подтверждения, спрашивающее пользователя, действительно ли он хочет покинуть страницу. Если пользователь подтверждает, браузер переходит на новую страницу, в противном случае он отменяет навигацию.

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

Контроль перезагрузки страницы: 2 способа

Диалоговое окно

Если выбрать Закрыть, то диалоговое окно пропадет и начнется процесс перезагрузки страницы. Если нажать Отмена, то сценарий все равно произойдет, но вы останетесь на прежней вкладке и сможете проанализировать события на временной шкале отладчика в Google Tag Manager.

Например, на главной странице моего сайта есть форма записи на вебинар. При заполнении поля Email и отправки заявки страница автоматически перезагружается, и пользователь перенаправляется на страницу с другим URL.

Контроль перезагрузки страницы: 2 способа

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

Но благодаря событию beforeunload и специальному коду, мы можем предотвратить автоматическую перезагрузку страницы. Просто запускаете код, совершаете событие и в диалоговом окне нажимаете Отмена. Триггер сработает, и вы сможете в режиме предварительного просмотра GTM проанализировать его состояние.

Расширение для браузера Google Chrome

Если вы не хотите работать с кодом и консолью разработчика, есть специальное расширение для Google Chrome stopReload, которое блокирует переадресацию на другие страницы при нажатии на ссылки и кнопки. Его разработал Павел Мрыкин (эксперт по сквозной аналитике в компании Calltouch).

Чтобы его добавить к себе в браузер, перейдите по ссылке и нажмите Установить:

Контроль перезагрузки страницы: 2 способа

Расширение stopReload

В правом верхнем углу у вас появится иконка расширения.

Контроль перезагрузки страницы: 2 способа

Иконка stopReload

Чтобы активировать расширение, нажмите на иконку stopReload. Круг окрасится в красный цвет. После этого вы можете совершать клики по кнопкам и ссылкам. Как и в случае со специальным кодом, вы будете видеть всплывающее окно с кнопками Закрыть и Отмена.

Контроль перезагрузки страницы: 2 способа

Активное расширение

Павел записал небольшое видео с демонстрацией работы расширения stopReload:

Есть и другое расширение для браузера Google Chrome, которое вы можете использовать - это GTM Sonar. О принципе его работы я писал в этом материале.

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике