Как отслеживать thankyou page, если страницы открываются без перезагрузки: «/app/#!/thanks»

Где-то 3 недели назад я начал помогать как веб-аналитик одному ICO. Как обычно, аналитика была не настроена, а то, что было, — не работало. А не работало, потому что открытие новых страниц происходило без перезагрузки страницы, асинхронно. То есть, адрес страницы как бы меняется, например, с «/app/#!/main» на «/app/#!/thanks«, но реально перезагрузки страниц не происходит.

Где здесь проблема?

Дело в том, что код Google Analytics по умолчанию видит открытие новой страницы вместе с загрузкой кода GA. А загрузка кода происходит при открытии страницы. То есть, если страница не перезагружается, «pageview» не отправляется в GA и просмотр новой страницы не фиксируется. А значит мы банально не видим НИЧЕГО, что пользователь делает на сайте, не можем настроить конверсии и вообще печалька.

Как решать проблему?

Дело в том, что SPA фреймворки (Single Page Application), которые обычно используют, довольно умные. И поддерживают возврат на предыдущую страницу приложения по нажатию кнопки назад. А делают они это, искусственно добавляя в историю браузера страницы типа «/app/#!/main» и т.д. Получается, нажимая кнопку «назад» в браузере, пользователь возвращается на предыдущую страницу, опять же, без перезагрузки.

Что мы можем с этим сделать? Каждый раз, когда обновляется история браузера (а значит, открывается новая страница), просто брать адрес из адресной строки браузера и отправлять как виртуальную страницу в Google Analytics. И все, у нас есть полная картина поведения людей внутри приложения. К тому же, можем настроить конверсии на открытие страницы типа «/app/#!/thanks«.

Как это все сделать с помощью Google Tag Manager?

На самом деле, все проще, чем кажется.

1. Настраиваем в GTM триггер на изменение истории браузера
2. Создаем тег GA типа «просмотр страницы» c небольшой модификацией
3. Запускаем наш тег по триггеру

Скриншоты:

1. Выбираем тип отслеживания — просмотр страницы, чтобы отправить просмотр виртуальной страницы в GA
2. Включаем переопределение настроек. Ведь нам нужно будет переопределить поле «page», чтобы записать туда реальный адрес страницы, а не тот, который открылся при первой загрузке приложения.
3. В настройке «Поля, которые необходимо задать», выбираем поле «page»
4. Вместо обычного пути страницы, собираем путь страницы из кусочков: {{Page Path}}#{{New History Fragment}}. Сейчас отдельно разберем каждый.
   • {{Page Path}} — обычный путь страницы
   • # — разделитель/хеш/анкор. Ну не суть, главное, он нужен, чтобы адрес в GA был такой же, какой мы видим в браузере. Просто искусственно добавляем
   • {{New History Fragment}} — то, что находится после хеша.
5. Включаем наш тег по триггеру, который мы создали выше.

Все, теперь каждая открытая страница будет отображаться, несмотря на то, что открытие происходит без перезагрузки страницы,

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

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