Контроль перезагрузки страницы: 2 способа
Кликнув по ссылке, кнопке или отправив форму, произошла перезагрузка страницы и ваша панель в режиме отладки Google Tag Manager обновилась? Из-за этого вы не можете выбрать переменную для триггера и настроить корректно отслеживание? Предлагаю 2 решения этой проблемы.
Одно будет связано с добавлением дополнительного кода в консоль разработчика, а другое - с установкой специального расширения для браузера Google Chrome. Давайте разберем каждый способ подробнее.
Специальный код
|
1 2 3 4 |
window.addEventListener('beforeunload', (event) => { event.preventDefault(); event.returnValue = ''; }); |
Скопируйте этот код, вставьте его в консоль разработчика (вызов клавишей F12 для Google Chrome) на вкладке Console. Нажмите Enter:
Консоль разработчика - Console
В результате вы увидите undefined в последней строчке. Событие beforeunload позволяет веб-странице вызвать диалоговое окно подтверждения, спрашивающее пользователя, действительно ли он хочет покинуть страницу. Если пользователь подтверждает, браузер переходит на новую страницу, в противном случае он отменяет навигацию.
Нам этом все! Теперь вы можете совершать клики по кнопкам, переходить по ссылкам и отправлять форму. Перед перезагрузкой страницы или переходом на другой сайт вы будете видеть всплывающее окно, в котором будет две кнопки: Закрыть и Отмена.
Диалоговое окно
Если выбрать Закрыть, то диалоговое окно пропадет и начнется процесс перезагрузки страницы. Если нажать Отмена, то сценарий все равно произойдет, но вы останетесь на прежней вкладке и сможете проанализировать события на временной шкале отладчика в Google Tag Manager.
Например, на главной странице моего сайта есть форма записи на вебинар. При заполнении поля Email и отправки заявки страница автоматически перезагружается, и пользователь перенаправляется на страницу с другим URL.
Событие отправки формы сработало, но страница не перезагрузались (хотя без кода перезагружается)
Но благодаря событию beforeunload и специальному коду, мы можем предотвратить автоматическую перезагрузку страницы. Просто запускаете код, совершаете событие и в диалоговом окне нажимаете Отмена. Триггер сработает, и вы сможете в режиме предварительного просмотра GTM проанализировать его состояние.
Расширение для браузера Google Chrome
Если вы не хотите работать с кодом и консолью разработчика, есть специальное расширение для Google Chrome stopReload, которое блокирует переадресацию на другие страницы при нажатии на ссылки и кнопки. Его разработал Павел Мрыкин (эксперт по сквозной аналитике в компании Calltouch).
Чтобы его добавить к себе в браузер, перейдите по ссылке и нажмите Установить:
Расширение stopReload
В правом верхнем углу у вас появится иконка расширения.
Иконка stopReload
Чтобы активировать расширение, нажмите на иконку stopReload. Круг окрасится в красный цвет. После этого вы можете совершать клики по кнопкам и ссылкам. Как и в случае со специальным кодом, вы будете видеть всплывающее окно с кнопками Закрыть и Отмена.
Активное расширение
Павел записал небольшое видео с демонстрацией работы расширения stopReload:
Есть и другое расширение для браузера Google Chrome, которое вы можете использовать - это GTM Sonar. О принципе его работы я писал в этом материале.
